:root {
	--ink: #172431;
	--muted: #5c6d7c;
	--azul: #9dc6ff;
	--azul-suave: #f1f7ff;
	--azul-profundo: #31577a;
	--Lavanda: #e8f0fa;
	--branco: #ffffff;
	--linha: rgba(23, 36, 49, .14);
	--serif: "Playfair Display", Georgia, serif;
	--sans: "DM Sans", Arial, sans-serif;
	--space: clamp(4rem, 9vw, 8rem);
}

/* ------------ Reset e estilos gerais ------------ */

* { 
	box-sizing: border-box; 
}

html { 
	scroll-behavior: smooth; 
 }

body { 
		margin: 0; 
		color: var(--ink);	
		background: var(--branco); 
		font-family: var(--sans); 
		line-height: 1.6; 
}

body, button, a { 
	font-size: 1rem; 
}

a { 
	color: inherit; 
	text-decoration: none; 
}

img { 	
	display: block; 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
}

button { 
	color: inherit; 
	font: inherit; 
}

:focus-visible { 
	outline: 3px solid var(--azul-profundo); 
	outline-offset: 4px; 
}

.skip-link { 
	position: absolute; 
	left: 1rem; 
	top: -4rem; z-index: 20; 
	padding: .7rem 1rem; 
	color: var(--branco); 
	background: var(--ink); 
}

.skip-link:focus { 
	top: 1rem; 
}

.container { 
	width: min(1160px, calc(100% - 2.5rem)); 
	margin: 0 auto; }

.eyebrow { margin: 0 0 1rem; 
	color: var(--azul-profundo); 
	font-size: .72rem; 
	font-weight: 600; 
	letter-spacing: .16em; 
	text-transform: uppercase; }

h1, h2, h3, p { 
	margin-top: 0;
}

h1, h2, h3 { 
	font-family: var(--serif); 
	font-weight: 500; 
	line-height: 1.1; 
}

h1 { 
	margin-bottom: 1.5rem; 
	font-size: clamp(3.5rem, 8vw, 7rem); 
	letter-spacing: -.04em; 
}

h2 { 
	margin-bottom: 1.4rem; 
	font-size: clamp(2.5rem, 5vw, 4.5rem); 
	letter-spacing: -.035em; 
}

h3 { 
	margin-bottom: .55rem; 
	font-size: 1.55rem; 
}

.lede { max-width: 31rem; 
	color: var(--muted); 
	font-size: 1.08rem; 
}

.button { 
	display: inline-flex; 
	align-items: center; 
	gap: .75rem; 
	min-height: 3.1rem; 
	padding: .8rem 1.25rem; 
	border: 1px solid var(--ink); 
	transition: transform .25s ease, background .25s ease, color .25s ease; 
}

.button::after { content: "↗"; 
	font-size: 1.15rem; 
}

.button:hover { color: var(--branco); 
	background: var(--ink); 
	transform: translateY(-3px); 
}

.button--light { 
	border-color: var(--branco); 
	color: var(--branco); 
}

.button--light:hover { 
	color: var(--ink); 
	background: var(--branco); 
}

/* ------------ Cabeçalho e navegação ------------ */

.site-header { 
	position: sticky; 
	top: 0; z-index: 10; 
	border-bottom: 1px solid var(--linha); 
	background: rgba(255, 255, 255, .92); 
	backdrop-filter: blur(14px); 
}

.header-inner { display: flex; 
	align-items: center; 
	justify-content: space-between; 
	min-height: 5.2rem; 
}

.brand { display: flex; 
	align-items: center; 
	gap: .75rem; 
	font-family: var(--serif); 
	font-size: 1.35rem;
}

.brand-mark { 
	display: grid; 
	place-items: center; 
	width: 2.25rem; 
	height: 2.25rem; 
	border-radius: 50%; 
	background: var(--azul); 
	font-family: var(--sans); 
	font-size: .75rem; 
	font-weight: 300; 
}

.nav-list { 
	display: flex; 
	gap: clamp(1rem, 2.8vw, 2.4rem); 
	margin: 0; 
	padding: 0; 
	list-style: none; 
}

.nav-link { 
	position: relative; 
	color: var(--muted); 
	font-size: 1.2rem; 
}

.nav-link::after { 
	position: absolute; 
	right: 0; 
	bottom: -.5rem; 
	left: 0; 
	height: 1px; 
	background: var(--ink); 
	content: ""; 
	transform: scaleX(0);
	transition: transform .2s ease; 
}

.nav-link:hover, .nav-link[aria-current="page"] { 
	color: var(--ink); 
}

.nav-link:hover::after, .nav-link[aria-current="page"]::after { 
	transform: scaleX(1); 
}

