/* Aortho Landing Page — Design Polish Layer */
/* Complementa os estilos do Elementor com efeitos que o builder free não suporta */

/* ---------- Global ---------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}
html.lenis-active,
html.lenis-active body {
	height: auto;
}
html.lenis-active.lenis,
html.lenis-active.lenis body {
	scroll-behavior: auto !important;
}
html.lenis-active {
	scroll-padding-top: 0;
}
html.lenis-active.lenis-stopped {
	overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
[id] {
	scroll-margin-top: 96px;
}
.elementor-container > .elementor-column {
	min-width: 0;
}

/* ---------- Header sticky com blur ---------- */
#site-header {
	position: sticky;
	top: 0;
	z-index: 9990;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
/* General hero background - appears first */
#hero {
	background: #f5f1e9 !important;
	color: #1a1a1a !important;
}
/* More specific selector for light hero background - appears second */
body:not(.lenis-active) #hero {
	background: #f5f1e9 !important;
	color: #1a1a1a !important;
}

/* ---------- Botões: hover lift ---------- */
.elementor-button {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.elementor-button:hover {
	transform: translateY(-2px);
}

/* ---------- Hero: moldura do carousel (banner slide) ---------- */
#hero .elementor-widget-image-carousel .elementor-widget-container {
        position: relative;
}
#hero .elementor-widget-image-carousel .swiper-slide-image {
        width: 100%;
        height: 480px;
        object-fit: cover;
        display: block;
}
#hero .elementor-widget-image-carousel .elementor-image-carousel-wrapper {
        border-radius: 22px;
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
#hero .elementor-widget-image-carousel .elementor-widget-container::after {
        content: '';
        position: absolute;
        inset: 14px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 14px;
        pointer-events: none;
        z-index: 2;
}
#hero .elementor-widget-image-carousel .swiper-pagination {
        bottom: 24px !important;
}

/* ---------- Hero: badge sobreposto ---------- */
#hero-badge {
	margin-top: -40px !important;
	margin-left: 20px;
	width: fit-content;
	position: relative;
	z-index: 3;
}

/* Updated WhatsApp CTA button styles – light banner, dark text, consistent hover */
#hero .elementor-widget-button .elementor-button[href*="api.whatsapp.com"] {
	--e-button-background-color: #e8e3d9;
	--e-button-text-color: #1a1a1a;
	background-color: #e8e3d9 !important;
	border: 1px solid #e8e3d9 !important;
	color: #1a1a1a !important;
	font-size: 0.95rem;
	font-weight: 600;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#hero .elementor-inner-section .elementor-widget-button .elementor-button[href*="api.whatsapp.com"].aortho-hero-button-active,
#hero .elementor-inner-section .elementor-widget-button .elementor-button[href*="api.whatsapp.com"]:hover,
#hero .elementor-inner-section .elementor-widget-button .elementor-button[href*="api.whatsapp.com"]:focus-visible {
	--e-button-background-color: #b9ad93;
	--e-button-text-color: #111111;
	background: #b9ad93 !important;
	background-color: #b9ad93 !important;
	border-color: #b9ad93 !important;
	color: #111111 !important;
	box-shadow: 0 10px 24px rgba(185, 173, 147, 0.35);
	transform: none !important;
}
#hero .elementor-widget-button .elementor-button[href="#tratamentos"] {
	--e-button-background-color: #e8e3d9;
	--e-button-text-color: #1a1a1a;
	background-color: #e8e3d9 !important;
	border: 1px solid #b9ad93 !important;
	color: #1a1a1a !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
#hero .elementor-inner-section .elementor-widget-button .elementor-button[href="#tratamentos"].aortho-hero-button-active,
#hero .elementor-inner-section .elementor-widget-button .elementor-button[href="#tratamentos"]:hover,
#hero .elementor-inner-section .elementor-widget-button .elementor-button[href="#tratamentos"]:focus-visible {
	--e-button-background-color: #b9ad93;
	--e-button-text-color: #111111;
	background: #b9ad93 !important;
	background-color: #b9ad93 !important;
	border-color: #b9ad93 !important;
	color: #111111 !important;
	box-shadow: 0 8px 20px rgba(185, 173, 147, 0.2);
	transform: none !important;
}
#hero .elementor-widget-button .elementor-button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* ---------- Hero: botões lado a lado à esquerda ---------- */
#hero-buttons .elementor-inner-column {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
}
#hero-buttons .elementor-inner-column > .elementor-element-populated {
	padding: 0 8px !important;
}
#hero-buttons .elementor-inner-column:first-child > .elementor-element-populated {
	padding-left: 0 !important;
}

