/* =========================================================================
   Via Norte Hotel — folha única do tema.

   Ordem: tokens → base → utilidades → cabeçalho → topo → seções → rodapé.
   Sem framework e sem build: o que está aqui é o que chega ao navegador.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
	/* As quatro cores saíram da própria logo, amostradas pixel a pixel:
	   azul #284B8C, verde #00A859, vermelho #BC2E31 e amarelo #FFCC29.
	   O azul-marinho é a base do site; o verde é do botão de reservar, e só
	   dele, para o olho saber onde clicar; o amarelo do sol vira o acento.

	   A identidade é a da própria estrada: o hotel vive da BR-153, então o
	   sistema visual vem da sinalização rodoviária — o verde-placa da lista
	   de distâncias, a faixa amarela tracejada da pista como motivo, e os
	   neutros aquecidos para a cor de poeira e sol do cerrado, no lugar do
	   cinza azulado de escritório. */
	--vn-escuro:        #14294F;
	--vn-azul:          #284B8C;
	--vn-azul-claro:    #3A63AB;
	--vn-verde:         #00A859;
	--vn-verde-forte:   #00773E;
	--vn-placa:         #00713D; /* verde da placa de distâncias, um tom mais fundo que o CTA */
	--vn-amarelo:       #FFC526;
	--vn-vermelho:      #BC2E31;

	--vn-areia:         #F8F5EE;
	--vn-areia-escura:  #ECE6D8;
	--vn-branco:        #FFFFFF;

	--vn-tinta:         #1B2433;
	--vn-tinta-suave:   #5D6371;
	--vn-linha:         #E0DCD0;

	--vn-erro:          #BC2E31;
	--vn-ok:            #00773E;

	/* Overpass descende da Highway Gothic, a letra das placas de rodovia.
	   A Mono é a variante de marco quilométrico: km, preço e etiqueta. */
	--vn-display: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vn-corpo: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vn-mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--vn-container: 1200px;
	--vn-raio: 14px;
	--vn-raio-p: 8px;

	--vn-sombra: 0 2px 8px rgba(20, 41, 79, .06), 0 12px 32px rgba(20, 41, 79, .10);
	--vn-sombra-alta: 0 4px 16px rgba(20, 41, 79, .12), 0 24px 60px rgba(20, 41, 79, .18);

	--vn-transicao: 200ms cubic-bezier(.2, .7, .3, 1);
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--vn-corpo);
	font-size: 17px;
	line-height: 1.65;
	color: var(--vn-tinta);
	background: var(--vn-branco);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--vn-azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--vn-azul-claro); }

h1, h2, h3, h4 {
	font-family: var(--vn-display);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
	color: var(--vn-escuro);
}

h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

p { margin: 0 0 1em; }

ul, ol { padding-left: 1.2em; }

:focus-visible {
	outline: 3px solid var(--vn-verde-forte);
	outline-offset: 2px;
	border-radius: 4px;
}

.vn-pular {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--vn-escuro);
	color: #fff;
	padding: 12px 20px;
	z-index: 999;
}
.vn-pular:focus { left: 8px; top: 8px; }

.vn-oculto {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   3. Utilidades
   ------------------------------------------------------------------------- */
.vn-container {
	width: min(100% - 40px, var(--vn-container));
	margin-inline: auto;
}

.vn-secao { padding: clamp(56px, 9vw, 104px) 0; }
.vn-secao--areia { background: var(--vn-areia); }
.vn-secao--escura { background: var(--vn-escuro); color: rgba(255, 255, 255, .88); }
.vn-secao--escura h2,
.vn-secao--escura h3 { color: #fff; }

.vn-secao__cabeca { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.vn-secao__cabeca--centro { margin-inline: auto; text-align: center; }

/* A etiqueta de seção é um marco de estrada: mono de placa, e um traço da
   faixa amarela central antes do texto. */
.vn-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--vn-mono);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vn-tinta-suave);
	margin-bottom: 14px;
}
.vn-etiqueta::before {
	content: "";
	flex: none;
	width: 22px;
	height: 3px;
	background: var(--vn-amarelo);
	border-radius: 2px;
}
.vn-secao__cabeca--centro .vn-etiqueta::after {
	content: "";
	flex: none;
	width: 22px;
	height: 3px;
	background: var(--vn-amarelo);
	border-radius: 2px;
}
.vn-secao--escura .vn-etiqueta { color: rgba(255, 255, 255, .75); }

.vn-chamada { font-size: 1.08rem; color: var(--vn-tinta-suave); }
.vn-secao--escura .vn-chamada { color: rgba(255, 255, 255, .78); }

.vn-icone { flex: none; }

/* Botões ---------------------------------------------------------------- */
/* Botão em formato de placa, não de pílula: cantos 12px, como o raio de canto
   de uma placa de sinalização. O CTA verde ganha o filete branco interno que
   toda placa de rodovia tem. */
.vn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 26px;
	border: 2px solid transparent;
	border-radius: 12px;
	font-family: var(--vn-corpo);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--vn-transicao), background var(--vn-transicao), box-shadow var(--vn-transicao), color var(--vn-transicao);
}
.vn-btn:hover { transform: translateY(-2px); }
.vn-btn:active { transform: translateY(-1px) scale(.96); }

.vn-btn--reserva {
	background: var(--vn-placa);
	color: #fff;
	box-shadow:
		inset 0 0 0 2px rgba(255, 255, 255, .38),
		0 6px 20px rgba(0, 113, 61, .32);
}
.vn-btn--reserva:hover {
	background: #00854A;
	color: #fff;
	box-shadow:
		inset 0 0 0 2px rgba(255, 255, 255, .55),
		0 8px 24px rgba(0, 113, 61, .40);
}

.vn-btn--verde { background: var(--vn-azul); color: #fff; }
.vn-btn--verde:hover { background: var(--vn-azul-claro); color: #fff; }

.vn-btn--zap { background: #25D366; color: #05301B; }
.vn-btn--zap:hover { background: #1EB955; color: #05301B; }

.vn-btn--contorno {
	background: transparent;
	border-color: currentColor;
	color: var(--vn-escuro);
}
.vn-btn--contorno:hover { background: var(--vn-escuro); color: #fff; border-color: var(--vn-escuro); }

.vn-secao--escura .vn-btn--contorno { color: #fff; }
.vn-secao--escura .vn-btn--contorno:hover { background: #fff; color: var(--vn-escuro); }

.vn-btn--bloco { width: 100%; }
.vn-btn--p { padding: 11px 18px; font-size: .92rem; }

/* -------------------------------------------------------------------------
   4. Cabeçalho
   ------------------------------------------------------------------------- */
.vn-topo {
	background: var(--vn-escuro);
	color: rgba(255, 255, 255, .82);
	font-size: .85rem;
}
.vn-topo__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 40px;
	padding-block: 6px;
}
.vn-topo a { color: inherit; text-decoration: none; }
.vn-topo a:hover { color: var(--vn-amarelo); }
.vn-topo__item { display: inline-flex; align-items: center; gap: 7px; }
.vn-topo__grupo { display: flex; align-items: center; gap: 22px; }
@media (max-width: 860px) {
	.vn-topo__endereco { display: none; }
	.vn-topo__interno { justify-content: center; }
}
@media (max-width: 560px) {
	.vn-topo__horario { display: none; }
	.vn-topo__grupo { gap: 14px; }
}

.vn-cabecalho {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--vn-linha);
	transition: background var(--vn-transicao), border-color var(--vn-transicao);
}
.vn-cabecalho__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 86px;
}

.vn-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }

/* A logo é a marca: nada de reduzi-la a ponto de "VIA NORTE" virar mancha.
   58 px de altura mantém o texto legível sem inchar o cabeçalho fixo. */
.vn-marca__logo {
	height: 66px;
	width: auto;
	max-width: 250px;
	object-fit: contain;
}
@media (max-width: 560px) {
	.vn-marca__logo { height: 46px; }
}

.vn-rodape__logo {
	height: 62px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	margin-bottom: 4px;
}
.vn-marca__simbolo {
	width: 42px; height: 42px;
	border-radius: 12px;
	background: var(--vn-escuro);
	color: var(--vn-verde);
	display: grid; place-items: center;
	font-family: var(--vn-display);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .02em;
	flex: none;
}
.vn-marca__nome {
	font-family: var(--vn-display);
	font-size: 1.22rem;
	font-weight: 600;
	line-height: 1.05;
	color: var(--vn-escuro);
	white-space: nowrap;
}
.vn-marca__linha {
	display: block;
	font-family: var(--vn-corpo);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vn-tinta-suave);
	margin-top: 3px;
}

.vn-nav { display: flex; align-items: center; gap: 26px; }
.vn-nav ul {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0; padding: 0;
}
.vn-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: .95rem;
	white-space: nowrap;
	font-weight: 600;
	color: var(--vn-tinta);
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: border-color var(--vn-transicao), color var(--vn-transicao);
}
.vn-nav a:hover,
.vn-nav .current-menu-item > a {
	color: var(--vn-escuro);
	border-bottom-color: var(--vn-verde);
}

.vn-cabecalho__acoes { display: flex; align-items: center; gap: 12px; }

.vn-nav .vn-btn { display: none; }
@media (max-width: 1000px) { .vn-nav .vn-btn { display: inline-flex; } }

.vn-menu-btn {
	display: none;
	width: 46px; height: 46px;
	border: 1px solid var(--vn-linha);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	padding: 0;
	place-items: center;
}
.vn-menu-btn span {
	display: block;
	width: 20px; height: 2px;
	background: var(--vn-escuro);
	position: relative;
	transition: background var(--vn-transicao);
}
.vn-menu-btn span::before,
.vn-menu-btn span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px; height: 2px;
	background: var(--vn-escuro);
	transition: transform var(--vn-transicao);
}
.vn-menu-btn span::before { top: -6px; }
.vn-menu-btn span::after { top: 6px; }
.vn-menu-btn[aria-expanded="true"] span { background: transparent; }
.vn-menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.vn-menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
	.vn-menu-btn { display: grid; }
	.vn-cabecalho__acoes .vn-btn--reserva { display: none; }
	.vn-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(86vw, 360px);
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 96px 28px 40px;
		box-shadow: var(--vn-sombra-alta);
		transform: translateX(100%);
		transition: transform var(--vn-transicao);
		overflow-y: auto;
	}
	.vn-nav[data-aberto="true"] { transform: translateX(0); }
	.vn-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.vn-nav li { border-bottom: 1px solid var(--vn-linha); }
	.vn-nav a { display: block; padding: 16px 0; font-size: 1.05rem; border: 0; }
	.vn-nav .vn-btn { margin-top: 24px; }
}

