/* =========================================================
   Valdemar Extras
   Animações, header fixo e widget "Antes / Depois".
   As cores vêm das cores globais do Elementor (Site Settings).
   ========================================================= */

html { scroll-behavior: smooth; }

/* Evita scroll horizontal causado pelo menu móvel fechado. */
body { overflow-x: clip; }

.elementor-widget-heading .elementor-heading-title { text-wrap: balance; }
.elementor-widget-text-editor p { text-wrap: pretty; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Palavra destacada nos títulos: <span class="vg-accent">palavra</span> */
.vg-accent {
	color: var(--e-global-color-vgred2, #E5534B);
	font-style: italic;
	padding-right: .06em;
}

/* ---------------------------------------------------------
   Animações de entrada (Avançado > Efeitos de movimento)
   Mais curtas e suaves do que as originais do Elementor.
   --------------------------------------------------------- */
@keyframes vgFadeInUp    { from { opacity: 0; transform: translate3d(0, 34px, 0); }  to { opacity: 1; transform: none; } }
@keyframes vgFadeInDown  { from { opacity: 0; transform: translate3d(0, -24px, 0); } to { opacity: 1; transform: none; } }
@keyframes vgFadeInLeft  { from { opacity: 0; transform: translate3d(-44px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes vgFadeInRight { from { opacity: 0; transform: translate3d(44px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes vgZoomIn      { from { opacity: 0; transform: scale(.94); }               to { opacity: 1; transform: none; } }
@keyframes vgFadeIn      { from { opacity: 0; }                                      to { opacity: 1; } }

.elementor-element.animated {
	animation-duration: .95s;
	animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
.elementor-element.animated.animated-fast { animation-duration: .6s; }
.elementor-element.animated.animated-slow { animation-duration: 1.5s; }
.elementor-element.animated.fadeInUp    { animation-name: vgFadeInUp; }
.elementor-element.animated.fadeInDown  { animation-name: vgFadeInDown; }
.elementor-element.animated.fadeInLeft  { animation-name: vgFadeInLeft; }
.elementor-element.animated.fadeInRight { animation-name: vgFadeInRight; }
.elementor-element.animated.zoomIn      { animation-name: vgZoomIn; }
.elementor-element.animated.fadeIn      { animation-name: vgFadeIn; }

/* ---------------------------------------------------------
   Botões
   --------------------------------------------------------- */
.elementor-button {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .35s ease, transform .2s ease;
}
.elementor-button .elementor-button-icon { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.elementor-button:hover .elementor-button-icon { transform: translateX(4px); }
.vg-btn-phone .elementor-button:hover .elementor-button-icon { transform: rotate(-12deg); }
.elementor-button:active { transform: translateY(1px); }
.elementor-button:focus-visible,
.hfe-nav-menu a:focus-visible { outline: 3px solid var(--e-global-color-primary, #9B1F1D); outline-offset: 3px; }

/* ---------------------------------------------------------
   Cartões (classe CSS: vg-card) – sobem ligeiramente e a
   foto aproxima ao passar o rato.
   --------------------------------------------------------- */
.vg-card.e-con {
	transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s cubic-bezier(.22, 1, .36, 1), background-color .4s ease;
}
.vg-card.e-con:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 50px -28px rgba(38, 41, 45, .45);
}
.vg-card .elementor-widget-image { overflow: hidden; }
.vg-card .elementor-widget-image img { transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.vg-card:hover .elementor-widget-image img { transform: scale(1.05); }

/* Caixas de serviço (classe CSS: vg-svc) */
.vg-svc.elementor-widget {
	transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s cubic-bezier(.22, 1, .36, 1), background-color .45s ease !important;
}
.vg-svc.elementor-widget:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 50px -28px rgba(38, 41, 45, .55);
}
.vg-svc .elementor-icon { transition: transform .55s cubic-bezier(.22, 1, .36, 1), background-color .45s ease, color .45s ease; }
.vg-svc:hover .elementor-icon { transform: rotate(-8deg) scale(1.06); }
.vg-svc .elementor-icon-box-description { transition: color .45s ease; }
.vg-svc:hover .elementor-icon-box-description { color: rgba(255, 255, 255, .74); }

/* Fotografias de serviço clicáveis (classe CSS: vg-tile) */
.vg-tile.e-con { text-decoration: none; }
.vg-tile .elementor-widget-heading,
.vg-tile .elementor-widget-text-editor { transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.vg-tile:hover .elementor-widget-heading,
.vg-tile:hover .elementor-widget-text-editor,
.vg-tile:focus-visible .elementor-widget-heading,
.vg-tile:focus-visible .elementor-widget-text-editor { transform: translateY(-6px); }
.vg-tile:focus-visible { outline: 3px solid var(--e-global-color-primary, #9B1F1D); outline-offset: 4px; }

/* Imagem com zoom suave (classe CSS: vg-zoom num widget de imagem) */
.vg-zoom { overflow: hidden; }
.vg-zoom img { transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.vg-zoom:hover img { transform: scale(1.04); }

/* ---------------------------------------------------------
   Header fixo
   O header fica preso ao topo. Ao fazer scroll ganha sombra e
   o logótipo encolhe ligeiramente (sem mexer na altura, para
   a página não dar saltos).
   --------------------------------------------------------- */
#masthead {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 990;
	transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
@media (max-width: 600px) {
	#masthead { top: 0; }
}
/* Se um dia houver uma barra de cima (classe vg-topbar), ela sai com o scroll. */
body.vg-scrolled #masthead { transform: translateY(calc(-1 * var(--vg-topbar-h, 0px))); }
.vg-mainbar.e-con {
	transition: box-shadow .4s ease, background-color .4s ease, border-color .4s ease;
}
body.vg-scrolled .vg-mainbar.e-con {
	background-color: rgba(255, 255, 255, .92) !important;
	border-color: transparent !important;
	box-shadow: 0 14px 34px -22px rgba(29, 32, 35, .5);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
}
.vg-logo img {
	transition: transform .45s cubic-bezier(.22, 1, .36, 1);
	transform-origin: left center;
}
body.vg-scrolled .vg-logo img { transform: scale(.86); }

/* Menu do telemóvel/tablet: fechado não ocupa espaço (o botão fica à direita). */
@media (max-width: 1024px) {
	.vg-mainbar .hfe-nav-menu__breakpoint-tablet nav.hfe-nav-menu__layout-horizontal {
		position: absolute;
		top: 100%;
		box-shadow: 0 24px 40px -24px rgba(29, 32, 35, .35);
	}
	.vg-mainbar .hfe-nav-menu__breakpoint-tablet nav.hfe-dropdown .hfe-menu-item::before,
	.vg-mainbar .hfe-nav-menu__breakpoint-tablet nav.hfe-dropdown .hfe-menu-item::after { display: none; }
}

/* ---------------------------------------------------------
   Botão flutuante do WhatsApp (classe CSS: vg-whatsapp)
   --------------------------------------------------------- */
.vg-whatsapp .elementor-icon {
	position: relative;
	isolation: isolate;
	box-shadow: 0 14px 30px -10px rgba(18, 140, 70, .55);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.vg-whatsapp .elementor-icon:hover { transform: scale(1.08); }
.vg-whatsapp .elementor-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: #25D366;
	animation: vgPulse 2.6s cubic-bezier(.22, 1, .36, 1) 1.5s 3 both;
}
@keyframes vgPulse {
	0%        { transform: scale(1);   opacity: .5; }
	70%, 100% { transform: scale(1.75); opacity: 0; }
}

/* ---------------------------------------------------------
   Formulário (Fluent Forms)
   --------------------------------------------------------- */
.fluentform .ff-el-form-control { transition: border-color .25s ease, box-shadow .25s ease; }
.fluentform .ff-el-form-control:focus {
	border-color: var(--e-global-color-primary, #9B1F1D) !important;
	box-shadow: 0 0 0 3px rgba(155, 31, 29, .14) !important;
}

/* ---------------------------------------------------------
   Widget "Antes / Depois"
   --------------------------------------------------------- */
.vg-ba {
	--pos: 50%;
	--vg-ba-accent: var(--e-global-color-primary, #9B1F1D);
	--vg-ba-line: #FFFFFF;
	--vg-ba-label-bg: rgba(29, 32, 35, .72);
	--vg-ba-label-color: #FFFFFF;
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #1D2023;
	cursor: ew-resize;
	-webkit-user-select: none;
	user-select: none;
	touch-action: pan-y;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
}
.vg-ba[data-mode="drag"] { cursor: default; }
.vg-ba .vg-ba__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	pointer-events: none;
}
.vg-ba__before {
	position: absolute;
	inset: 0;
	z-index: 1;
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.vg-ba__handle {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 48px;
	margin-left: -24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: ew-resize;
	outline: none;
}
.vg-ba__handle::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--vg-ba-line);
	box-shadow: 0 0 14px rgba(0, 0, 0, .3);
}
.vg-ba__knob {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--vg-ba-accent);
	color: #FFFFFF;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 10px 26px -6px rgba(0, 0, 0, .5);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.vg-ba:hover .vg-ba__knob,
.vg-ba.is-dragging .vg-ba__knob { transform: scale(1.1); }
.vg-ba__handle:focus-visible .vg-ba__knob { outline: 3px solid var(--vg-ba-accent); outline-offset: 5px; }
.vg-ba__label {
	position: absolute;
	z-index: 2;
	top: 16px;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--vg-ba-label-bg);
	color: var(--vg-ba-label-color);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	pointer-events: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: opacity .3s ease;
}
.vg-ba__label--before { left: 16px; }
.vg-ba__label--after  { right: 16px; }
.vg-ba.is-near-start .vg-ba__label--before,
.vg-ba.is-near-end .vg-ba__label--after { opacity: 0; }

/* ---------------------------------------------------------
   Carrossel de fotos de obra (classe CSS: vg-carousel)
   --------------------------------------------------------- */
.vg-carousel .elementor-swiper-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(29, 32, 35, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: .85;
	transition: background-color .3s ease, opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.vg-carousel .elementor-swiper-button:hover {
	background: var(--e-global-color-primary, #9B1F1D);
	opacity: 1;
	transform: scale(1.06);
}
.vg-carousel .elementor-swiper-button-prev { left: 16px; }
.vg-carousel .elementor-swiper-button-next { right: 16px; }
.vg-carousel .swiper-pagination-bullet { transition: width .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
.vg-carousel .swiper-pagination-bullet-active { width: 22px; border-radius: 999px; }
.vg-card .vg-carousel .swiper-slide-image { transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.vg-card:hover .vg-carousel .swiper-slide-active .swiper-slide-image { transform: scale(1.03); }
.vg-card .vg-carousel { overflow: hidden; }

/* ---------------------------------------------------------
   Movimento reduzido (definição do sistema do visitante)
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.elementor-element.animated { animation-duration: .01ms !important; animation-delay: 0s !important; }
	.vg-card.e-con, .vg-svc.elementor-widget, .vg-card img, .vg-zoom img, .vg-svc .elementor-icon, .vg-tile .elementor-widget-heading, .vg-tile .elementor-widget-text-editor, #masthead { transition: none !important; }
	.vg-card.e-con:hover, .vg-svc.elementor-widget:hover { transform: none; }
	.vg-card:hover .elementor-widget-image img, .vg-zoom:hover img, .vg-svc:hover .elementor-icon { transform: none; }
	.vg-whatsapp .elementor-icon::after { animation: none; display: none; }
	.elementor-ken-burns { transition: none !important; transform: none !important; }
}