.menu-toggle { 
	display: none; 
	border: 0; 
	background: transparent; 
	cursor: pointer; 
}

/* ------------ Seção Principal / Hero ------------ */
.hero { 
	min-height: calc(100vh - 5.2rem); 
	padding: clamp(3rem, 8vw, 7rem) 0 var(--space); 
	background: linear-gradient(120deg, var(--branco) 0 56%, var(--azul) 56%); 
	margin-top: -70px;
}

.hero-grid { 
	display: grid; 
	grid-template-columns: .9fr 1.1fr; 
	align-items: center; 
	gap: clamp(2rem, 7vw, 7rem); 
}

.hero-copy { 
	padding-left: clamp(0rem, 3vw, 3rem); 
}

.hero-copy h1 { 
	transform: translateY(-20px); 
}

.hero-copy h1 em { 
	color: #8FA86B; 
	font-style: normal; 
	text-decoration: underline; 
	text-decoration-color: #8FA86B; 
	text-decoration-thickness: 4px; 
}

.hero-actions { 
	display: flex; 
	align-items: center; 
	flex-wrap: wrap; 
	gap: 1.5rem; 
	margin-top: 2.3rem; 
}

.text-link { 
	border-bottom: 1px solid var(--ink); 
	font-size: 1.2rem; 
}

.text-link:hover { 
	font-size: 1.3rem; 
	transition: font-size .2s ease; 
}

.hero-visual { 
	position: relative; 
	min-height: min(68vh, 600px); 
}

.hero-photo { 
	position: absolute; 
	top: 0; 
	right: 10%; 
	width: 80%; 
	height: 90%; 
	overflow: hidden; 
	background: var(--Lavanda); 
}

.photo-placeholder::before { 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	color: var(--azul-profundo); 
	font-family: var(--serif); 
	font-size: 1.3rem; 
	transform: translate(-50%, -50%); 
}

.photo-placeholder img { 
	display: block; 
}

.hero-note { 
	position: absolute; 
	right: 0; 
	bottom: 5%; 
	z-index: 1; 
	width: 44%; 
	padding: 1.4rem; 
	background: var(--ink); 
	color: var(--branco); 
}

.hero-note strong { 
	display: block; 
	margin-bottom: .4rem; 
	font-family: var(--serif); 
	font-size: 1.55rem; 
	font-weight: 400; 
}

.hero-note span { 
	color: var(--azul); 
	font-size: .78rem; 
}

/* ------------ Estrutura padrão das seções ------------ */
section { 
	padding: var(--space) 0; 
}

.section-heading { 
	display: flex; 
	align-items: end; 
	justify-content: space-between; 
	gap: 2rem; 
	margin-bottom: 3.5rem; 
}

.section-heading .lede { 
	margin-bottom: .4rem; 
}
.about { 
	background: var(--azul); 
}
.about-grid { 
	display: grid; 
	grid-template-columns: .85fr 1.15fr; 
	gap: clamp(3rem, 9vw, 9rem); 
	align-items: center; 
}

.about-seal { 
	display: grid; 
	place-items: center; 
	width: min(28vw, 17rem); 
	aspect-ratio: 1; 
	margin: auto; 
}

.about-seal img { 
	width: 170%; 
	height: 100%; 
	object-fit: contain; 
	mix-blend-mode: multiply; 
}

.about-copy p { 
	font-size: 18px;
	max-width: 38rem; 
	color: #294b6a; 
}

.signature { display: block; 
	margin-top: 2rem; 
	font-family: var(--serif); 
	font-size: 1.6rem; 
}

/* ------------ Seção de serviços e galeria ------------ */
.services-grid { 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	gap: 1.25rem; 
}

.service-card { 
	border-top: 1px solid var(--ink); 
}

.service-image { 
	position: relative; 
	height: clamp(16rem, 31vw, 25rem); 
	overflow: hidden; 
	background: var(--Lavanda); 
}

.service-image--two { 
	background: var(--azul); 
}

.service-image--three { 
	background: #dceafa; 
}

.service-image::after { 
	position: absolute; 
	right: 1rem; 
	bottom: 1rem; 
	padding: .35rem .55rem; 
	background: rgba(255, 255, 255, .8); 
	color: var(--ink); 
	font-size: .7rem; 
	letter-spacing: .06em; 
	text-transform: uppercase; 
}

.service-image img[src=""] { 
	display: none; 
}

.service-info { 
	display: flex; 
	align-items: baseline; 
	justify-content: space-between; 
	gap: 1rem; 
	padding: 1.3rem 0; 
}
.service-info p { 
	margin: 0; 
	color: var(--muted); 
	font-size: .87rem; 
}