/* -------------------------------------------------------------------------
   5. Topo da página inicial
   ------------------------------------------------------------------------- */
.vn-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 82vh, 780px);
	padding: 120px 0 0;
	color: #fff;
	overflow: hidden;
	background: var(--vn-escuro);
}
/* As fotos do topo ficam empilhadas; a ativa aparece com um fade lento e uma
   aproximação suave (escala 1 → 1.06 em 9s). A animação recomeça a cada troca
   porque a classe sai e volta. Com "reduzir movimento" ligado no sistema, o
   bloco global de reduced-motion zera tanto o zoom quanto o fade. */
.vn-hero__fundo {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1600ms ease;
	will-change: transform, opacity;
}
.vn-hero__fundo.is-active {
	opacity: 1;
	animation: vn-hero-aproxima 9s ease-out both;
}
@keyframes vn-hero-aproxima {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}
.vn-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(20, 41, 79, .58) 0%, rgba(20, 41, 79, .28) 38%, rgba(20, 41, 79, .88) 100%);
}
.vn-hero__interno { position: relative; z-index: 2; width: 100%; padding-bottom: 40px; }
.vn-hero__conteudo { max-width: 720px; }
.vn-hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); margin-bottom: 18px; }
.vn-hero__apoio {
	font-size: clamp(1.02rem, 2vw, 1.22rem);
	color: rgba(255, 255, 255, .92);
	max-width: 56ch;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

/* O selo do topo é um marco quilométrico: plaquinha branca, mono de placa,
   com o "BR-153" num tarjeta amarela — a rodovia é o endereço do hotel. */
.vn-hero__selo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .96);
	border: 0;
	color: var(--vn-escuro);
	border-radius: 8px;
	padding: 7px 14px 7px 7px;
	font-family: var(--vn-mono);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 20px;
	box-shadow: 0 4px 18px rgba(3, 18, 36, .25);
}
.vn-hero__selo-br {
	display: inline-grid;
	place-items: center;
	padding: 5px 9px 4px;
	border-radius: 5px;
	background: var(--vn-amarelo);
	color: var(--vn-escuro);
	font-weight: 700;
	letter-spacing: .04em;
}

/* A nota do Google fica sobre a foto: sem um fundo próprio, as estrelas
   amarelas somem no céu claro do topo. */
.vn-hero__nota {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(20, 41, 79, .55);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(6px);
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}
.vn-hero__nota:hover { background: rgba(20, 41, 79, .72); }
.vn-hero__estrelas { display: inline-flex; gap: 2px; color: var(--vn-amarelo); }
.vn-hero__nota:hover { color: #fff; }

/* Barra de reserva ------------------------------------------------------- */
.vn-busca {
	position: relative;
	z-index: 3;
	background: #fff;
	border-radius: var(--vn-raio);
	box-shadow: var(--vn-sombra-alta);
	padding: 18px;
	margin-top: -46px;
}
.vn-busca__grade {
	display: grid;
	grid-template-columns: repeat(4, 1fr) auto;
	gap: 14px;
	align-items: end;
}
.vn-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vn-campo label {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vn-tinta-suave);
}
.vn-campo input,
.vn-campo select,
.vn-campo textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--vn-linha);
	border-radius: var(--vn-raio-p);
	background: var(--vn-branco);
	font-family: inherit;
	font-size: 1rem;
	color: var(--vn-tinta);
	transition: border-color var(--vn-transicao), box-shadow var(--vn-transicao);
}
.vn-campo input:focus,
.vn-campo select:focus,
.vn-campo textarea:focus {
	border-color: var(--vn-azul-claro);
	box-shadow: 0 0 0 3px rgba(30, 107, 82, .14);
	outline: none;
}
.vn-campo textarea { min-height: 120px; resize: vertical; }

.vn-busca__rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--vn-linha);
	font-size: .88rem;
	color: var(--vn-tinta-suave);
}
.vn-busca__preco strong {
	font-family: var(--vn-mono);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--vn-escuro);
}

@media (max-width: 900px) {
	.vn-busca { margin-top: -28px; padding: 16px; }
	.vn-busca__grade { grid-template-columns: 1fr 1fr; }
	.vn-busca__grade .vn-campo--acao { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.vn-busca__grade { grid-template-columns: 1fr; }
}

/* Hero aprovado: conteúdo e reserva juntos na primeira tela -------------- */
.home .vn-topo { display: none; }
.home .vn-cabecalho__interno { min-height: 80px; }
.home .vn-nav .current-menu-item > a { border-bottom-color: transparent; }

.vn-hero {
	display: block;
	min-height: calc(100vh - 80px);
	padding: 0;
}
.vn-hero__fundo { object-position: center 62%; }
/* O brilho âmbar rente ao horizonte é o fim de tarde do cerrado — aquece a
   foto sem competir com o texto, que continua sobre o azul fechado. */
.vn-hero::after {
	background:
		radial-gradient(110% 55% at 78% 102%, rgba(255, 170, 40, .22) 0%, rgba(255, 170, 40, 0) 62%),
		linear-gradient(90deg, rgba(5, 28, 57, .98) 0%, rgba(8, 35, 65, .90) 34%, rgba(10, 39, 67, .45) 66%, rgba(10, 35, 61, .22) 100%),
		linear-gradient(180deg, rgba(8, 31, 58, .08) 0%, rgba(7, 31, 59, .60) 100%);
}
.vn-hero__interno {
	position: relative;
	z-index: 2;
	min-height: calc(100vh - 80px);
	padding: clamp(88px, 10vh, 100px) 0 152px;
}
.vn-hero .vn-container { width: min(100% - 48px, 1250px); }
.vn-hero__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	align-items: center;
	gap: clamp(54px, 7vw, 104px);
}
.vn-hero__conteudo {
	align-self: start;
	max-width: 700px;
	margin-top: 17px;
}
.vn-hero h1 {
	max-width: 760px;
	margin-bottom: 20px;
	font-size: clamp(3.6rem, 4.15vw, 4.45rem);
	line-height: 1.08;
	letter-spacing: -.035em;
	text-wrap: balance;
}
.vn-hero h1 span { display: block; }

/* A faixa central da pista, tracejada em amarelo, sublinha a frase de viagem.
   É pintura de solo, não decoração: a página inteira usa esse traço como
   assinatura, e ele nasce aqui. */
