/* Shared variables, reset, typography, navigation, and buttons. */

:root {
	--white: #ffffff;
	--paper: #fffaf0;
	--surface-soft: #fffdf8;
	--surface-tint: #f7fcf8;
	--pastel-butter: #fff0b8;
	--pastel-mint: #dff5e8;
	--pastel-peach: #ffe2d3;
	--pastel-lavender: #eee5f6;
	--pastel-line: rgba(91, 80, 67, 0.12);
	--wash: var(--pastel-mint);
	--mist: var(--pastel-peach);
	--primary: #d94a38;
	--primary-soft: #ffe2dc;
	--sunshine: #ffd166;
	--sunshine-soft: var(--pastel-butter);
	--sky: #6ec6e8;
	--sky-soft: var(--pastel-lavender);
	--mint: #7eddbb;
	--mint-soft: var(--pastel-mint);
	--lavender: #cdb4db;
	--lavender-soft: var(--pastel-lavender);
	--peach: #ffb38a;
	--peach-soft: var(--pastel-peach);
	--ink: #253238;
	--muted: #68777a;
	--line: rgba(37, 50, 56, 0.12);
	--line-strong: rgba(37, 50, 56, 0.2);
	--shadow: 0 18px 44px rgba(37, 50, 56, 0.11);
	--soft-shadow: 0 8px 26px rgba(37, 50, 56, 0.07);
	--radius-card: 24px;
	--radius-button: 999px;
	--sage: var(--primary);
	--sage-dark: var(--ink);
	--rose: var(--primary);
	--clay: #b76643;
	--gold: var(--sunshine);
	--petal: var(--primary-soft);
	--sun: var(--sunshine-soft);
	--whatsapp: #1fae62;
	--max: 1160px;
}

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--ink);
	background:
		linear-gradient(
			180deg,
			var(--paper) 0%,
			var(--surface-soft) 30%,
			var(--surface-tint) 55%,
			var(--surface-soft) 78%,
			var(--paper) 100%
		);
	background-attachment: fixed;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.65;
}

body.nav-open {
overflow: hidden;
}

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

button,
a {
-webkit-tap-highlight-color: transparent;
}

img {
display: block;
	max-width: 100%;
}

.skip-link {
position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 10px 14px;
	color: #fff;
	background: var(--ink);
	border-radius: var(--radius-button);
	transform: translateY(-150%);
	transition: transform 0.2s ease;
}

.skip-link:focus {
transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
outline: 3px solid rgba(217, 74, 56, 0.32);
	outline-offset: 3px;
}

.announcement-bar {
position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 12px;
	align-items: center;
	padding: 8px 16px;
	color: #fff;
	background: linear-gradient(90deg, #153f35 0%, #1d5143 50%, #153f35 100%);
	border-bottom: 3px solid var(--primary);
	box-shadow: 0 5px 16px rgba(21, 63, 53, 0.18);
	font-size: 13px;
	font-weight: 800;
	text-align: center;
}

.announcement-bar[hidden] {
display: none;
}

.announcement-bar a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 1px 10px;
	color: #fff;
	background: var(--primary);
	border-radius: var(--radius-button);
	text-decoration: none;
}

.site-header {
position: fixed;
	top: 0;
	left: 50%;
	z-index: 50;
	width: 100%;
	min-height: 94px;
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 12px max(18px, calc((100% - var(--max)) / 2));
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid rgba(217, 74, 56, 0.12);
	box-shadow: 0 10px 28px rgba(37, 50, 56, 0.08);
	transform: translateX(-50%);
}

html.has-announcement .site-header {
top: 36px;
}

html.has-announcement .page-hero {
padding-top: 178px;
}

.brand {
display: flex;
	align-items: center;
	gap: 12px;
	min-width: max-content;
	padding-right: 16px;
	border-right: 1px solid var(--line);
}

.brand > span {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 70px;
	padding-top: 1px;
}

.brand img {
	width: 70px;
	height: 70px;
	flex: 0 0 70px;
	object-fit: contain;
}

.brand strong,
.brand small {
display: block;
}

.brand strong {
color: var(--sage-dark);
	font-size: 16px;
	line-height: 1.15;
}

.brand small {
	margin-top: 3px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.25;
}

.nav-links {
display: flex;
	justify-content: center;
	gap: 8px;
	flex: 1;
	color: #435252;
	font-size: 14px;
	font-weight: 800;
}

.nav-links a {
padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: var(--radius-button);
}

.nav-links a:hover {
color: var(--primary);
	background: var(--sunshine-soft);
	border-color: rgba(217, 74, 56, 0.12);
}

.nav-links a[aria-current="page"] {
color: var(--primary);
	background: var(--primary-soft);
	border-color: rgba(217, 74, 56, 0.18);
}

.menu-toggle {
display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 16px;
}

.menu-toggle span {
display: block;
	width: 18px;
	height: 2px;
	margin: 4px auto;
	background: var(--ink);
	border-radius: 999px;
}

.nav-cta,
.button {
display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 20px;
	border-radius: var(--radius-button);
	font-weight: 900;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button.primary {
color: #fff;
	background: var(--primary);
	box-shadow: 0 14px 28px rgba(217, 74, 56, 0.24);
}

.nav-cta {
color: #fff;
	background: var(--whatsapp);
	box-shadow: 0 12px 26px rgba(31, 174, 98, 0.2);
}

.button.secondary {
color: var(--ink);
	background: rgba(255, 244, 191, 0.96);
	border: 1px solid rgba(255, 209, 102, 0.42);
}

.button.light {
color: var(--sage-dark);
	background: var(--white);
}

.nav-cta:hover,
.button:hover {
transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(31, 45, 45, 0.16);
}