.service-number { 
	color: var(--azul-profundo); 
	font-size: .75rem; 
}

.instagram-strip { 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	gap: 1rem; 
	margin-top: 3rem; 
	padding: 1.4rem 0; 
	border-top: 1px solid var(--line); 
	border-bottom: 1px solid var(--linha); 
}

.instagram-strip p { 
	margin: 0; 
	color: var(--muted); 
	font-size: 1.5rem;
}

.instagram-strip a {
	font-size: 1.5rem;
}

/* ------------ Seção de localização e mapa ------------ */

.location { 
	background: var(--ink); 
	color: var(--branco); 
}

.location-grid { 
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	gap: clamp(2rem, 8vw, 8rem); 
	align-items: center; 
}

.location .eyebrow { 
	color: var(--azul); 
}

.location .lede { 
	color: #c3d1df; 
}

.location-info { 
	display: grid; 
	gap: 1.4rem; 
	margin-top: 2rem; 
}

.location-line { 
	padding-top: 1rem; 
	border-top: 1px solid rgba(255, 255, 255, .2); 
}

.location-line small { 
	display: block; 
	margin-bottom: .25rem; 
	color: var(--azul); 
	text-transform: uppercase; 
	letter-spacing: .1em; 
	font-size: .68rem; 
}

.map-placeholder { 
	position: relative; 
	min-height: 23rem; 
	overflow: hidden; 
	border: 8px solid var(--ink); 
	background: var(--Lavanda); 
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); 
}

.map-placeholder iframe { 
	display: block; 
	width: 100%; 
	height: 100%; 
	min-height: 23rem; 
	border: 0; 
}

.map-link { 
	position: absolute; 
	right: 1rem; 
	bottom: 1rem; 
	padding: .65rem .85rem; 
	background: var(--ink); 
	color: var(--branco); 
	font-family: var(--sans); 
	font-size: .78rem; 
	transition: background .25s ease, transform .25s ease; 
}
.map-link:hover { 
	background: var(--azul-profundo); 
	transform: translateY(-3px); 
}

/* ------------ Depoimentos e dúvidas frequentes ------------ */
.testimonial-grid { 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	gap: 1rem; 
}
.testimonial { 
	padding: 1.5rem; 
	background: var(--azul-suave); 
}

.testimonial blockquote { 
	margin: 0 0 1.6rem; 
	font-family: var(--serif); 
	font-size: 1.35rem; 
	line-height: 1.35; 
}

.testimonial cite { 
	color: var(--muted); 
	font-size: .78rem; 
	font-style: normal; 
}

.provisional { 
	color: var(--azul-profundo); 
	font-size: .68rem; 
	letter-spacing: .09em; 
	text-transform: uppercase; 
}

.faq { 
	background: var(--Lavanda); 
}

.faq-list { 
	max-width: 48rem; 
	margin: 0 auto; 
	border-top: 1px solid var(--ink); 
}

details { 
	border-bottom: 1px solid var(--linha); 
}

summary { 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	gap: 1rem; 
	padding: 1.35rem 0; 
	cursor: pointer; 
	font-family: var(--serif); 
	font-size: 1.25rem; 
	list-style: none; 
}

summary::-webkit-details-marker { 
	display: none; 
}

summary::after { 
content: "+"; 
font-family: var(--sans); 
font-size: 1.5rem; 
font-weight: 400; 
}

details[open] summary::after { 
	content: "−"; 
}

details p { 
	max-width: 38rem; 
	margin-bottom: 1.4rem; 
	color: var(--muted); 
}

/* ------------ Agendamento, rodapé e botão flutuante ------------ */
.booking { 
	padding: clamp(5rem, 11vw, 10rem) 0; 
	background: var(--azul); 
}

.booking-inner { 
	display: grid; 
	grid-template-columns: 1fr auto; 
	align-items: center; 
	gap: 2rem; 
}

.booking .eyebrow { 
	font-size: .90rem; 
}

.booking h2 { 
max-width: 35rem; 
margin-bottom: 1rem;
}

.booking-copy { 
	max-width: 28rem; 
	color: #294b6a; 
	font-size: 1.15rem; 
}

.booking .button { 
	padding: 1rem 1.5rem; 
	border: 2px solid var(--ink); 
	background: var(--ink); 
	color: var(--branco); 
	box-shadow: 0 12px 24px rgba(23, 36, 49, .2); 
	font-weight: 600; 
}

.booking .button:hover { 
	background: var(--azul-profundo); 
	border-color: var(--azul-profundo); 
	box-shadow: 0 16px 28px rgba(23, 36, 49, .26); 
	transform: translateY(-5px); 
}