.vn-hero h1 span:last-child::after {
	content: "";
	display: block;
	width: 164px;
	height: 6px;
	margin-top: 18px;
	border-radius: 3px;
	background: repeating-linear-gradient(
		90deg,
		var(--vn-amarelo) 0 30px,
		transparent 30px 48px
	);
}
.vn-hero__apoio {
	max-width: 44ch;
	margin-bottom: 20px;
	font-size: clamp(1.05rem, 1.25vw, 1.22rem);
	line-height: 1.55;
}
.vn-hero__selo { margin-bottom: 26px; }
.vn-hero__nota {
	margin-top: 0;
	padding: 0;
	background: transparent;
	border: 0;
	backdrop-filter: none;
}
.vn-hero__nota:hover { background: transparent; }
.vn-hero__estrelas { gap: 3px; }
.vn-hero__acoes {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
}
.vn-hero__acoes .vn-btn { min-height: 54px; padding-inline: 24px; }
.vn-hero .vn-btn--reserva { color: #fff; }
.vn-hero .vn-btn--reserva:hover { color: #fff; }
.vn-hero .vn-btn--contorno {
	border-color: rgba(255, 255, 255, .82);
	color: #fff;
}
.vn-hero .vn-btn--contorno:hover {
	background: #fff;
	border-color: #fff;
	color: var(--vn-escuro);
}
.vn-hero__garantia {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, .84);
	font-size: .9rem;
}
.vn-hero__garantia .vn-icone { color: #00C66D; }
.vn-hero__icone-arquivo {
	width: 20px;
	height: 20px;
	flex: none;
}

.vn-hero-card {
	width: 100%;
	padding: 30px 32px 26px;
	border: 1px solid rgba(255, 255, 255, .78);
	border-radius: 18px;
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 26px 70px rgba(3, 18, 36, .30);
	color: var(--vn-tinta);
}
.vn-hero-card__cabeca { margin-bottom: 20px; }
.vn-hero-card__cabeca h2 {
	margin-bottom: 6px;
	font-size: 1.85rem;
	letter-spacing: -.025em;
}
.vn-hero-card__cabeca p {
	margin: 0;
	color: var(--vn-tinta-suave);
	font-size: .96rem;
}
.vn-hero-card__campos { display: grid; gap: 13px; }
.vn-hero-card .vn-campo { gap: 5px; }
.vn-hero-card .vn-campo label { font-size: .7rem; }
.vn-hero-card .vn-campo input,
.vn-hero-card .vn-campo select {
	min-height: 45px;
	padding: 10px 13px;
}
.vn-hero-card__botao {
	min-height: 52px;
	margin-top: 17px;
	border-radius: var(--vn-raio-p);
}
.vn-hero-card__rodape {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 0 8px;
	margin-top: 17px;
	padding-top: 16px;
	border-top: 1px dashed var(--vn-linha);
	text-align: center;
	color: var(--vn-tinta-suave);
	font-size: .9rem;
}
.vn-hero-card__rodape > span:first-child { text-align: right; }
.vn-hero-card__rodape strong {
	font-family: var(--vn-mono);
	font-weight: 700;
	font-size: 1.9rem;
	line-height: 1;
	color: var(--vn-escuro);
	text-align: left;
}
.vn-hero-card__vantagem {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--vn-escuro);
}
.vn-hero-card__vantagem .vn-icone { color: var(--vn-verde); }

.vn-hero-beneficios {
	position: absolute;
	right: 0;
	bottom: 30px;
	left: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 15px 22px;
	border: 1px solid rgba(255, 255, 255, .76);
	border-radius: 14px;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 18px 46px rgba(3, 18, 36, .24);
	color: var(--vn-escuro);
}
.vn-hero .vn-hero-beneficios { width: min(100% - 48px, 1170px); }
.vn-hero-beneficio {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	min-height: 62px;
	padding: 0 22px;
	font-weight: 600;
	line-height: 1.3;
}
.vn-hero-beneficio + .vn-hero-beneficio { border-left: 1px solid var(--vn-linha); }
.vn-hero-beneficio .vn-icone { color: var(--vn-verde); }
.vn-hero-beneficio__icone {
	width: 42px;
	height: 42px;
	flex: none;
	object-fit: contain;
}

@media (max-width: 1080px) {
	.vn-hero__interno { padding-top: 54px; }
	.vn-hero__grade { grid-template-columns: minmax(0, 1fr) 390px; gap: 42px; }
	.vn-hero h1 { font-size: clamp(3.25rem, 5.5vw, 4.2rem); }
	.vn-hero__acoes { align-items: stretch; flex-direction: column; max-width: 360px; }
	.vn-hero__acoes .vn-btn { width: 100%; }
	.vn-hero-beneficio { padding-inline: 13px; font-size: .9rem; }
}

@media (max-width: 850px) {
	.home .vn-cabecalho__interno { min-height: 72px; }
	.vn-hero,
	.vn-hero__interno { min-height: auto; }
	.vn-hero__interno { padding: 70px 0 34px; }
	.vn-hero::after {
		background:
			linear-gradient(180deg, rgba(6, 29, 57, .90) 0%, rgba(8, 34, 63, .78) 48%, rgba(6, 29, 57, .94) 100%);
	}
	.vn-hero__grade { grid-template-columns: 1fr; }
	.vn-hero__conteudo { max-width: 680px; margin-top: 0; }
	.vn-hero h1 { max-width: 12ch; }
	.vn-hero__acoes { align-items: center; flex-direction: row; max-width: none; }
	.vn-hero__acoes .vn-btn { width: auto; }
	.vn-hero-card { max-width: 580px; }
	.vn-hero-beneficios {
		position: relative;
		bottom: auto;
		margin-top: 40px;
		grid-template-columns: repeat(2, 1fr);
	}
	.vn-hero-beneficio + .vn-hero-beneficio { border-left: 0; }
	.vn-hero-beneficio:nth-child(even) { border-left: 1px solid var(--vn-linha); }
	.vn-hero-beneficio:nth-child(n + 3) { border-top: 1px solid var(--vn-linha); }
}

@media (max-width: 560px) {
	.vn-hero .vn-container { width: min(100% - 28px, 1250px); }
	.vn-hero .vn-hero-beneficios { width: min(100% - 28px, 1170px); }
	.vn-hero__interno { padding-top: 48px; }
	.vn-hero h1 { font-size: clamp(2.65rem, 13vw, 3.5rem); }
	.vn-hero__apoio { font-size: 1rem; }
	.vn-hero__selo { font-size: .68rem; letter-spacing: .07em; }
	.vn-hero__acoes { align-items: stretch; flex-direction: column; }
	.vn-hero__acoes .vn-btn { width: 100%; }
	.vn-hero-card { padding: 24px 20px 22px; }
	.vn-hero-card__cabeca h2 { font-size: 1.7rem; }
	.vn-hero-beneficios { grid-template-columns: 1fr; padding: 8px 18px; }
	.vn-hero-beneficio {
		justify-content: flex-start;
		min-height: 68px;
		padding-inline: 10px;
	}
	.vn-hero-beneficio:nth-child(even) { border-left: 0; }
	.vn-hero-beneficio:nth-child(n + 2) { border-top: 1px solid var(--vn-linha); }
}

/* -------------------------------------------------------------------------
   6. Faixa de confiança
   ------------------------------------------------------------------------- */
.vn-selos { padding: clamp(40px, 6vw, 64px) 0; }
/* Seis itens em três colunas fecham duas linhas cheias. Com auto-fit eles
   viravam cinco em cima e um órfão embaixo. */
.vn-selos__grade {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
@media (max-width: 900px) { .vn-selos__grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .vn-selos__grade { grid-template-columns: 1fr; } }
.vn-selo {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 18px;
	background: var(--vn-areia);
	border-radius: var(--vn-raio-p);
}
.vn-selo__icone {
	width: 44px; height: 44px;
	border-radius: 12px;
	background: #fff;
	color: var(--vn-azul);
	display: grid; place-items: center;
	flex: none;
}
.vn-selo__texto { font-size: .95rem; font-weight: 600; line-height: 1.35; }
.vn-selo__texto small {
	display: block;
	font-weight: 400;
	color: var(--vn-tinta-suave);
	font-size: .84rem;
	margin-top: 2px;
}

/* -------------------------------------------------------------------------
   7. Acomodações
   ------------------------------------------------------------------------- */
.vn-quartos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 28px;
}

.vn-quarto {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--vn-linha);
	border-radius: var(--vn-raio);
	overflow: hidden;
	transition: transform var(--vn-transicao), box-shadow var(--vn-transicao), border-color var(--vn-transicao);
}
.vn-quarto:hover {
	transform: translateY(-4px);
	box-shadow: var(--vn-sombra);
	border-color: transparent;
}
.vn-quarto--destaque { border-color: var(--vn-verde); box-shadow: 0 0 0 3px rgba(0, 168, 89, .18); }

.vn-quarto__foto { position: relative; aspect-ratio: 4 / 3; background: var(--vn-areia-escura); }
.vn-quarto__foto img { width: 100%; height: 100%; object-fit: cover; }

/* A fita de destaque é uma tarjeta amarela de placa, não uma pílula. */
.vn-quarto__fita {
	position: absolute;
	top: 14px; left: 14px;
	background: var(--vn-amarelo);
	color: var(--vn-escuro);
	font-family: var(--vn-mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 10px 5px;
	border-radius: 6px;
}

.vn-quarto__corpo { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.vn-quarto__titulo { margin-bottom: 4px; }
.vn-quarto__titulo a { color: inherit; text-decoration: none; }
.vn-quarto__sub { color: var(--vn-tinta-suave); font-size: .95rem; margin-bottom: 16px; }

.vn-quarto__dados {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: .89rem;
	color: var(--vn-tinta-suave);
	margin-bottom: 16px;
}
.vn-quarto__dado { display: inline-flex; align-items: center; gap: 7px; }

.vn-quarto__itens {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px 14px;
	font-size: .88rem;
}
.vn-quarto__itens li { display: flex; align-items: flex-start; gap: 7px; color: var(--vn-tinta-suave); }
.vn-quarto__itens .vn-icone { color: var(--vn-azul-claro); margin-top: 2px; }

.vn-quarto__preco {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--vn-linha);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.vn-quarto__valor {
	font-family: var(--vn-mono);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--vn-escuro);
	line-height: 1;
}
.vn-quarto__valor small {
	display: block;
	font-family: var(--vn-corpo);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vn-tinta-suave);
	margin-bottom: 4px;
}
.vn-quarto__valor span {
	font-family: var(--vn-corpo);
	font-size: .8rem;
	font-weight: 500;
	color: var(--vn-tinta-suave);
}

/* -------------------------------------------------------------------------
   8. Reserva direta
   ------------------------------------------------------------------------- */
.vn-direto__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
}
.vn-vantagem {
	padding: 28px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--vn-raio);
}
.vn-vantagem__icone {
	width: 48px; height: 48px;
	border-radius: 14px;
	background: var(--vn-verde);
	color: var(--vn-escuro);
	display: grid; place-items: center;
	margin-bottom: 18px;
}
.vn-vantagem h3 { font-size: 1.14rem; margin-bottom: 8px; }
.vn-vantagem p { margin: 0; font-size: .96rem; color: rgba(255, 255, 255, .76); }

/* -------------------------------------------------------------------------
   9. Estrutura — visita guiada
   ------------------------------------------------------------------------- */
.vn-estrutura {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(circle at 74% 28%, rgba(40, 75, 140, .17), transparent 34%),
		#061a35;
	color: rgba(255, 255, 255, .84);
}
.vn-estrutura::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(0, 168, 89, .05), transparent 32%);
}
.vn-estrutura__interno { width: min(100% - 48px, 1340px); }