/* ---------- Cards de tratamento: hover lift ---------- */
#tratamentos .elementor-inner-section .elementor-column {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#tratamentos .elementor-inner-section .elementor-column > .elementor-element-populated {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#tratamentos .elementor-inner-section .elementor-column:hover > .elementor-element-populated {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Fix hover target: apply to card wrapper not column */
#tratamentos .elementor-inner-section .elementor-column > .elementor-element-populated {
	will-change: transform;
}
#tratamentos .elementor-inner-section .elementor-column > .elementor-element-populated:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0,0,0,0.10) !important;
}

/* ---------- Icon prominence ---------- */
#tratamentos .elementor-inner-section .elementor-element-populated {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}
#tratamentos .elementor-widget-icon-box {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}
#tratamentos .elementor-widget-icon-box .elementor-icon-box-icon {
	margin: 0 auto 14px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #111111 !important;
	border-radius: 10px !important;
	padding: 8px !important;
	box-shadow: none !important;
	color: #E9A238 !important;
	width: 44px !important;
	height: 44px !important;
	flex-shrink: 0 !important;
}
#tratamentos .elementor-widget-icon-box .elementor-icon {
	width: 20px !important;
	height: 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
#tratamentos .elementor-widget-icon-box .elementor-icon i,
#tratamentos .elementor-widget-icon-box .elementor-icon svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
	margin: auto !important;
	stroke-width: 2 !important;
	fill: none !important;
	color: #E9A238 !important;
	stroke: #E9A238 !important;
}
#tratamentos .elementor-widget-text-editor {
	text-align: center !important;
	width: 100% !important;
}

/* ---------- Card link hover ---------- */
#tratamentos .elementor-widget-text-editor a {
	transition: color 0.2s ease;
}
#tratamentos .elementor-widget-text-editor a:hover {
	color: #d18f2b !important;
}

/* ---------- Clínica: imagem com altura fixa ---------- */
#clinica .elementor-widget-image img {
	width: 100%;
	height: 650px;
	object-fit: cover;
}

/* ---------- Clínica: badge sobreposto ---------- */
#clinica-badge {
	margin-top: -70px !important;
	margin-right: 18px;
	margin-left: auto;
	width: fit-content;
	position: relative;
	z-index: 3;
}

/* ---------- Galeria: crop uniforme ---------- */
#estrutura .elementor-widget-image img {
	width: 100%;
	height: 420px;
	object-fit: cover;
}

/* ---------- Mapa: borda arredondada ---------- */
#contato .elementor-widget-google_maps iframe,
#contato iframe {
	border-radius: 24px;
}

/* ---------- Footer ---------- */
#site-footer .elementor-widget-image img {
	margin: 0 auto;
}