.booking .button--whatsapp { 
	padding: 1.2rem 2rem; 
	gap: 1rem; 
	border: none; 
	background: linear-gradient(135deg, #25d366 0%, #20ba58 100%); 
	box-shadow: 0 12px 32px rgba(37, 211, 102, .35); 
	font-size: 1.1rem; 
	animation: pulse-glow 2.5s ease-in-out infinite; 
}

.booking .button--whatsapp:hover { 
	background: linear-gradient(135deg, #20ba58 0%, #1aa850 100%); 
	box-shadow: 0 20px 40px rgba(37, 211, 102, .45); 
	transform: translateY(-6px) scale(1.05); 
	animation: none; 
}

.booking .button--whatsapp svg { 
	width: 22px; 
	height: 22px; 
}

@keyframes pulse-glow { 
	0%, 100% { box-shadow: 0 12px 32px rgba(37, 211, 102, .35); } 
	50% { box-shadow: 0 12px 48px rgba(37, 211, 102, .55); } 
}

.site-footer { 
	padding: 1.7rem 0; 
	background: var(--ink); 
	color: var(--branco); 
}

.footer-inner { 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	gap: 1rem; 
}

.footer-inner small { 
	font-weight: 800;
	color: #c3d1df; 
}

.whatsapp-float { 
	position: fixed; 
	right: 1.25rem; 
	bottom: 1.25rem; 
	z-index: 9; 
	display: grid; 
	place-items: center; 
	width: 3.3rem; 
	height: 3.3rem; 
	border: 1px solid var(--branco); 
	border-radius: 50%; 
	background: #608d72; 
	color: var(--branco); 
	box-shadow: 0 8px 22px rgba(17, 21, 23, .18); 
	font-weight: 600; 
	transition: transform .2s ease; 
}
.whatsapp-float:hover { 
	transform: translateY(-4px) rotate(-5deg); 
}

.reveal { 
	opacity: 0; 
	transform: translateY(18px); 
	transition: opacity .7s ease, transform .7s ease; 
}

.reveal.is-visible { 
	opacity: 1; 
	transform: none; 
}

/* ------------ Responsividade para telas menores ------------ */
@media (max-width: 870px) {
	.container { 
		width: min(100% - 2rem, 560px); 
	}

	.header-inner { 
		min-height: 4.5rem; 
	}

	.menu-toggle { 
		display: block; 
		padding: .4rem; 
		font-size: 0; 
	}

	.menu-toggle::before { 
		content: "☰"; 
		font-size: 1.5rem; 
	}

	.menu-toggle[aria-expanded="true"]::before { 
		content: "×"; 
	}

	.nav-list { 
		position: absolute; 
		top: 4.5rem; 
		right: 0; 
		left: 0; 
		display: none; 
		padding: 1rem 2rem 1.5rem; 
		border-bottom: 1px solid var(--); 
		background: var(--branco); 
		}

	.nav-list.is-open { 
		display: grid; 
		gap: 1rem; 
		}

	.hero { 
		min-height: auto; 
		margin-top: -50px;
		padding-top: 4rem; 
		background: var(--branco); 
	}
	.hero-grid, .about-grid, .location-grid, .booking-inner { 
		grid-template-columns: 1fr; 
	}
	.hero-copy { 
		padding: 0; 
		margin: 0;
	}

	.hero-visual { 
		min-height: 30rem; 
		margin-top: 1rem; 
	}

	.hero-photo { 
		right: 7%; 
		width: 78%; 
		height: 88%; 
	}

	.hero-note { 
		width: 52%; 
	}

	.section-heading { 
		display: block; 
		margin-bottom: 2.2rem; 
	}

	.section-heading .lede { 
		margin-top: 1rem; 
	}
	.about-seal { 
		width: min(50vw, 14rem); 
		margin-bottom: 1rem; 
	}
	.services-grid, .testimonial-grid { 
		grid-template-columns: 1fr; 
		gap: 2.5rem; 
	}
	.service-image { 
		height: 22rem;
	}
	.instagram-strip, .footer-inner { 
		align-items: flex-start; 
		flex-direction: column; 
	}
	.map-placeholder, .map-placeholder iframe { 
		min-height: 17rem; 
	}
	.booking .button { 
		justify-self: start; 
	}
}

/* ------------ Remove as animações para usuários que preferem menos movimento. ------------ */
@media (prefers-reduced-motion: reduce) {
	html { 
		scroll-behavior: auto; 
	}
	*, *::before, *::after { 
		transition-duration: .01ms !important; 
		animation-duration: .01ms !important; 
	}
	.reveal { 
		opacity: 1; 
		transform: none; 
	}
}