/* O botão de fotos fica na altura do título, não rente ao texto de apoio. */
.vn-estrutura__cabeca {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: center;
	margin-bottom: clamp(30px, 4vw, 48px);
}
.vn-estrutura__cabeca > div { min-width: 0; }
.vn-estrutura .vn-etiqueta {
	color: #00cf78;
	margin-bottom: 12px;
}
/* Sem o traço: aqui a etiqueta é só o texto verde espaçado, como no desenho. */
.vn-estrutura .vn-etiqueta::before { content: none; }
.vn-estrutura__cabeca h2 {
	margin: 0 0 14px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2.25rem, 4.8vw, 4.45rem);
	font-weight: 400;
	line-height: .98;
	letter-spacing: -.045em;
	color: #fffdf8;
}
.vn-estrutura__cabeca p {
	max-width: 59ch;
	margin: 0;
	font-size: clamp(.98rem, 1.4vw, 1.14rem);
	line-height: 1.55;
	color: #93a7c6;
}
.vn-estrutura__todas {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-width: 224px;
	min-height: 50px;
	padding: 12px 18px;
	border: 1px solid rgba(0, 207, 120, .75);
	border-radius: 3px;
	color: #f5f8fd;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .025em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--vn-transicao), background var(--vn-transicao), border-color var(--vn-transicao);
}
.vn-estrutura__todas span { color: #00cf78; font-size: 1.15rem; }
.vn-estrutura__todas:hover {
	background: #00a859;
	border-color: #00a859;
	color: #fff;
}
.vn-estrutura__todas:hover span { color: #fff; }

.vn-estrutura-tour {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	border: 1px solid rgba(255, 255, 255, .27);
	background: #07182f;
}
.vn-estrutura-tour__trilho {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 46px 0 42px;
	border-right: 1px solid rgba(255, 255, 255, .22);
}
.vn-estrutura-tour__passos {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 34px;
}
.vn-estrutura-tour__passos::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 50%;
	width: 1px;
	background: rgba(255, 255, 255, .18);
	transform: translateX(-50%);
}
.vn-estrutura-tour__controle {
	position: relative;
	z-index: 1;
	width: 42px;
	padding: 2px 0;
	border: 0;
	background: #07182f;
	color: rgba(255, 255, 255, .74);
	font: 600 .92rem/1 var(--vn-corpo);
	cursor: pointer;
	transition: color var(--vn-transicao), transform var(--vn-transicao);
}
.vn-estrutura-tour__controle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -15px;
	width: 5px;
	height: 5px;
	background: #40516a;
	transform: translateY(-50%);
	transition: height var(--vn-transicao), background var(--vn-transicao);
}
.vn-estrutura-tour__controle:hover,
.vn-estrutura-tour__controle.is-active { color: #00d57c; transform: translateX(2px); }
.vn-estrutura-tour__controle.is-active::before { height: 12px; background: #00cf78; }
.vn-estrutura-tour__explore {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: rgba(255, 255, 255, .82);
}

.vn-estrutura-tour__foto {
	position: relative;
	min-width: 0;
	aspect-ratio: 2.42 / 1;
	overflow: hidden;
}
/* O recorte desce até a piscina: com `center 48%` a água ficava FORA do
   quadro e nenhum pino tinha onde apontar. Perde-se o horizonte da cidade;
   ganham-se os quatro espaços que os marcadores nomeiam. */
.vn-estrutura-tour__imagem {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 92%;
	transition: transform 900ms cubic-bezier(.2, .7, .3, 1);
}
.vn-estrutura-tour:hover .vn-estrutura-tour__imagem { transform: scale(1.012); }
.vn-estrutura-tour__sombra {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(5, 19, 40, .7), transparent 22%),
		linear-gradient(0deg, rgba(5, 19, 40, .32), transparent 34%);
}
.vn-estrutura-tour__marcador {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: 600 .78rem/1 var(--vn-corpo);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
	cursor: pointer;
	transition: transform var(--vn-transicao), filter var(--vn-transicao);
}
.vn-estrutura-tour__marcador:hover,
.vn-estrutura-tour__marcador.is-active {
	transform: translateY(-2px) scale(1.035);
	filter: brightness(1.08);
}
.vn-estrutura-tour__numero {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 2px solid rgba(255, 255, 255, .34);
	border-radius: 50%;
	background: #00a859;
	box-shadow: 0 0 0 0 rgba(0, 207, 120, 0);
	transition: box-shadow var(--vn-transicao);
}
.vn-estrutura-tour__marcador.is-active .vn-estrutura-tour__numero {
	box-shadow: 0 0 0 7px rgba(0, 207, 120, .17);
}
.vn-estrutura-tour__rotulo {
	margin-left: -7px;
	padding: 11px 14px 11px 17px;
	border-radius: 0 5px 5px 0;
	background: rgba(5, 24, 50, .95);
	white-space: nowrap;
}
/* As posições vêm do painel ([CONFIG] → Pontos do tour) como % da foto
   original; o PHP converte para cada recorte (vn_pin_posicoes) e entrega
   nas variáveis abaixo, por marcador. As margens centralizam o círculo no
   ponto medido. Se mudar a moldura ou o object-position do tour aqui no CSS,
   os mesmos números precisam mudar em vn_pin_posicoes(). */
.vn-estrutura-tour__marcador {
	left: var(--vn-pin-dx, 50%);
	top: var(--vn-pin-dy, 50%);
	margin: -19px 0 0 -19px;
}

.vn-estrutura-filme {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
}
.vn-estrutura-filme a {
	position: relative;
	display: block;
	height: 128px;
	overflow: hidden;
	background: #0b2344;
	color: #fff;
	text-decoration: none;
}
.vn-estrutura-filme img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(.2, .7, .3, 1), filter 500ms ease;
}
.vn-estrutura-filme a:hover img { transform: scale(1.045); filter: brightness(1.08); }
.vn-estrutura-filme__sombra {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(3, 18, 38, .88), transparent 70%);
}
.vn-estrutura-filme__legenda {
	position: absolute;
	inset: auto 20px 14px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.vn-estrutura-filme__legenda small {
	font-family: var(--vn-mono);
	font-size: .72rem;
	font-weight: 700;
	color: #00d57c;
}
.vn-estrutura-filme__legenda strong {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.15rem;
	font-weight: 400;
}

.vn-estrutura-comodidades {
	list-style: none;
	display: flex;
	align-items: stretch;
	margin: 30px 0 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 207, 120, .55) rgba(255, 255, 255, .08);
}
.vn-estrutura-comodidades li {
	display: flex;
	flex: 1 0 auto;
	align-items: center;
	gap: 9px;
	min-height: 34px;
	padding: 0 17px;
	border-right: 1px solid rgba(255, 255, 255, .19);
	font-size: clamp(.76rem, 1vw, .88rem);
	line-height: 1.25;
	white-space: nowrap;
	color: rgba(255, 255, 255, .9);
}
.vn-estrutura-comodidades li:first-child { padding-left: 10px; }
.vn-estrutura-comodidades li:last-child { padding-right: 10px; border-right: 0; }
.vn-estrutura-comodidades img { width: 25px; height: 25px; flex: none; }

.vn-estrutura__rodape {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 32px;
	padding-top: 28px;
}
.vn-estrutura__rodape p {
	max-width: 17ch;
	margin: 0;
	color: #8499ba;
	font-size: .9rem;
	line-height: 1.45;
	text-align: right;
}
.vn-estrutura__cta { min-width: 304px; justify-content: space-between; }
.vn-estrutura__cta img { width: 24px; height: 24px; }

@media (max-width: 980px) {
	.vn-estrutura__cabeca { grid-template-columns: 1fr; align-items: start; gap: 24px; }
	.vn-estrutura__todas { justify-self: start; }
	.vn-estrutura-tour { grid-template-columns: 60px minmax(0, 1fr); }
	.vn-estrutura-tour__trilho { padding-block: 32px; }
	.vn-estrutura-tour__passos { gap: 24px; }
	.vn-estrutura-tour__foto { aspect-ratio: 1.85 / 1; }
	.vn-estrutura-tour__marcador {
		left: var(--vn-pin-tx, 50%);
		top: var(--vn-pin-ty, 50%);
	}
}

@media (max-width: 680px) {
	.vn-estrutura__interno { width: min(100% - 28px, 1340px); }
	.vn-estrutura__cabeca h2 { font-size: clamp(2.35rem, 12vw, 3.35rem); line-height: 1.01; }
	.vn-estrutura__todas { width: 100%; }
	.vn-estrutura-tour { display: block; }
	.vn-estrutura-tour__trilho {
		display: block;
		padding: 15px 18px;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .2);
	}
	.vn-estrutura-tour__passos { flex-direction: row; justify-content: space-between; gap: 12px; }
	.vn-estrutura-tour__passos::before { top: 50%; bottom: auto; left: 12px; right: 12px; width: auto; height: 1px; transform: none; }
	.vn-estrutura-tour__controle { width: 34px; height: 28px; }
	.vn-estrutura-tour__controle::before { display: none; }
	.vn-estrutura-tour__explore { display: none; }
	.vn-estrutura-tour__foto { aspect-ratio: 1 / 1.12; }
	/* No retrato o corte é horizontal; puxado para a direita para a piscina
	   e o restaurante caberem no quadro. */
	.vn-estrutura-tour__imagem { object-position: 65% center; }
	.vn-estrutura-tour__sombra { background: linear-gradient(0deg, rgba(5, 19, 40, .48), transparent 45%); }
	.vn-estrutura-tour__marcador { font-size: .7rem; }
	.vn-estrutura-tour__numero { width: 34px; height: 34px; }
	.vn-estrutura-tour__rotulo { display: none; padding: 10px 11px 10px 16px; }
	.vn-estrutura-tour__marcador.is-active .vn-estrutura-tour__rotulo { display: inline-block; }
	.vn-estrutura-tour__marcador {
		left: var(--vn-pin-cx, 50%);
		top: var(--vn-pin-cy, 50%);
		margin: -17px 0 0 -17px;
	}

	/* Pino na metade direita do quadro (classe posta pelo PHP): ancora pela
	   direita e o rótulo abre para a esquerda, senão estoura a foto. */
	.vn-estrutura-tour__marcador--direita {
		left: auto;
		right: calc(100% - var(--vn-pin-cx, 50%));
		margin: -17px -17px 0 0;
		flex-direction: row-reverse;
	}
	.vn-estrutura-tour__marcador--direita .vn-estrutura-tour__rotulo {
		margin-left: 0;
		margin-right: -7px;
		padding: 10px 11px 10px 16px;
		border-radius: 5px 0 0 5px;
	}
	.vn-estrutura-filme {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.vn-estrutura-filme::-webkit-scrollbar { display: none; }
	.vn-estrutura-filme a { flex: 0 0 78vw; height: 142px; scroll-snap-align: start; }
	.vn-estrutura-comodidades { margin-top: 18px; padding-bottom: 17px; }
	.vn-estrutura-comodidades li { padding-inline: 15px; }
	.vn-estrutura__rodape { align-items: stretch; flex-direction: column; gap: 15px; }
	.vn-estrutura__rodape p { max-width: none; }
	.vn-estrutura__cta { width: 100%; min-width: 0; }
}

