:root {
	--blue-950: #06182c;
	--blue-900: #08233e;
	--blue-800: #0d3155;
	--yellow: #fbbd12;
	--yellow-dark: #e5a800;
	--white: #ffffff;
	--gray-50: #f6f7f8;
	--gray-100: #e9edf1;
	--gray-600: #536171;
	--gray-900: #15283b;
	--font-heading: 'Montserrat', sans-serif;
	--font-body: 'Inter', sans-serif;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 108px;
}
body {
	font-family: var(--font-body);
	color: var(--gray-900);
	background: var(--white);
	line-height: 1.6;
}
img {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
	text-decoration: none;
}
button,
input,
select,
textarea {
	font: inherit;
}
button {
	cursor: pointer;
}
h1,
h2,
h3 {
	font-family: var(--font-heading);
	line-height: 1.2;
}
.container {
	width: min(1180px, 90%);
	margin-inline: auto;
}
.section {
	padding-block: 92px;
}
.eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--blue-800);
	margin-bottom: 18px;
}
h2 {
	font-size: clamp(30px, 3vw, 42px);
	letter-spacing: -1.3px;
}
h3 {
	font-size: 20px;
	letter-spacing: -0.4px;
}
:focus-visible {
	outline: 3px solid #dd9900;
	outline-offset: 5px;
}
.skip-link {
	position: fixed;
	top: -100px;
	left: 20px;
	z-index: 100;
	background: white;
	color: var(--blue-950);
	padding: 12px;
}
.skip-link:focus {
	top: 10px;
}
.topbar {
	background: var(--blue-950);
	color: #d2dbe4;
	font-size: 11px;
	letter-spacing: 0.4px;
}
.topbar .container {
	display: flex;
	justify-content: space-between;
	padding-block: 9px;
}
.site-header {
	background: var(--blue-900);
	color: white;
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid #ffffff12;
}
.header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 92px;
}
.brand {
	width: 176px;
	height: 76px;
	overflow: hidden;
	flex-shrink: 0;
	border-radius: 5px;
}
.brand-logo {
	width: 176px;
	height: 76px;
	object-fit: cover;
}
.main-nav {
	display: flex;
	align-items: center;
	gap: 27px;
	font-size: 13px;
	font-weight: 500;
}
.main-nav a {
	padding-block: 10px;
	color: #d9e1ea;
}
.main-nav a:hover,
.main-nav a[aria-current] {
	color: var(--yellow);
}
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	min-height: 52px;
	padding: 14px 23px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-size: 13px;
	font-weight: 700;
	transition:
		background 0.2s,
		transform 0.2s;
}
.button:hover {
	transform: translateY(-2px);
}
.button-primary {
	background: var(--yellow);
	color: var(--blue-950);
}
.button-primary:hover {
	background: var(--yellow-dark);
}
.button-outline {
	border-color: #ffffff70;
	color: white;
	background: #08233e30;
}
.button-outline:hover {
	background: #ffffff15;
}
.header-cta {
	min-height: 44px;
	font-size: 12px;
}
.hero {
	position: relative;
	min-height: 610px;
	display: flex;
	align-items: center;
	background-color: var(--blue-900);
	background-image:
		linear-gradient(90deg, #06182cf7 0%, #06182ce8 35%, #06182c70 65%, #06182c0d 100%),
		url('/assets/images/hero-redes-web.webp');
	background-size: cover;
	background-position: center;
	color: white;
}
.hero-content {
	position: relative;
	padding-block: 76px;
}
.hero-text {
	max-width: 640px;
}
.hero .eyebrow {
	color: var(--yellow);
	font-size: 10px;
}
.hero h1 {
	font-size: clamp(44px, 4.5vw, 64px);
	line-height: 1.08;
	letter-spacing: -2.2px;
	font-weight: 800;
}
.hero h1 span {
	color: var(--yellow);
}
.hero-description {
	max-width: 490px;
	font-size: 16px;
	line-height: 1.8;
	color: #d5dfe9;
	margin: 27px 0 30px;
}
.hero-actions {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
}
.hero-note {
	margin-top: 26px;
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 12px;
	color: #c8d6e4;
}
.hero-note img {
	filter: brightness(0) invert(1);
	opacity: 0.8;
}
.hero-caption {
	position: absolute;
	right: 0;
	bottom: 35px;
	font-size: 12px;
	padding: 15px 20px;
	background: #06182cb8;
	border: 1px solid #ffffff30;
	border-radius: 6px;
	backdrop-filter: blur(10px);
}
.caption-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	background: var(--yellow);
	border-radius: 50%;
	margin-right: 8px;
}
.hero-caption small {
	display: block;
	color: #c8d6e4;
	font-size: 9px;
	margin-left: 18px;
}
.trust-bar {
	border-bottom: 1px solid var(--gray-100);
}
.trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.trust-item {
	display: flex;
	gap: 17px;
	align-items: center;
	padding: 28px 22px;
	border-right: 1px solid var(--gray-100);
}
.trust-item:first-child {
	padding-left: 0;
}
.trust-item:last-child {
	border: 0;
}
.icon-box {
	flex-shrink: 0;
	padding: 12px;
	background: #f8f1dc;
	border-radius: 8px;
}
.trust-item strong {
	display: block;
	font-size: 13px;
	margin-bottom: 4px;
}
.trust-item p {
	font-size: 11px;
	color: var(--gray-600);
}
.section-heading {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 45px;
	margin-bottom: 40px;
}
.section-heading > p {
	max-width: 350px;
	color: var(--gray-600);
	font-size: 14px;
}
.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 23px;
}
.service-card {
	border: 1px solid var(--gray-100);
	border-radius: 9px;
	overflow: hidden;
	transition: box-shadow 0.2s;
	background: white;
}
.service-card:hover {
	box-shadow: 0 15px 35px #08233e0e;
}
.service-visual {
	position: relative;
	height: 224px;
	overflow: hidden;
	background: #dbe4ea;
}
.service-visual > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.scene-window > img {
	object-position: 15% center;
	transform: scale(1.2);
}
.scene-balcony > img {
	object-position: right center;
}
.service-visual > span {
	position: absolute;
	left: 16px;
	bottom: 16px;
	color: white;
	background: #06182cd9;
	padding: 5px 10px;
	border-radius: 3px;
	font-size: 9px;
	letter-spacing: 1.2px;
}
.pet-visual {
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 75% 15%, #28597c, #08233e);
}
.pet-visual > img {
	width: 86px;
	height: 86px;
	filter: brightness(0) invert(1);
	opacity: 0.8;
}
.card-content {
	padding: 27px;
}
.card-content h3 {
	font-size: 18px;
	margin-bottom: 14px;
}
.card-content p {
	font-size: 13px;
	color: var(--gray-600);
	min-height: 85px;
}
.card-content a {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var(--gray-100);
	padding-top: 18px;
	margin-top: 20px;
	font-size: 12px;
	font-weight: 700;
}
.card-content a:hover,
.text-link:hover {
	color: #8b6500;
}
.image-note {
	font-size: 10px;
	color: var(--gray-600);
	margin-top: 16px;
}
.advantages {
	background: var(--blue-950);
	color: white;
}
.advantage-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 90px;
}
.advantages .eyebrow {
	color: var(--yellow);
}
.advantages h2 span {
	color: var(--yellow);
}
.advantage-intro > p:not(.eyebrow) {
	font-size: 14px;
	color: #b9cbdc;
	margin: 25px 0;
	max-width: 400px;
}
.text-link {
	font-size: 12px;
	font-weight: 600;
	color: var(--yellow);
}
.benefit-list article {
	display: flex;
	gap: 22px;
	padding: 23px 0;
	border-bottom: 1px solid #ffffff18;
}
.benefit-list article:first-child {
	padding-top: 0;
}
.benefit-list article:last-child {
	border: 0;
}
.benefit-list article > span {
	color: var(--yellow);
	font-size: 12px;
	padding-top: 2px;
}
.benefit-list h3 {
	font-size: 17px;
	margin-bottom: 10px;
}
.benefit-list p {
	font-size: 13px;
	color: #b9cbdc;
}
.gallery-grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 22px;
}
.gallery-main {
	position: relative;
	border-radius: 9px;
	overflow: hidden;
}
.gallery-main > img {
	width: 100%;
	height: 490px;
	object-fit: cover;
}
.gallery-main figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 60px 28px 25px;
	background: linear-gradient(transparent, #06182ce6);
	color: white;
}
.gallery-main figcaption span {
	display: block;
	font-size: 17px;
	font-weight: 600;
}
.gallery-main figcaption small {
	font-size: 10px;
	color: #c8d6e4;
}
.gallery-side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 22px;
}
.gallery-detail {
	position: relative;
	overflow: hidden;
	border-radius: 9px;
}
.gallery-detail img {
	width: 100%;
	height: 234px;
	object-fit: cover;
	transform: scale(1.6);
	object-position: right;
}
.gallery-detail > span {
	position: absolute;
	bottom: 14px;
	left: 20px;
	font-size: 12px;
	background: #06182ce0;
	color: white;
	padding: 5px 12px;
	border-radius: 4px;
}
.gallery-message {
	padding: 25px 30px;
	border-radius: 9px;
	background: #f5edda;
}
.gallery-message h3 {
	font-size: 26px;
	margin: 12px 0;
}
.gallery-message a {
	font-size: 11px;
	font-weight: 700;
}
.contact {
	background: var(--blue-900);
	color: white;
}
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 80px;
	align-items: center;
}
.contact .eyebrow {
	color: var(--yellow);
}
.contact-grid > div > p:not(.eyebrow) {
	margin-block: 25px;
	color: #c8d6e4;
	font-size: 14px;
	max-width: 360px;
}
.contact-phone {
	font-size: 27px;
	font-weight: 600;
	display: block;
	color: var(--yellow);
	margin-top: 35px;
}
.contact-location {
	font-size: 12px;
	color: #c8d6e4;
}
.quote-form {
	border-radius: 12px;
	background: white;
	color: var(--gray-900);
	padding: 35px;
}
.quote-form > p {
	font-size: 12px;
	color: var(--gray-600);
	margin: 10px 0 23px;
}
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}
label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	margin-bottom: 17px;
}
label > span {
	font-weight: 400;
	color: var(--gray-600);
}
input,
select,
textarea {
	display: block;
	width: 100%;
	padding: 12px;
	margin-top: 7px;
	border: 1px solid #dce2e8;
	border-radius: 5px;
	background: #fafbfc;
	font-size: 12px;
	color: var(--gray-900);
}
textarea {
	resize: vertical;
	min-height: 82px;
}
.quote-form button {
	width: 100%;
}
.quote-form .form-note {
	font-size: 10px;
	text-align: center;
	line-height: 1.6;
	margin: 13px 0 0;
}
.faq-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 80px;
}
details {
	border-bottom: 1px solid var(--gray-100);
}
summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	padding: 21px 0;
}
details p {
	padding-bottom: 22px;
	color: var(--gray-600);
	font-size: 13px;
}
.site-footer {
	background: var(--blue-950);
	color: #b9cbdc;
	padding-top: 55px;
}
.footer-content {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 45px;
	padding-bottom: 45px;
}
.footer-content strong {
	font-size: 29px;
	color: white;
	font-family: var(--font-heading);
	letter-spacing: 2px;
}
.footer-content strong > span {
	display: block;
	font-size: 8px;
	font-weight: 500;
	letter-spacing: 3px;
	color: var(--yellow);
}
.footer-content p {
	margin-top: 16px;
	font-size: 11px;
}
.footer-content nav,
.footer-contact {
	display: flex;
	flex-direction: column;
	gap: 13px;
	font-size: 12px;
}
.site-footer a:hover {
	color: var(--yellow);
}
.footer-bottom {
	display: flex;
	justify-content: space-between;
	padding-block: 20px;
	border-top: 1px solid #ffffff15;
	font-size: 9px;
}
/* Base fluida para telas menores; a versão mobile pode ser refinada depois da apresentação. */
@media (max-width: 1100px) {
	.main-nav {
		gap: 15px;
		font-size: 12px;
	}
	.header-content {
		gap: 18px;
	}
	.hero-caption {
		right: 0;
		bottom: 15px;
	}
	.contact-grid,
	.advantage-grid {
		gap: 40px;
	}
}
@media (max-width: 800px) {
	.main-nav {
		display: none;
	}
	.section {
		padding-block: 55px;
	}
	.hero h1 {
		font-size: 44px;
	}
	.hero-caption {
		display: none;
	}
	.trust-grid,
	.service-grid {
		grid-template-columns: 1fr;
	}
	.trust-item {
		padding: 20px 0;
		border-right: 0;
		border-bottom: 1px solid var(--gray-100);
	}
	.section-heading {
		display: block;
	}
	.section-heading > p {
		margin-top: 20px;
	}
	.advantage-grid,
	.contact-grid,
	.faq-grid,
	.gallery-grid {
		grid-template-columns: 1fr;
		gap: 35px;
	}
	.gallery-main > img {
		height: 350px;
	}
	.footer-content {
		grid-template-columns: 1fr 1fr;
	}
	.footer-content > div:first-child {
		grid-column: 1 / -1;
	}
	.footer-bottom {
		gap: 20px;
	}
	.card-content p {
		min-height: auto;
	}
}
@media (max-width: 460px) {
	.topbar .container > span {
		display: none;
	}
	.header-cta {
		padding: 10px;
		font-size: 10px;
	}
	.brand,
	.brand-logo {
		width: 140px;
		height: 64px;
	}
	.hero h1 {
		font-size: 36px;
	}
	.hero-actions .button {
		width: 100%;
	}
	.quote-form {
		padding: 24px;
	}
	.form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}