/* ---------- Responsivo ---------- */
@media (max-width: 767px) {
	#site-header {
		position: sticky;
		top: 0;
		background: rgba(13, 13, 13, 0.96) !important;
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
	}
	#site-header > .elementor-container {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 4px 12px;
		padding: 10px 16px 12px;
	}
	#site-header > .elementor-container > .elementor-column:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
		width: auto !important;
		max-width: none !important;
	}
	#site-header > .elementor-container > .elementor-column:nth-child(2) {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100% !important;
		max-width: none !important;
		min-width: 0;
	}
	#site-header > .elementor-container > .elementor-column:nth-child(3) {
		grid-column: 2;
		grid-row: 1;
		width: auto !important;
		max-width: none !important;
	}
	#site-header .elementor-widget-image img {
		width: 112px !important;
		max-width: 100%;
		height: auto;
	}
	#site-header .elementor-widget-button,
	#site-header .elementor-widget-button .elementor-widget-container {
		width: auto;
	}
	#site-header .elementor-button {
		padding: 10px 14px !important;
		font-size: 12px !important;
		white-space: nowrap;
	}
	#site-header .elementor-widget-text-editor,
	#site-header .elementor-widget-text-editor .elementor-widget-container {
		width: 100%;
		min-width: 0;
	}
	#site-header > .elementor-container > .elementor-column:nth-child(2) > .elementor-widget-wrap {
		flex-wrap: nowrap !important;
		width: 100%;
		min-width: 0;
	}
	#site-header .elementor-widget-text-editor > div {
		justify-content: flex-start !important;
		flex-wrap: nowrap !important;
		gap: 18px !important;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 3px 2px 1px;
	}
	#site-header .elementor-widget-text-editor > div::-webkit-scrollbar {
		display: none;
	}
	#site-header .elementor-widget-text-editor a {
		flex: 0 0 auto;
		margin: 0 !important;
		font-size: 12px !important;
	}
	#hero {
		background-color: #f5f1e9 !important;
		background-image: none !important;
		color: #1a1a1a !important;
		padding-top: 0 !important;
		padding-bottom: 28px !important;
	}
	#hero > .elementor-container {
		gap: 24px !important;
	}
	#hero > .elementor-container > .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
	}
	#hero .elementor-column > .elementor-element-populated {
		padding: 20px 20px !important;
	}
	#hero .elementor-widget-heading:first-child {
		margin-bottom: 8px !important;
	}
	#hero .elementor-widget-heading:not(:first-child) {
		margin-bottom: 16px !important;
	}
	#hero .elementor-widget-heading:first-child .elementor-heading-title {
		font-size: 11px !important;
		line-height: 1.45 !important;
	}
	#hero h1.elementor-heading-title {
		font-size: 32px !important;
		line-height: 1.08 !important;
		max-width: 17ch;
	}
	#hero > .elementor-container > .elementor-column:first-child .elementor-widget-text-editor p {
		font-size: 14px !important;
		line-height: 1.45 !important;
	}
	#hero .elementor-widget-text-editor {
		margin-bottom: 16px !important;
	}
	#hero .elementor-widget-text-editor:last-child {
		margin-bottom: 0 !important;
	}
	#hero .elementor-inner-section,
	#hero .elementor-inner-section > .elementor-container {
		margin: 0 !important;
	}
	#hero .elementor-inner-section .elementor-column > .elementor-element-populated {
		padding: 0 5px !important;
	}
	#hero .elementor-inner-section.elementor-element > .elementor-container.elementor-column-gap-default {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		row-gap: 12px !important;
		column-gap: 0 !important;
	}
	#hero .elementor-inner-section.elementor-element > .elementor-container.elementor-column-gap-default > .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		flex: 0 0 auto !important;
	}
	#hero .elementor-inner-section .elementor-widget-button {
		margin: 0 !important;
	}
	#hero .elementor-inner-section .elementor-widget-button:last-child {
		margin-bottom: 0 !important;
	}
	#hero .elementor-inner-section .elementor-button {
		width: 100%;
		white-space: normal;
	}
	#hero .elementor-widget-button .elementor-button {
		min-height: 46px;
		padding: 12px 16px !important;
		font-size: 13px !important;
	}
	#hero .elementor-widget-image-carousel .swiper-slide-image {
		height: 280px;
		object-fit: cover;
	}
	#hero .elementor-widget-image-carousel {
		margin-bottom: 20px !important;
	}
	#hero-badge {
		margin-top: -34px !important;
		margin-left: 8px !important;
	}
	#hero-badge > .elementor-container > .elementor-column > .elementor-element-populated {
		padding: 12px 14px !important;
	}
	#hero-badge .elementor-widget-text-editor p {
		font-size: 13px !important;
		line-height: 1.35 !important;
	}
	#hero .elementor-widget-image-carousel .elementor-widget-container::after {
		inset: 10px;
	}
	#hero-badge {
		margin-top: -24px !important;
		margin-left: 10px;
	}
	#hero .elementor-widget-image-carousel .swiper-slide-image {
		height: 280px;
	}
	#clinica .elementor-widget-image img {
		height: 420px;
	}
	#estrutura .elementor-widget-image img {
		height: 300px;
	}
	#hero-badge {
		margin-top: -30px;
	}
	#clinica-badge {
		margin-top: -50px;
	}
}