.vn-estrutura__lista {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px 24px;
}
.vn-estrutura__lista li { display: flex; align-items: center; gap: 10px; font-size: .96rem; }
.vn-estrutura__lista .vn-icone { color: var(--vn-azul-claro); }

/* -------------------------------------------------------------------------
   10. Localização
   ------------------------------------------------------------------------- */
.vn-local__grade {
	display: grid;
	grid-template-columns: 1.12fr .88fr;
	gap: clamp(40px, 10vw, 150px);
	align-items: start;
}

/* O texto começa na mesma linha do topo da foto. Centralizado, ele empurrava
   o título para o meio e deixava a coluna sem eixo com a imagem ao lado. Os
   6px descontam a altura da linha da etiqueta, para o alinhamento ser óptico
   e não apenas geométrico. */
.vn-local__conteudo { padding-top: 6px; }

/* Com o texto no alto, a metade de baixo desta coluna fica livre — é para
   dentro dela que o mapa avança, e é por isso que o título pode crescer. */
.vn-local__conteudo h2 {
	font-size: clamp(2rem, 3.4vw, 3.1rem);
	margin-bottom: .38em;
}
.vn-local__conteudo .vn-chamada {
	font-size: 1.14rem;
	max-width: 30ch;
}

/* Foto grande à esquerda, com o mapa flutuando sobre o canto — o mapa avança
   para fora da foto, em direção ao texto, para costurar as duas colunas. */
.vn-local__midia { position: relative; }
.vn-local__foto {
	width: 100%;
	aspect-ratio: 14 / 13;
	object-fit: cover;
	border-radius: 18px;
	outline: 1px solid rgba(0, 0, 0, .10);
	outline-offset: -1px;
}

.vn-local__selo {
	position: absolute;
	top: 18px;
	left: 18px;
	background: var(--vn-escuro);
	color: #fff;
	font-family: var(--vn-mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 9px 16px 8px;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(3, 18, 36, .28);
}

.vn-local__nota {
	position: absolute;
	left: 18px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	background: #fff;
	border-radius: 12px;
	padding: 13px 17px;
	box-shadow: 0 14px 36px rgba(3, 18, 36, .22);
	color: var(--vn-escuro);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
a.vn-local__nota:hover { color: var(--vn-azul); }
.vn-local__estrelas { display: inline-flex; gap: 3px; color: var(--vn-amarelo); }

/* Estrela de avaliação é cheia — vazada parece nota zero. */
.vn-local__estrelas .vn-icone,
.vn-hero__estrelas .vn-icone,
.vn-depoimento__estrelas .vn-icone {
	fill: currentColor;
}

/* O avanço do mapa é sempre menor que o vão entre as colunas: o vão cresce a
   10vw e o avanço a 6vw, então sobra no mínimo ~4vw de ar entre o mapa e o
   botão de rota em qualquer largura. Avanço maior que isso encosta no texto
   e a seção perde o respiro. */
.vn-local__mapa {
	position: absolute;
	right: clamp(-96px, -6vw, -40px);
	bottom: -34px;
	width: min(66%, 470px);
	aspect-ratio: 16 / 12;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	border: 6px solid #fff;
	box-shadow: 0 24px 60px rgba(3, 18, 36, .28);
}
.vn-local__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.vn-local__endereco {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	max-width: calc(100% - 24px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: #fff;
	border-radius: 9px;
	padding: 8px 14px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--vn-escuro);
	box-shadow: 0 8px 22px rgba(3, 18, 36, .22);
	font-variant-numeric: tabular-nums;
}

.vn-local__acoes {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	margin-top: 30px;
}
.vn-btn--escuro { background: var(--vn-escuro); color: #fff; }
.vn-btn--escuro:hover { background: var(--vn-azul); color: #fff; }

.vn-local__zap {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	font-weight: 700;
	color: var(--vn-verde-forte);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.vn-local__zap:hover { color: var(--vn-placa); }

.vn-local__apoio {
	margin: 18px 0 0;
	font-size: .88rem;
	color: var(--vn-tinta-suave);
}

@media (max-width: 900px) {
	.vn-local__grade { grid-template-columns: 1fr; gap: 34px; }
	.vn-local__foto { aspect-ratio: 4 / 3; }
	.vn-local__mapa {
		position: static;
		width: auto;
		margin: 14px 0 0;
		aspect-ratio: 16 / 10;
	}

	/* A nota fica presa ao rodapé da mídia — e quando o mapa entra na coluna,
	   esse rodapé passa a ser o do mapa: a avaliação ia parar em cima da
	   cidade. Em fluxo, ela cai no lugar certo, entre a foto e o mapa. */
	.vn-local__nota {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		margin-top: 14px;
		box-shadow: var(--vn-sombra);
	}
}

/* A assinatura da página: a lista de distâncias é, literalmente, o que uma
   placa verde de rodovia informa — então ela É uma placa. Verde de placa,
   filete branco interno afastado da borda (como nas placas reais), destino à
   esquerda e quilometragem em mono à direita. */
.vn-distancias {
	list-style: none;
	margin: 26px 0 30px;
	padding: 18px 26px;
	background: var(--vn-placa);
	border-radius: 12px;
	box-shadow:
		inset 0 0 0 5px var(--vn-placa),
		inset 0 0 0 7px rgba(255, 255, 255, .92),
		0 14px 36px rgba(0, 74, 40, .28);
}
.vn-distancias li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .22);
	font-size: .98rem;
	font-weight: 600;
	color: #fff;
}
.vn-distancias li:last-child { border-bottom: 0; }
.vn-distancias strong {
	font-family: var(--vn-mono);
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	white-space: nowrap;
}

/* A faixa: a mesma placa verde, deitada, fechando a seção — como a placa de
   distâncias que se lê de passagem na pista. */
.vn-distancias--faixa {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: clamp(48px, 7vw, 76px) 0 0;
	padding: 10px 18px;
}
.vn-distancias--faixa li {
	flex: none;
	border-bottom: 0;
	padding: 12px 26px;
	font-size: .94rem;
}
.vn-distancias--faixa li + li { border-left: 1px solid rgba(255, 255, 255, .25); }
.vn-distancias--faixa li { gap: 10px; }

@media (max-width: 700px) {
	.vn-distancias--faixa { display: block; padding: 14px 24px; }
	.vn-distancias--faixa li {
		display: flex;
		padding: 12px 0;
		border-bottom: 1px solid rgba(255, 255, 255, .22);
	}
	.vn-distancias--faixa li + li { border-left: 0; }
	.vn-distancias--faixa li:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------------------------
   11. Depoimentos
   ------------------------------------------------------------------------- */
.vn-depoimentos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}
.vn-depoimento {
	background: #fff;
	border: 1px solid var(--vn-linha);
	border-radius: var(--vn-raio);
	padding: 28px;
	display: flex;
	flex-direction: column;
}
.vn-depoimento__estrelas { display: flex; gap: 3px; color: var(--vn-amarelo); margin-bottom: 14px; }
.vn-depoimento__texto {
	font-family: var(--vn-corpo);
	font-size: 1.04rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--vn-tinta);
	margin: 0 0 20px;
}
.vn-depoimento__autor {
	margin-top: auto;
	font-size: .9rem;
	font-weight: 700;
	color: var(--vn-escuro);
}
.vn-depoimento__autor span {
	display: block;
	font-weight: 400;
	color: var(--vn-tinta-suave);
	font-size: .84rem;
	margin-top: 2px;
}

/* -------------------------------------------------------------------------
   12. Perguntas frequentes
   ------------------------------------------------------------------------- */
.vn-faq { max-width: 820px; margin-inline: auto; }
.vn-faq details {
	border-bottom: 1px solid var(--vn-linha);
	padding: 4px 0;
}
.vn-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	font-family: var(--vn-display);
	font-size: 1.14rem;
	font-weight: 600;
	color: var(--vn-escuro);
	cursor: pointer;
	list-style: none;
}
.vn-faq summary::-webkit-details-marker { display: none; }
.vn-faq summary::after {
	content: "";
	flex: none;
	width: 12px; height: 12px;
	border-right: 2px solid var(--vn-azul-claro);
	border-bottom: 2px solid var(--vn-azul-claro);
	transform: rotate(45deg) translateY(-3px);
	transition: transform var(--vn-transicao);
}
.vn-faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.vn-faq__resposta { padding: 0 0 22px; color: var(--vn-tinta-suave); }
.vn-faq__resposta > *:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   13. Formulário de reserva
   ------------------------------------------------------------------------- */
.vn-reserva__grade {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}
@media (max-width: 900px) { .vn-reserva__grade { grid-template-columns: 1fr; } }

.vn-formulario {
	background: #fff;
	border-radius: var(--vn-raio);
	box-shadow: var(--vn-sombra);
	padding: clamp(24px, 4vw, 40px);
}
.vn-formulario__grade {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.vn-formulario__grade .vn-campo--largo { grid-column: 1 / -1; }
@media (max-width: 560px) { .vn-formulario__grade { grid-template-columns: 1fr; } }

.vn-formulario__aviso {
	font-size: .82rem;
	color: var(--vn-tinta-suave);
	margin: 16px 0 0;
}

.vn-armadilha {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

.vn-recado {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 20px;
	border-radius: var(--vn-raio-p);
	margin-bottom: 24px;
	font-size: .96rem;
}
.vn-recado--ok { background: rgba(30, 122, 76, .10); border: 1px solid rgba(30, 122, 76, .3); color: #12482D; }
.vn-recado--erro { background: rgba(179, 45, 46, .08); border: 1px solid rgba(179, 45, 46, .28); color: #7A1E1F; }
.vn-recado__acao { margin-top: 12px; }

/* -------------------------------------------------------------------------
   14. Chamada final
   ------------------------------------------------------------------------- */
.vn-final {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(90% 70% at 50% 115%, rgba(255, 170, 40, .16) 0%, rgba(255, 170, 40, 0) 60%),
		var(--vn-azul);
}
.vn-final__interno { position: relative; z-index: 2; text-align: center; max-width: 720px; margin-inline: auto; }
.vn-final h2 { color: #fff; }
.vn-final p { color: rgba(255, 255, 255, .84); font-size: 1.06rem; }
.vn-final__botoes {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 28px;
}
.vn-final .vn-btn--contorno {
	background: #fff;
	border-color: #fff;
	color: var(--vn-azul);
	box-shadow: 0 8px 22px rgba(20, 41, 79, .2);
}
.vn-final .vn-btn--contorno .vn-icone { color: var(--vn-verde-forte); }
.vn-final .vn-btn--contorno:hover {
	background: var(--vn-areia);
	border-color: var(--vn-areia);
	color: var(--vn-escuro);
	box-shadow: 0 10px 26px rgba(20, 41, 79, .28);
}

/* -------------------------------------------------------------------------
   15. Rodapé
   ------------------------------------------------------------------------- */
.vn-rodape {
	background: var(--vn-escuro);
	color: rgba(255, 255, 255, .72);
	padding: clamp(48px, 7vw, 80px) 0 0;
	font-size: .95rem;
	position: relative;
}

/* A faixa central da pista fecha a página: a estrada continua. */
.vn-rodape::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: repeating-linear-gradient(
		90deg,
		var(--vn-amarelo) 0 34px,
		transparent 34px 58px
	);
	opacity: .85;
}
.vn-rodape a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.vn-rodape a:hover { color: var(--vn-amarelo); }
.vn-rodape h3 {
	color: #fff;
	font-family: var(--vn-corpo);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.vn-rodape__grade {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-bottom: 48px;
}
@media (max-width: 900px) { .vn-rodape__grade { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .vn-rodape__grade { grid-template-columns: 1fr; } }

.vn-rodape ul { list-style: none; margin: 0; padding: 0; }
.vn-rodape li { margin-bottom: 10px; }
.vn-rodape__contato li { display: flex; align-items: flex-start; gap: 10px; }
.vn-rodape__contato .vn-icone { color: var(--vn-amarelo); margin-top: 3px; }

.vn-rodape__marca .vn-marca__nome { color: #fff; }
.vn-rodape__marca .vn-marca__linha { color: rgba(255, 255, 255, .6); }
.vn-rodape__sobre { margin-top: 18px; max-width: 40ch; }

.vn-rodape__base {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 22px 0 calc(22px + env(safe-area-inset-bottom));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: .85rem;
	color: rgba(255, 255, 255, .55);
}

/* -------------------------------------------------------------------------
   16. Ações fixas
   ------------------------------------------------------------------------- */
.vn-zap-flutuante {
	position: fixed;
	right: 22px; bottom: 22px;
	z-index: 90;
	width: 58px; height: 58px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: grid; place-items: center;
	box-shadow: 0 8px 26px rgba(37, 211, 102, .45);
	transition: transform var(--vn-transicao);
}
.vn-zap-flutuante:hover { transform: scale(1.06); color: #fff; }

.vn-barra-movel {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 95;
	display: none;
	background: #fff;
	border-top: 1px solid var(--vn-linha);
	box-shadow: 0 -6px 24px rgba(20, 41, 79, .1);
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	gap: 8px;
}
.vn-barra-movel a {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px 4px;
	border-radius: var(--vn-raio-p);
	font-size: .74rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--vn-tinta);
	min-height: 52px;
}
.vn-barra-movel a.vn-barra-movel--zap { background: #25D366; color: #05301B; }
.vn-barra-movel a.vn-barra-movel--reserva {
	background: var(--vn-placa);
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}

@media (max-width: 760px) {
	.vn-barra-movel { display: flex; }
	.vn-zap-flutuante { display: none; }
	body { padding-bottom: 74px; }
}

/* -------------------------------------------------------------------------
   17. Páginas internas
   ------------------------------------------------------------------------- */
.vn-capa {
	position: relative;
	background: var(--vn-escuro);
	color: #fff;
	padding: clamp(60px, 9vw, 110px) 0;
	overflow: hidden;
}
.vn-capa__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.vn-capa__interno { position: relative; z-index: 2; max-width: 760px; }
.vn-capa h1 { color: #fff; margin-bottom: 10px; }
.vn-capa p { color: rgba(255, 255, 255, .82); margin: 0; }

.vn-migalhas {
	font-size: .84rem;
	color: rgba(255, 255, 255, .66);
	margin-bottom: 14px;
}
.vn-migalhas a { color: inherit; }

.vn-conteudo { max-width: 820px; }
.vn-conteudo h2 { margin-top: 1.6em; }
.vn-conteudo h3 { margin-top: 1.4em; }
.vn-conteudo img { border-radius: var(--vn-raio-p); }
.vn-conteudo ul { padding-left: 1.1em; }
.vn-conteudo li { margin-bottom: .4em; }
.vn-conteudo table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: .96rem;
}
.vn-conteudo th,
.vn-conteudo td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--vn-linha);
	text-align: left;
}
.vn-conteudo th { background: var(--vn-areia); font-weight: 700; }

/* Tabela de tarifas ------------------------------------------------------ */
.vn-tarifario {
	border: 1px solid var(--vn-linha);
	border-radius: var(--vn-raio);
	overflow: hidden;
	background: #fff;
}
.vn-tarifario__linha {
	display: grid;
	grid-template-columns: 1.4fr .8fr auto;
	gap: 16px;
	align-items: center;
	padding: 18px 22px;
	border-bottom: 1px solid var(--vn-linha);
}
.vn-tarifario__linha:last-child { border-bottom: 0; }
.vn-tarifario__linha--topo {
	background: var(--vn-escuro);
	color: rgba(255, 255, 255, .8);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.vn-tarifario__valor {
	font-family: var(--vn-mono);
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--vn-escuro);
}
@media (max-width: 640px) {
	.vn-tarifario__linha { grid-template-columns: 1fr auto; }
	.vn-tarifario__linha .vn-btn { grid-column: 1 / -1; }
	.vn-tarifario__linha--topo { display: none; }
}

/* Ficha da acomodação --------------------------------------------------- */
.vn-ficha__grade {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(28px, 5vw, 56px);
	align-items: start;
}
@media (max-width: 900px) { .vn-ficha__grade { grid-template-columns: 1fr; } }

.vn-ficha__reserva {
	position: sticky;
	top: 100px;
	background: #fff;
	border: 1px solid var(--vn-linha);
	border-radius: var(--vn-raio);
	box-shadow: var(--vn-sombra);
	padding: 28px;
}
.vn-ficha__preco {
	font-family: var(--vn-mono);
	font-weight: 700;
	font-size: 1.95rem;
	color: var(--vn-escuro);
	line-height: 1;
	margin-bottom: 4px;
}
.vn-ficha__preco span { font-family: var(--vn-corpo); font-size: .86rem; color: var(--vn-tinta-suave); }
.vn-ficha__politicas {
	list-style: none;
	margin: 20px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--vn-linha);
	font-size: .88rem;
	color: var(--vn-tinta-suave);
}
.vn-ficha__politicas li { display: flex; gap: 9px; margin-bottom: 9px; }
.vn-ficha__politicas .vn-icone { color: var(--vn-azul-claro); flex: none; }

/* Paginação e busca ------------------------------------------------------ */
.vn-paginacao {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 40px;
	flex-wrap: wrap;
}
.vn-paginacao .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px; height: 42px;
	padding: 0 12px;
	border: 1px solid var(--vn-linha);
	border-radius: var(--vn-raio-p);
	text-decoration: none;
	color: var(--vn-tinta);
}
.vn-paginacao .page-numbers.current,
.vn-paginacao .page-numbers:hover { background: var(--vn-escuro); border-color: var(--vn-escuro); color: #fff; }

/* Lista simples de posts ------------------------------------------------- */
.vn-lista { display: grid; gap: 28px; }
.vn-lista__item {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 24px;
	align-items: center;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--vn-linha);
}
.vn-lista__item img { border-radius: var(--vn-raio-p); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
@media (max-width: 640px) { .vn-lista__item { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   18. Impressão
   ------------------------------------------------------------------------- */
@media print {
	.vn-cabecalho, .vn-topo, .vn-barra-movel, .vn-zap-flutuante, .vn-busca, .vn-final { display: none !important; }
	body { padding-bottom: 0; }
	.vn-hero { min-height: 0; padding: 20px 0; }
}

/* =========================================================================
   19. Acabamento

   Detalhes que não mudam o layout, mas mudam a sensação de uso. Vieram de
   uma revisão contra as diretrizes de polimento de interface — cada bloco
   diz qual problema resolve, para ninguém remover por engano.
   ========================================================================= */

/* Preço é o número que o hóspede compara entre cartões. Com algarismos de
   largura proporcional, "R$ 190" e "R$ 210" ficam desalinhados na coluna e
   a comparação exige esforço. Tabular resolve sem mudar a fonte. */
.vn-quarto__valor,
.vn-ficha__preco,
.vn-tarifario__valor,
.vn-busca__preco strong,
.vn-hero-card__rodape strong,
.vn-distancias strong,
.vn-hero__nota {
	font-variant-numeric: tabular-nums;
}

/* Título quebrado em "viúva" — uma palavra sozinha na última linha — é o
   defeito mais visível de manchete responsiva. `balance` distribui as linhas;
   `pretty` evita a órfã no corpo do texto. */
h1, h2, h3,
.vn-secao__cabeca h2,
.vn-quarto__titulo {
	text-wrap: balance;
}

p, .vn-chamada, .vn-quarto__sub, .vn-conteudo li {
	text-wrap: pretty;
}

/* Foto clara sobre fundo claro fica sem limite definido: a borda do card
   desaparece e a imagem parece "vazar". Um contorno preto a 10% dá o limite
   sem virar moldura. Preto puro de propósito — cinza-azulado encardiria a
   borda ao pegar a cor do fundo. */
.vn-quarto__foto img,
.vn-galeria img,
.vn-lista__item img,
.vn-conteudo img {
	outline: 1px solid rgba(0, 0, 0, .10);
	outline-offset: -1px;
}

/* Ícone ao lado de texto carrega o peso óptico do texto. Os botões usam
   fonte 700; um traço de 1,6px ao lado dela parece fino e "solto". */
.vn-btn .vn-icone,
.vn-barra-movel .vn-icone,
.vn-quarto__fita .vn-icone {
	stroke-width: 2;
}

/* Raios concêntricos: o campo dentro do cartão tem que ter raio menor que o
   do cartão, senão o canto interno parece espremido. Cartão 18, campo 10. */
.vn-formulario,
.vn-hero-card,
.vn-ficha__reserva {
	border-radius: 18px;
}

.vn-formulario .vn-campo input,
.vn-formulario .vn-campo select,
.vn-formulario .vn-campo textarea,
.vn-hero-card .vn-campo input,
.vn-hero-card .vn-campo select {
	border-radius: 10px;
}

/* O alvo do botão de menu precisa dos 44px cheios mesmo com o desenho menor. */
.vn-menu-btn { min-width: 44px; min-height: 44px; }

/* Um estado a mais que quase todo site esquece: o link do WhatsApp flutuante
   pressionado. Sem isso, no celular o toque não devolve nada até a página
   trocar. */
.vn-zap-flutuante:active { transform: scale(.96); }
.vn-barra-movel a:active { transform: scale(.97); }
.vn-barra-movel a { transition: transform var(--vn-transicao), background var(--vn-transicao); }

/* Foco visível também dentro das seções escuras, onde o verde-escuro sumia. */
.vn-secao--escura :focus-visible,
.vn-rodape :focus-visible,
.vn-hero :focus-visible {
	outline-color: var(--vn-amarelo);
}

/* -------------------------------------------------------------------------
   20. Comportamento de navegador

   Achados de uma revisão contra as Web Interface Guidelines. São coisas que
   não aparecem em captura de tela — só ao usar o site.
   ------------------------------------------------------------------------- */

/* O cabeçalho é fixo e tem 86px. Sem esta margem, clicar em "Dúvidas" leva o
   título da seção para DEBAixo do cabeçalho, e o hóspede vê o meio da seção
   sem entender o que aconteceu. Vale para link de menu e para o #reserva que
   o formulário usa ao voltar do envio. */
:target,
#reserva, #duvidas, #estrutura, #localizacao, #acomodacoes, #tarifas, #depoimentos, #conteudo {
	scroll-margin-top: 124px;
}

/* Sem isto, o celular espera 300ms depois do toque para decidir se foi
   duplo-toque de zoom — e o botão parece travado. */
.vn-btn,
.vn-nav a,
.vn-barra-movel a,
.vn-zap-flutuante,
.vn-menu-btn,
.vn-faq summary {
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0, 168, 89, .18);
}

/* O tema é claro em qualquer situação. Sem declarar isso, um celular em modo
   escuro pinta os controles nativos — o seletor de data e os <select> da
   barra de reserva — com fundo escuro dentro do cartão branco, e o texto
   some. É o campo mais importante da página. */
:root { color-scheme: light; }

.vn-campo input,
.vn-campo select,
.vn-campo textarea {
	color-scheme: light;
	background-color: var(--vn-branco);
	color: var(--vn-tinta);
}

/* Estado de foco dentro do cartão de reserva, que fica sobre a foto. */
.vn-hero-card :focus-visible { outline-color: var(--vn-verde-forte); }

/* =========================================================================
   21. Acomodações — seletor por jeito de viajar

   Um destaque grande com preço e botão, e as demais opções ao lado. A troca
   é feita por `input:checked ~`, sem JavaScript: preço e reserva não podem
   depender de script para aparecer.
   ========================================================================= */

.vn-quartos-secao { background: var(--vn-areia); }

.vn-seletor { position: relative; }

/* ---- as abas ---- */
.vn-abas {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 5px;
	margin-bottom: 26px;
	background: var(--vn-branco);
	border: 1px solid var(--vn-linha);
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(20, 41, 79, .05);
}

.vn-aba {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 12px;
	font-size: .97rem;
	font-weight: 600;
	color: var(--vn-tinta);
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--vn-transicao), color var(--vn-transicao);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.vn-aba:hover { background: var(--vn-areia); }
.vn-aba .vn-icone { color: var(--vn-tinta-suave); transition: color var(--vn-transicao); }

/* O radio é invisível, então o anel de foco precisa aparecer no rótulo —
   senão quem navega por teclado atravessa o seletor às cegas. */
.vn-seletor__radio:focus-visible + .vn-abas .vn-aba,
.vn-seletor__radio:focus-visible ~ .vn-abas .vn-aba { outline: none; }

/* ---- painéis ---- */
.vn-paineis { position: relative; }

/* As duas colunas se esticam à mesma altura: o destaque manda, e a sobra
   entra na foto dele (flex abaixo), nunca em espaço vazio. */
.vn-painel {
	display: none;
	grid-template-columns: 1.7fr 1fr;
	gap: 26px;
	align-items: stretch;
}

/* A ligação entre cada rádio, sua aba e seu painel. Seis pares cobrem o
   catálogo com folga; acomodação a mais que isso não cabe num seletor. */
.vn-seletor__radio:nth-of-type(1):checked ~ .vn-paineis .vn-painel:nth-child(1),
.vn-seletor__radio:nth-of-type(2):checked ~ .vn-paineis .vn-painel:nth-child(2),
.vn-seletor__radio:nth-of-type(3):checked ~ .vn-paineis .vn-painel:nth-child(3),
.vn-seletor__radio:nth-of-type(4):checked ~ .vn-paineis .vn-painel:nth-child(4),
.vn-seletor__radio:nth-of-type(5):checked ~ .vn-paineis .vn-painel:nth-child(5),
.vn-seletor__radio:nth-of-type(6):checked ~ .vn-paineis .vn-painel:nth-child(6) {
	display: grid;
}

.vn-seletor__radio:nth-of-type(1):checked ~ .vn-abas .vn-aba:nth-child(1),
.vn-seletor__radio:nth-of-type(2):checked ~ .vn-abas .vn-aba:nth-child(2),
.vn-seletor__radio:nth-of-type(3):checked ~ .vn-abas .vn-aba:nth-child(3),
.vn-seletor__radio:nth-of-type(4):checked ~ .vn-abas .vn-aba:nth-child(4),
.vn-seletor__radio:nth-of-type(5):checked ~ .vn-abas .vn-aba:nth-child(5),
.vn-seletor__radio:nth-of-type(6):checked ~ .vn-abas .vn-aba:nth-child(6) {
	background: var(--vn-verde);
	color: #fff;
}

.vn-seletor__radio:nth-of-type(1):checked ~ .vn-abas .vn-aba:nth-child(1) .vn-icone,
.vn-seletor__radio:nth-of-type(2):checked ~ .vn-abas .vn-aba:nth-child(2) .vn-icone,
.vn-seletor__radio:nth-of-type(3):checked ~ .vn-abas .vn-aba:nth-child(3) .vn-icone,
.vn-seletor__radio:nth-of-type(4):checked ~ .vn-abas .vn-aba:nth-child(4) .vn-icone,
.vn-seletor__radio:nth-of-type(5):checked ~ .vn-abas .vn-aba:nth-child(5) .vn-icone,
.vn-seletor__radio:nth-of-type(6):checked ~ .vn-abas .vn-aba:nth-child(6) .vn-icone {
	color: #fff;
}

.vn-seletor__radio:focus-visible ~ .vn-abas .vn-aba:nth-child(1),
.vn-seletor__radio:nth-of-type(1):focus-visible ~ .vn-abas .vn-aba:nth-child(1),
.vn-seletor__radio:nth-of-type(2):focus-visible ~ .vn-abas .vn-aba:nth-child(2),
.vn-seletor__radio:nth-of-type(3):focus-visible ~ .vn-abas .vn-aba:nth-child(3),
.vn-seletor__radio:nth-of-type(4):focus-visible ~ .vn-abas .vn-aba:nth-child(4),
.vn-seletor__radio:nth-of-type(5):focus-visible ~ .vn-abas .vn-aba:nth-child(5),
.vn-seletor__radio:nth-of-type(6):focus-visible ~ .vn-abas .vn-aba:nth-child(6) {
	outline: 3px solid var(--vn-verde-forte);
	outline-offset: 2px;
}

/* ---- o card em destaque ---- */
.vn-destaque {
	display: flex;
	flex-direction: column;
	background: var(--vn-branco);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(20, 41, 79, .06), 0 20px 44px rgba(20, 41, 79, .10);
}

.vn-destaque__foto {
	position: relative;
	flex: 1;
	min-height: 0;
	aspect-ratio: 16 / 11;
	background: var(--vn-areia-escura);
}
.vn-destaque__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Sem o degradê a legenda branca some sobre lençol claro — e é justamente
   nessa faixa que ficam o nome e a capacidade do quarto. */
.vn-destaque__foto::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 62%;
	background: linear-gradient(180deg, rgba(20, 41, 79, 0) 0%, rgba(20, 41, 79, .78) 100%);
}

.vn-destaque__fita {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 2;
	background: var(--vn-verde);
	color: #fff;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 8px 15px;
	border-radius: 8px;
}

.vn-destaque__legenda {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	padding: 26px 28px 24px;
	color: #fff;
}
.vn-destaque__legenda h3 {
	color: #fff;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	margin: 0 0 6px;
}
.vn-destaque__legenda p {
	margin: 0 0 14px;
	color: rgba(255, 255, 255, .9);
	font-size: 1rem;
}

.vn-destaque__marcas { display: flex; flex-wrap: wrap; gap: 10px; }
.vn-destaque__marcas span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .26);
	backdrop-filter: blur(4px);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: .87rem;
	font-weight: 600;
}

/* Duas colunas, não três: com preço e botão soltos no grid, cada um puxava
   a largura que queria e sobravam 207px para as quatro comodidades — que
   então quebravam em duas linhas cada. Agrupados, o bloco pede o que precisa
   e o resto é da lista. */
.vn-destaque__base {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 20px;
	align-items: center;
	padding: 22px 24px 24px;
}

/* O preço se alinha ao BOTÃO, não ao bloco botão+link: com os dois no mesmo
   trilho do grid, "R$ 190" e "Reservar" ficam na mesma linha, e o "Ver todas
   as fotos" pendura embaixo do botão sem empurrar nada. */
.vn-destaque__fechamento {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	justify-content: end;
	column-gap: 18px;
	row-gap: 8px;
}
.vn-destaque__fechamento .vn-btn { white-space: nowrap; }
.vn-destaque__fotos { grid-column: 2; justify-self: center; }

.vn-destaque__itens {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 9px 22px;
	font-size: .91rem;
}
.vn-destaque__itens li { white-space: nowrap; }
.vn-destaque__itens li { display: flex; align-items: center; gap: 9px; color: var(--vn-tinta-suave); }
.vn-destaque__itens .vn-icone { color: var(--vn-verde); stroke-width: 2.4; }

.vn-destaque__preco {
	margin: 0;
	padding-left: 18px;
	border-left: 1px solid var(--vn-linha);
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.vn-destaque__preco small {
	display: block;
	font-size: .84rem;
	color: var(--vn-tinta-suave);
	margin-bottom: 2px;
}
.vn-destaque__preco strong {
	font-size: 1.85rem;
	font-weight: 700;
	color: var(--vn-escuro);
	letter-spacing: -.01em;
}
.vn-destaque__preco span { font-size: .85rem; color: var(--vn-tinta-suave); }

.vn-destaque__fotos {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	font-size: .89rem;
	font-weight: 600;
	color: var(--vn-azul);
	text-decoration: none;
}
.vn-destaque__fotos:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- a coluna de outras opções ----
   O topo da coluna é o topo do destaque, e o pé é o pé: os três cartões
   dividem a altura em partes iguais. O título "Outras opções" fica só para o
   leitor de tela — visível, ele empurrava a coluna 60px para baixo e nada
   mais se alinhava. */
.vn-outras { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.vn-outras__titulo {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.vn-outra {
	flex: 1 1 0;
	min-height: 0;
	display: grid;
	grid-template-columns: 38% 1fr;
	background: var(--vn-branco);
	border: 1px solid var(--vn-linha);
	border-radius: 16px;
	overflow: hidden;
	transition: transform var(--vn-transicao), box-shadow var(--vn-transicao);
}
.vn-outra:hover { transform: translateY(-2px); box-shadow: var(--vn-sombra); }

.vn-outra__foto { background: var(--vn-areia-escura); }
.vn-outra__foto img { width: 100%; height: 100%; object-fit: cover; }

.vn-outra__corpo { padding: 18px 20px; display: flex; flex-direction: column; }
.vn-outra__corpo h4 {
	margin: 0 0 4px;
	font-size: 1.16rem;
	font-weight: 700;
	color: var(--vn-escuro);
	font-family: var(--vn-display);
}
.vn-outra__cap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: .87rem;
	color: var(--vn-tinta-suave);
}
.vn-outra__cap .vn-icone { color: var(--vn-tinta-suave); }

.vn-outra__preco {
	margin: 0 0 8px;
	padding-top: 12px;
	border-top: 1px solid var(--vn-linha);
	font-variant-numeric: tabular-nums;
}
.vn-outra__preco strong { font-size: 1.45rem; font-weight: 700; color: var(--vn-escuro); }
.vn-outra__preco span { font-size: .82rem; color: var(--vn-tinta-suave); }

.vn-outra__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	min-height: 32px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--vn-azul);
	text-decoration: none;
}
.vn-outra__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- a faixa de garantias ---- */
.vn-quartos-nota {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 30px 0 0;
	padding: 18px 26px;
	background: var(--vn-escuro);
	border-radius: 14px;
	color: rgba(255, 255, 255, .92);
	font-size: .95rem;
	font-weight: 500;
}
.vn-quartos-nota .vn-icone { color: #25D366; }
.vn-quartos-nota i { color: rgba(255, 255, 255, .4); font-style: normal; }

/* ---- telas menores ---- */
@media (max-width: 1080px) {
	.vn-painel { grid-template-columns: 1fr; }
	.vn-outras { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (max-width: 860px) {
	.vn-destaque__base { grid-template-columns: 1fr; gap: 18px; }
	.vn-destaque__preco {
		padding-left: 0;
		padding-top: 16px;
		border-left: 0;
		border-top: 1px solid var(--vn-linha);
		text-align: left;
	}
	.vn-destaque__fechamento { grid-template-columns: 1fr; justify-content: stretch; row-gap: 14px; }
	.vn-destaque__fechamento .vn-btn { width: 100%; }
	.vn-destaque__fotos { grid-column: 1; }
	.vn-abas { display: flex; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
	.vn-aba { padding: 0 16px; }
}

@media (max-width: 640px) {
	.vn-outras { grid-template-columns: 1fr; }
	.vn-outra { grid-template-columns: 34% 1fr; }
	.vn-destaque__itens { grid-template-columns: 1fr; }

	/* A legenda é ancorada no rodapé da foto e cresce para cima. No celular,
	   com o título grande e as marcas empilhadas, ela subia até cobrir a foto
	   inteira — o hóspede via texto onde deveria ver o quarto. Foto mais alta
	   e legenda mais contida devolvem a imagem. */
	.vn-destaque__foto { aspect-ratio: 1 / 1; }
	.vn-destaque__legenda { padding: 18px 18px 16px; }
	.vn-destaque__legenda h3 { font-size: 1.34rem; margin-bottom: 4px; }
	.vn-destaque__legenda p { font-size: .92rem; margin-bottom: 10px; }
	.vn-destaque__marcas { gap: 7px; }
	.vn-destaque__marcas span { font-size: .78rem; padding: 6px 11px; }
	.vn-destaque__base { padding: 18px 18px 20px; }
}

/* =========================================================================
   22. Lightbox — a galeria em modal

   Um <dialog> nativo: foco preso, Esc fecha, fundo escuro de graça. As setas
   do teclado navegam; clicar no escuro fecha.
   ========================================================================= */
.vn-lightbox {
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.vn-lightbox[open] {
	display: grid;
	place-items: center;
}
.vn-lightbox::backdrop { background: rgba(4, 15, 31, .93); }

.vn-lightbox__quadro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 0;
	max-width: min(90vw, 1240px);
}
.vn-lightbox__quadro img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	border-radius: 12px;
	outline: 1px solid rgba(255, 255, 255, .14);
	outline-offset: -1px;
	box-shadow: 0 40px 120px rgba(0, 0, 0, .5);
}
.vn-lightbox__legenda {
	display: flex;
	align-items: baseline;
	gap: 14px;
	color: rgba(255, 255, 255, .92);
	font-size: .95rem;
	font-weight: 600;
}
.vn-lightbox__contador {
	font-family: var(--vn-mono);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--vn-amarelo);
}

.vn-lightbox__botao {
	position: fixed;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 50%;
	background: rgba(255, 255, 255, .10);
	color: #fff;
	font-size: 1.05rem;
	cursor: pointer;
	transition: background var(--vn-transicao), transform var(--vn-transicao);
	touch-action: manipulation;
}
.vn-lightbox__botao:hover { background: rgba(255, 255, 255, .22); }
.vn-lightbox__botao:active { transform: scale(.94); }
.vn-lightbox__botao:focus-visible { outline: 3px solid var(--vn-amarelo); outline-offset: 2px; }

.vn-lightbox__botao--fechar { top: 22px; right: 22px; }
.vn-lightbox__botao--ant { left: 22px; top: 50%; transform: translateY(-50%); }
.vn-lightbox__botao--prox { right: 22px; top: 50%; transform: translateY(-50%); }
.vn-lightbox__botao--ant .vn-icone { transform: rotate(180deg); }
.vn-lightbox__botao--ant:active { transform: translateY(-50%) scale(.94); }
.vn-lightbox__botao--prox:active { transform: translateY(-50%) scale(.94); }

@media (max-width: 640px) {
	.vn-lightbox__quadro { max-width: 94vw; }
	.vn-lightbox__quadro img { max-height: 66vh; }
	.vn-lightbox__botao { width: 44px; height: 44px; }
	.vn-lightbox__botao--ant { left: 12px; top: auto; bottom: 22px; transform: none; }
	.vn-lightbox__botao--prox { right: 12px; top: auto; bottom: 22px; transform: none; }
	.vn-lightbox__botao--ant:active,
	.vn-lightbox__botao--prox:active { transform: scale(.94); }
}