:root {
	/* Brand tokens reconciled against /app/design-system/ (2026-07-29) — the  */
	/* official, pre-built design system for Sonhar Temporada. Exact values   */
	/* pulled from design-system/tokens.json and assets/tokens.css. Role      */
	/* mapping preserved from the existing plugin usage, which already        */
	/* matched the spec's separation: --agencia-accent (gold) = "secondary"   */
	/* in the official taxonomy (offers/ratings/warmth — buttons, badges,     */
	/* stats), --agencia-teal = "accent" in the official taxonomy (trust/     */
	/* links/information — trust icons, footer/nav hovers). Names kept as-is  */
	/* to avoid a site-wide rename; only the hex values changed to the exact  */
	/* official scale steps. Body font switched to Inter per spec (was        */
	/* Montserrat); Lora added as an editorial accent reserved exclusively    */
	/* for destination-card titles, per style-guide.md.                      */
	--agencia-primary: #A6332E;        /* tokens.json primary.500 */
	--agencia-primary-dark: #3F1210;   /* primary.900 — footer/topbar/immersive bg, matches prior usage */
	--agencia-primary-light: #C15550;  /* primary.400 */
	--agencia-accent: #E8A33D;         /* secondary.500 — offers/ratings/CTAs (official "secondary") */
	--agencia-accent-dark: #C6821F;    /* secondary.600 — hover/active of the above */
	--agencia-accent-soft: #FBEDD6;    /* secondary.100 — pale tint backgrounds */
	--agencia-teal: #2B6E78;           /* accent.500 — trust/links/information (official "accent") */
	--agencia-bg-light: #FBF0EF;       /* primary.50 */
	--agencia-bg-soft: #F5DEDC;        /* primary.100 */
	--agencia-border: #E4D8D5;         /* neutral.200 */
	--agencia-muted: #6B5652;          /* neutral.600 — warm gray, not cool gray, per style guide */
	--agencia-text: #241A18;           /* neutral.900 / text.primary */
	--agencia-radius: 14px;            /* alias of radius.medium — see scale below for other steps */
	--agencia-shadow: 0 10px 30px rgba(36, 26, 24, 0.10); /* retinted neutral per shadow scale, same size as before */
	--agencia-font-heading: 'Poppins', sans-serif;
	--agencia-font-body: 'Inter', sans-serif;
	--agencia-font-serif: 'Lora', serif; /* editorial accent — destination-card titles ONLY, see style-guide.md */

	/* Radius scale (tokens.json → radius) */
	--agencia-radius-small: 8px;
	--agencia-radius-medium: 14px;
	--agencia-radius-large: 20px;
	--agencia-radius-xl: 28px;
	--agencia-radius-pill: 999px;

	/* Shadow scale (tokens.json → shadow) */
	--agencia-shadow-small: 0 1px 2px rgba(36, 26, 24, 0.06);
	--agencia-shadow-medium: 0 4px 12px rgba(36, 26, 24, 0.08);
	--agencia-shadow-large: 0 12px 24px rgba(36, 26, 24, 0.10);
	--agencia-shadow-xl: 0 24px 48px rgba(36, 26, 24, 0.12);
	--agencia-shadow-floating: 0 20px 40px rgba(166, 51, 46, 0.18); /* brand-tinted — reserved for search widget only, per principles.md */
}

/* Box-sizing reset — the active theme doesn't set this globally, so any
   element in this stylesheet using `width: 100%` together with padding
   and/or a border (buttons, inputs, cards) renders wider than its parent's
   content box by exactly that padding+border, and visually spills outside
   the parent (e.g. the "Fazer reserva" button overflowing the calendar
   card). Scoped to the plugin's own containers, not `*`, to avoid touching
   unrelated theme/page-builder markup on the same page. */
.agencia-home,
.agencia-home *,
.agencia-viagens-archive,
.agencia-viagens-archive *,
.agencia-imoveis-archive,
.agencia-imoveis-archive *,
.agencia-viagem-single,
.agencia-viagem-single *,
.agencia-login,
.agencia-login *,
.agencia-minhas-reservas-card,
.agencia-minhas-reservas-card *,
.agencia-obrigado,
.agencia-obrigado * {
	box-sizing: border-box;
}

/* Layout base */

.agencia-home,
.agencia-viagens-archive,
.agencia-imoveis-archive,
.agencia-viagem-single,
.agencia-login,
.agencia-minhas-reservas-card,
.agencia-obrigado {
	font-family: var(--agencia-font-body);
	color: var(--agencia-text);
}

.agencia-home h2,
.agencia-home h3,
.agencia-viagens-archive h1,
.agencia-viagens-archive h2,
.agencia-imoveis-archive h1,
.agencia-imoveis-archive h2,
.agencia-viagem-single h2,
.agencia-viagem-single h3,
.agencia-login h1,
.agencia-obrigado h2 {
	font-family: var(--agencia-font-heading);
	color: var(--agencia-primary);
	font-weight: 600;
}

/* Neutralize the active theme's block-template wrapper on the plugin's
   shortcode pages (Home/Login/Minhas Viagens/Obrigado): hides the theme's
   own page-title block and un-constrains the content column so full-bleed
   sections (hero, banners) can span the viewport. */

.agencia-shortcode-page .wp-block-post-title {
	display: none;
}

.agencia-shortcode-page .entry-content > *:not(.agencia-login) {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* These wrappers carry inline margin/padding from the theme's block styles
   (e.g. style="padding-top:..."), which only !important can override. */
.agencia-shortcode-page main.wp-block-group {
	margin-top: 0 !important;
}

.agencia-shortcode-page main > .wp-block-group {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Even hidden (display:none), .wp-block-post-title is still the 1st DOM
   child, which bumps .entry-content into the 2nd-child slot and makes it
   inherit the theme's default margin-block-start: 1.2rem — the source of
   the visible gap between the header and the hero. */
.agencia-shortcode-page .entry-content {
	margin-block-start: 0 !important;
}

/* `100vw` includes the vertical scrollbar's own width in most browsers, so
   the full-bleed rule below overflows past the visible viewport edge by the
   scrollbar's width (~15-17px) whenever the page is tall enough to show one
   — producing a phantom horizontal scrollbar at the bottom of the page.
   Clipping it on body is the standard, side-effect-free fix: the overshoot
   is by definition just past the visible edge, so nothing visible is cut.
   Applied to body generally (not just .agencia-shortcode-page) because
   single-viagem.php and other custom templates also use the 100vw
   full-bleed technique below and need the same protection. */
body {
	overflow-x: hidden;
}

.agencia-viagem-single__header,
.agencia-viagem-single__esperar,
.agencia-institucional,
.agencia-viagem-single__reserva,
.agencia-viagem-single__precos,
.agencia-viagem-single__depoimentos {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Buttons */

.agencia-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.85rem 1.75rem;
	border-radius: 999px;
	font-family: var(--agencia-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.agencia-btn--primary,
button.agencia-btn--primary {
	background: var(--agencia-primary);
	color: #fff;
}

.agencia-btn--primary:hover,
button.agencia-btn--primary:hover {
	background: var(--agencia-primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(198, 130, 31, 0.35);
	color: #fff;
}

.agencia-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}

.agencia-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}

.agencia-btn--small {
	padding: 0.5rem 1.1rem;
	font-size: 0.85rem;
}

.agencia-btn--dark {
	background: var(--institucional-navy, #A6332E);
	color: #fff;
}

.agencia-btn--dark:hover {
	background: #3F1210;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(166, 51, 46, 0.3);
	color: #fff;
}

.agencia-btn--outline {
	background: #fff;
	color: var(--agencia-primary);
	border-color: var(--agencia-border);
}

.agencia-btn--outline:hover {
	background: var(--agencia-bg-soft);
	color: var(--agencia-primary);
}

.agencia-btn--outline svg {
	width: 16px;
	height: 16px;
}

/* Hero (home) */

@keyframes agencia-hero-in {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.agencia-hero {
	position: relative;
	background: #fff;
	padding: 2.5rem 0 3rem;
	overflow: hidden;
}

/* From 900px up, .agencia-hero__features floats via position: absolute
   (see its own rules below) instead of sitting in normal flow, so it no
   longer pushes .agencia-hero's own height out to make room for itself.
   This padding-bottom is what actually reserves that room now — sized to
   fit the card's floating overlap plus a clean gap before the next
   section. */
@media (min-width: 900px) {
	.agencia-hero {
		padding-bottom: 7.5rem;
	}
}

.agencia-hero__container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1.5rem;
	position: relative;
	z-index: 1;
}

@media (min-width: 1024px) {
	.agencia-hero__container {
		padding: 0 5rem;
	}
}

/* Two-column layout: the search card floats on top of, and overlaps, the
   left edge of an inset (not full-bleed) rounded photo — mirrors the
   Airbnb-style reference the client asked to match. On mobile the two
   stack vertically instead of overlapping. */

/* Row-based flex layout (not absolute positioning) so the container always
   grows to fit whichever child — card or photo — is taller. This keeps the
   card's overlap purely visual (via negative margin) without it ever
   floating free of the layout's height and colliding with the content
   that follows (the "Mais procurados" chips). */

.agencia-hero__layout {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* From 900px up, the photo fills the layout box exactly (inset: 0) and the
   search card — still a normal in-flow item — is what actually determines
   that box's height (via min-height, or by growing past it if the card's
   own content needs more room). This keeps the photo genuinely full-width/
   full-height of the hero without ever letting the card overflow past it. */

@media (min-width: 900px) {
	.agencia-hero__layout {
		gap: 0;
		min-height: 520px;
		justify-content: center;
		align-items: flex-start;
		/* Stop being .agencia-hero__media's containing block. With position
		   unset here, the photo's `position: absolute` below resolves
		   against the next positioned ancestor up instead: .agencia-hero
		   itself, which is already the section's true full width (it has
		   no side padding/max-width of its own). That's what lets the photo
		   go edge-to-edge with plain inset:0 instead of viewport units. */
		position: static;
	}
}

@media (min-width: 1280px) {
	.agencia-hero__layout {
		min-height: 560px;
	}
}

.agencia-hero__media {
	position: relative;
	width: 100%;
	height: 320px;
	border-radius: var(--agencia-radius-xl);
	overflow: hidden;
	box-shadow: var(--agencia-shadow-medium);
	animation: agencia-hero-in 0.8s ease both;
}

/* True full-bleed, root-cause version (no viewport units): the containing
   block for this absolute box is .agencia-hero (see .agencia-hero__layout's
   `position: static` override above), which is already exactly the
   section's full width/height with no padding of its own — so a plain
   inset of 0 on all four sides lands exactly on the section's true edges.
   This replaces the previous `width:100vw; margin-left:-50vw;` hack, which
   depended on the viewport width including the scrollbar (vw is spec'd
   that way), causing a few pixels of real overflow that only *looked* fine
   because `body { overflow-x: hidden; }` was silently clipping it. Because
   .agencia-hero's own top padding (2.5rem) does not count against an
   absolutely positioned child (the containing block is the padding EDGE,
   not the padded content area), top:0 already lands flush under the
   header with no extra offset needed. */

@media (min-width: 900px) {
	.agencia-hero__media {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		height: auto;
		border-radius: 0;
		box-shadow: none;
		z-index: 0;
	}
}

.agencia-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.agencia-hero__media:hover .agencia-hero__image {
	transform: scale(1.02);
}

/* Search card */

.agencia-hero-busca-card {
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: var(--agencia-radius-xl);
	box-shadow: 0 20px 40px rgba(36, 26, 24, 0.16);
	padding: 1.5rem;
	width: 100%;
	animation: agencia-hero-in 0.7s ease 0.1s both;
}

/* From 900px up, the photo becomes full-width (absolutely positioned,
   see .agencia-hero__media) and the search card stays in normal flex
   flow as the layout's only in-flow item, so it drives the container's
   height while floating visually on top of the photo behind it. */

@media (min-width: 900px) {
	.agencia-hero-busca-card {
		width: 340px;
		/* Guarantees clearance below the card even when its content makes
		   it taller than .agencia-hero__layout's min-height (in which case
		   the card itself determines the layout's height) — without this,
		   the floating feature strip's negative margin-top would overlap
		   the card's own bottom (e.g. the Buscar button) instead of just
		   overlapping the photo behind it. */
		margin-bottom: 3rem;
	}
}

@media (min-width: 1280px) {
	.agencia-hero-busca-card {
		width: 380px;
	}
}

.agencia-hero-busca-card__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--agencia-primary);
	font-family: var(--agencia-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
}

.agencia-hero-busca-card__title {
	color: var(--agencia-text);
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 0.6rem;
}

.agencia-hero-busca-card__subtitle {
	color: var(--agencia-muted);
	font-size: 0.88rem;
	line-height: 1.55;
	margin: 0 0 1.1rem;
}

/* Search form — vertically stacked fields inside the card */

.agencia-hero-busca {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.agencia-hero-busca__linha {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
}

.agencia-hero-busca__linha.agencia-hero-busca__linha--local {
	grid-template-columns: 1.8fr 1fr;
}

.agencia-hero-busca__campo {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	text-align: left;
}

.agencia-hero-busca__campo--full {
	width: 100%;
}

.agencia-hero-busca__campo label {
	font-family: var(--agencia-font-body);
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--agencia-muted);
}

.agencia-hero-busca__campo-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.agencia-hero-busca__campo-icon {
	position: absolute;
	left: 0.85rem;
	width: 18px;
	height: 18px;
	color: var(--agencia-muted);
	pointer-events: none;
	flex-shrink: 0;
}

.agencia-hero-busca__campo input {
	width: 100%;
	min-width: 0;
	border: 1px solid var(--agencia-border);
	border-radius: calc(var(--agencia-radius) - 4px);
	padding: 0.6rem 0.75rem 0.6rem 2.3rem;
	font-family: var(--agencia-font-body);
	font-size: 0.9rem;
	color: var(--agencia-text);
	background-color: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.agencia-hero-busca__campo input:focus {
	outline: none;
	border-color: var(--agencia-primary);
	box-shadow: 0 0 0 3px rgba(166, 51, 46, 0.18);
}

.agencia-hero-busca__campo-wrap:focus-within .agencia-hero-busca__campo-icon {
	color: var(--agencia-primary);
}

/* Os inputs de Check-in/Checkout são `type="date"` nativos, que já
   desenham seu próprio ícone de calendário do lado direito. Como também
   desenhamos um ícone customizado à esquerda (mesmo padrão dos outros
   campos), o resultado ficava com dois ícones de calendário — escondemos
   o indicador nativo (mantendo o campo clicável/funcional) para sobrar só
   o nosso. */
.agencia-hero-busca__campo input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
}

.agencia-hero-busca__btn {
	width: 100%;
	height: 46px;
	margin-top: 0.4rem;
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.agencia-hero-busca__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(166, 51, 46, 0.4);
}

.agencia-hero-busca__btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.agencia-hero__media,
	.agencia-hero-busca-card {
		animation: none;
	}

	.agencia-hero__image {
		transition: none;
	}
}

@media (max-width: 899px) {
	.agencia-hero-busca__linha {
		grid-template-columns: 1fr 1fr;
	}
}

/* Check-in/Checkout no mobile: mantidos lado a lado (igual Localização/
   Hóspedes). O ícone nativo do calendário já é escondido em todas as
   larguras (ver regra do ::-webkit-calendar-picker-indicator acima), então
   o ícone decorativo (SVG) pode continuar visível aqui sem duplicar nada —
   só reduzimos um pouco o padding/fonte para os segmentos do input
   (dd/mm/aaaa) caberem confortavelmente nessa largura. */
@media (max-width: 640px) {
	.agencia-hero-busca__linha--datas input {
		padding-right: 0.4rem;
		font-size: 0.82rem;
	}

	.agencia-hero-busca__linha--datas {
		gap: 0.4rem;
	}
}

@media (max-width: 560px) {
	.agencia-hero {
		padding: 1.5rem 0 2rem;
	}

	.agencia-hero-busca-card {
		padding: 1.5rem;
	}

	.agencia-hero__media {
		height: 260px;
	}
}

/* Hero photo overlay: destination title + subtitle + trust badges */

.agencia-hero__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 4rem 1.75rem 3rem;
	background: linear-gradient(180deg, rgba(20, 12, 10, 0) 0%, rgba(20, 12, 10, 0.7) 60%, rgba(20, 12, 10, 0.85) 100%);
	color: #fff;
	z-index: 2;
}

/* The search card floats over the full-bleed photo, but the card itself
   still lives inside the padded/centered .agencia-hero__container, while
   .agencia-hero__overlay's left edge is now the true viewport edge (see
   full-bleed .agencia-hero__media above). So the overlay's padding-left
   has to cover the FULL chain of offsets between the viewport edge and
   the card's right edge:
     - the theme's global content padding wrapper (.entry-content.alignfull,
       confirmed 50px each side) — this insets .agencia-hero__container
       itself and is easy to miss since it lives outside this component;
     - .agencia-hero__container's own re-centering offset once the
       viewport passes container-width + theme-padding of 1540px (the
       container's 1440px max-width only kicks in once the space left
       after the theme's 50px+50px padding exceeds 1440px);
     - the container's own side padding (1.5rem/5rem);
     - the card's width (380px/420px);
     - a fixed 40px breathing-room gap so text never touches the card.
   A small +8px safety buffer is added throughout to absorb scrollbar
   width rounding (confirmed empirically: media's full-bleed edge lands
   ~7.5px short of the true viewport edge at some widths). */

@media (min-width: 900px) {
	.agencia-hero__overlay {
		/* 50 (theme) + 24 (container) + 380 (card) + 40 (gap) + 8 (buffer) */
		padding-left: 502px;
	}
}

@media (min-width: 1024px) {
	.agencia-hero__overlay {
		/* container padding bumps to 5rem (80px) here: 50+80+380+40+8 */
		padding-left: 558px;
	}
}

@media (min-width: 1280px) {
	.agencia-hero__overlay {
		/* card bumps to 420px here: 50+80+420+40+8 */
		padding-left: 598px;
	}
}

@media (min-width: 1540px) {
	.agencia-hero__overlay {
		/* container hits its 1440px max-width once (100vw - 100px theme
		   padding) exceeds 1440px, i.e. at 1540px viewport — from here the
		   container re-centers, so the offset grows by half the excess
		   viewport width instead of staying flat. */
		padding-left: calc(50vw - 172px);
	}
}

.agencia-hero__overlay-title {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 0.4rem;
	color: #fff;
}

.agencia-hero__overlay-subtitle {
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0 0 1.1rem;
	color: rgba(255, 255, 255, 0.9);
	max-width: 480px;
}

.agencia-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agencia-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--agencia-font-body);
	font-weight: 600;
	font-size: 0.82rem;
	color: #fff;
}

.agencia-hero__badge svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

@media (max-width: 560px) {
	.agencia-hero__overlay {
		padding: 3rem 1.25rem 2.25rem;
	}

	.agencia-hero__badges {
		gap: 0.5rem 1rem;
	}

	.agencia-hero__badge {
		font-size: 0.76rem;
	}
}

/* Floating feature strip, overlapping the hero's bottom edge */

.agencia-hero__features {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0.875rem 0 0;
	background: #fff;
	border-radius: var(--agencia-radius-xl);
	box-shadow: var(--agencia-shadow-medium);
	padding: 1.6rem 1rem;
	animation: agencia-hero-in 0.8s ease 0.15s both;
}

/* At >=900px .agencia-hero__media becomes position:absolute and its
   containing block is .agencia-hero__container (the nearest positioned
   ancestor once .agencia-hero__layout is unset — see .agencia-hero__layout's
   note above). A block-level .agencia-hero__features sitting in normal flow
   right after .agencia-hero__layout inside that same container was making
   .agencia-hero__container (and therefore the photo, which stretches to
   match it) grow to include the card's own height + gap — so the photo
   silently grew taller every time the card moved, dragging the photo's
   bottom-anchored text overlay down with it and re-creating the same
   overlap no matter how far the card was pushed. Taking the card out of
   flow (position: absolute, anchored to the same .agencia-hero__container)
   decouples the two completely: the photo now matches only the search
   card's real height, and the feature card floats independently below it
   with a small, controlled overlap. */

@media (min-width: 900px) {
	.agencia-hero__features {
		position: absolute;
		left: 1.5rem;
		right: 1.5rem;
		top: 100%;
		margin-top: -1.25rem;
	}
}

@media (min-width: 1024px) {
	.agencia-hero__features {
		left: 5rem;
		right: 5rem;
	}
}

.agencia-hero__feature {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 1.2rem;
	border-radius: var(--agencia-radius-lg);
	transition: background-color 0.25s ease, transform 0.25s ease;
}

/* Divider between cards: a short, vertically-centered line instead of a
   full-height border, so it reads as a subtle separator rather than a
   harsh rule — and it fades away on the item right after a hovered card
   so the hover highlight doesn't look boxed-in. */
.agencia-hero__feature::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 60%;
	background: var(--agencia-border);
}

.agencia-hero__feature:first-child::before {
	display: none;
}

.agencia-hero__feature:hover {
	background-color: var(--agencia-bg-soft);
}

.agencia-hero__feature:hover .agencia-hero__feature-icon {
	background: var(--agencia-primary);
	color: #fff;
	transform: scale(1.06);
}

.agencia-hero__feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--agencia-bg-soft);
	color: var(--agencia-primary);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.agencia-hero__feature-icon svg {
	width: 24px;
	height: 24px;
}

.agencia-hero__feature-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.agencia-hero__feature-text strong {
	font-family: var(--agencia-font-body);
	font-size: 0.94rem;
	font-weight: 700;
	color: var(--agencia-text);
	display: block;
}

.agencia-hero__feature-text small {
	font-size: 0.78rem;
	color: var(--agencia-muted);
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.agencia-hero__feature,
	.agencia-hero__feature-icon {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.agencia-hero__features {
		animation: none;
	}
}

@media (max-width: 899px) {
	.agencia-hero__features {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 1.2rem;
		margin-top: 1.375rem;
	}

	/* 2-column grid: the left-edge divider only makes sense on the right
	   column now (between the two cards in the same row). */
	.agencia-hero__feature::before {
		display: none;
	}

	.agencia-hero__feature:nth-child(even)::before {
		display: block;
	}
}

/* No celular, os 4 cards viravam uma lista empilhada verticalmente (ocupando
   bastante altura de rolagem). Preferimos mantê-los na horizontal, como no
   desktop/tablet: uma faixa com scroll lateral por gesto (padrão já usado
   nos filtros de comodidades), cada card com largura fixa para não
   espremer o texto, e "scroll-snap" para o swipe parar alinhado em cada
   card. */
@media (max-width: 560px) {
	/* Pedido explícito: mostrar os 4 itens de uma vez, sem scroll lateral.
	   Isso só cabe encolhendo tudo (ícone, fonte, espaçamento) e trocando o
	   layout de "ícone ao lado do texto" (largo) para "ícone em cima do
	   texto" (estreito), em grade de 4 colunas — sem o card branco (já
	   removido antes a pedido), sem divisórias e sem os degradês de fade,
	   que existiam só para sinalizar conteúdo escondido pelo scroll. */
	.agencia-hero__features {
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		overflow-x: visible;
		margin-top: 1.375rem;
		padding: 0 1.25rem;
		gap: 0.4rem;
	}

	.agencia-hero__feature {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		width: auto;
		gap: 0.4rem;
		padding: 0;
	}

	.agencia-hero__feature-icon {
		width: 34px;
		height: 34px;
	}

	.agencia-hero__feature-icon svg {
		width: 16px;
		height: 16px;
	}

	.agencia-hero__feature-text {
		align-items: center;
	}

	.agencia-hero__feature-text strong {
		font-size: 0.68rem;
		line-height: 1.15;
	}

	/* Com 4 itens espremidos numa grade estreita, a descrição some para
	   sobrar largura pro título — do jeito que estava (ícone + título +
	   descrição lado a lado) não tinha como encolher o suficiente para
	   caber os 4 sem virar ilegível. */
	.agencia-hero__feature-text small {
		display: none;
	}

	.agencia-hero__feature::before,
	.agencia-hero__features::before,
	.agencia-hero__features::after {
		display: none !important;
	}
}

/* ==========================================================================
   Hero mobile (só home, <900px): header transparente sobre a foto full-
   bleed, badge de destino, e card de busca em "linhas-resumo" que abrem
   bottom sheets customizados (localização/datas/hóspedes) — ver
   hero-busca.js. Tudo escopado a body.agencia-home-page (ver
   TemplateLoader::add_body_class()) para não vazar para nenhuma outra
   página nem para o desktop/tablet (>=900px), que continuam exatamente
   como antes. */

@media (max-width: 899px) {
	/* Header vira uma faixa transparente sobreposta à foto, em vez de
	   sticky/opaco no topo — a foto passa a começar do topo real da
	   página (ver .agencia-hero abaixo), então tirar o header do fluxo
	   normal (position: absolute) não deixa nenhum vão em branco no
	   lugar que ele ocupava. */
	body.agencia-home-page .agencia-site-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Sobrepondo a foto (sem fundo opaco atrás), logo e ícone de menu
	   ficavam visualmente colados na borda real da tela com o padding
	   padrão (1.5rem). Aumenta esse respiro só aqui, na home mobile. */
	body.agencia-home-page .agencia-site-header__inner {
		padding: 0 2.5rem;
	}

	body.agencia-home-page .agencia-site-header__logo img {
		filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(20, 12, 10, 0.35));
	}

	body.agencia-home-page .agencia-site-header__menu {
		border-color: rgba(255, 255, 255, 0.55);
		background: rgba(255, 255, 255, 0.16);
		color: #fff;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}

	body.agencia-home-page .agencia-site-header__menu-avatar {
		background: rgba(255, 255, 255, 0.4);
	}

	/* Dropdown do menu continua um painel branco normal — só o gatilho
	   fica transparente sobre a foto. */
	body.agencia-home-page .agencia-site-header__dropdown {
		color: initial;
	}
}

@media (max-width: 899px) {
	body.agencia-home-page .agencia-hero {
		padding: 0 0 2rem;
		/* .agencia-hero tem "overflow: hidden" por padrão (regra base, não
		   específica de mobile) — isso corta os ícones da esquerda do card
		   de busca, pois o card sangra 110% mas o próprio .agencia-hero
		   continua inset pelo padding global do tema. Aqui, no mobile,
		   liberamos o overflow do hero e confiamos no "overflow-x: hidden"
		   já existente no body (ver topo do arquivo) como rede de segurança
		   contra barra de rolagem horizontal da página. */
		overflow: visible;
	}

	body.agencia-home-page .agencia-hero__container {
		padding: 0;
	}

	body.agencia-home-page .agencia-hero__layout {
		gap: 0;
	}

	/* A foto vem primeiro visualmente (mesmo com o card antes dela no
	   HTML — a ordem no DOM continua card-antes-da-foto por herdar o
	   markup do desktop) e ocupa a largura toda, colada no topo, sem
	   cantos arredondados nem sombra — o header transparente flutua por
	   cima dela.

	   width:100%/margin:0 sozinhos NÃO bastam aqui: o tema (bloco,
	   twentytwentyfive) aplica um "global padding" nas divs ancestrais
	   (.entry-content/.wp-block-group com a classe has-global-padding,
	   valor clamp(30px, 5vw, 50px) exposto na custom property
	   --wp--style--root--padding-left/-right, herdada por qualquer
	   descendente). Sem cancelar esse padding, a foto ficava "emoldurada"
	   com uma faixa branca de ~30px de cada lado no mobile, mesmo com
	   width:100% (100% de um contêiner que já está encolhido pelo
	   padding). O breakout abaixo soma esse padding de volta à largura e
	   usa margin negativa equivalente para cancelá-lo — mesma ideia do
	   hack width:100vw/margin-left:-50vw, mas sem depender de unidade vw
	   (que no desktop já se provou causar overflow horizontal real por
	   contar a scrollbar; ver comentário em .agencia-hero__media acima). */
	body.agencia-home-page .agencia-hero__media {
		order: 1;
		width: calc(100% + (2 * clamp(30px, 5vw, 50px)));
		/* Foto mais alta que antes (480px, depois 560px, depois 660px) pra
		   abrir espaço: em telas bem estreitas (~390px) o headline a 32px
		   quebra em 6 linhas (3 frases x 2 linhas cada), não 3-4 como
		   antes, e o overlay (ancorado em bottom:230px) ficava mais alto
		   que o espaço disponível, subindo por cima do header do site. */
		height: 880px;
		margin: 0 calc(-1 * clamp(30px, 5vw, 50px)) 0 calc(-1 * clamp(30px, 5vw, 50px));
		border-radius: 0;
		box-shadow: none;
	}

	/* Card de busca sobrepõe a base da foto (margem negativa) e perde o
	   texto de apresentação (título/subtítulo já aparecem no overlay da
	   própria foto) — sobra só as linhas-resumo + botão. */
	/* Agora o card fica com 90% da largura do container (menor que a foto
	   full-bleed acima dele), centralizado com margin-left/right auto. */
	body.agencia-home-page .agencia-hero-busca-card {
		order: 2;
		position: relative;
		z-index: 3;
		width: 98%;
		margin: -203px auto 0;
		/* Mais respiro nas bordas do card — ícones e botão encostados nas
		   bordas pareciam apertados. */
		padding: 0.9rem 1.1rem 1rem;
	}

	body.agencia-home-page .agencia-hero-busca-card__eyebrow,
	body.agencia-home-page .agencia-hero-busca-card__title,
	body.agencia-home-page .agencia-hero-busca-card__subtitle {
		display: none;
	}

	/* Card de busca comprimido na vertical: linhas mais rasas, ícones
	   menores, sem folga entre linha e botão. */
	body.agencia-home-page .agencia-hero-busca {
		gap: 0;
	}

	body.agencia-home-page .agencia-hero-busca__resumo-linha,
	body.agencia-home-page .agencia-hero-busca__resumo-metade {
		/* Padding vertical calibrado para que a área de toque (ícone 26px +
		   padding) chegue a ~44px de altura — mínimo recomendado (WCAG
		   2.5.5 / Material 48dp) para alvos de toque em mobile. */
		padding: 0.6rem 0.15rem;
		/* Mais respiro entre o ícone e o texto. */
		gap: 0.75rem;
	}

	body.agencia-home-page .agencia-hero-busca__resumo-divisor {
		margin: 0.35rem 0;
	}

	body.agencia-home-page .agencia-hero-busca__resumo-icon {
		width: 26px;
		height: 26px;
	}

	body.agencia-home-page .agencia-hero-busca__resumo-icon svg {
		width: 14px;
		height: 14px;
	}

	body.agencia-home-page .agencia-hero-busca__resumo-texto {
		gap: 0;
	}

	body.agencia-home-page .agencia-hero-busca__resumo-texto strong {
		font-size: 0.8rem;
	}

	body.agencia-home-page .agencia-hero-busca__resumo-texto small {
		/* 0.7rem (~11px) ficava abaixo do conforto de leitura recomendado
		   para texto secundário em mobile (~12px). */
		font-size: 0.75rem;
	}

	body.agencia-home-page .agencia-hero-busca__btn {
		/* CTA principal do card também precisa de ~44px de alvo de toque —
		   34px estava abaixo do mínimo recomendado. Margem maior o separa
		   visualmente da grade de campos acima. */
		height: 44px;
		margin-top: 0.9rem;
	}

	/* Os campos "clássicos" (inputs sempre visíveis) somem visualmente,
	   mas continuam no DOM e são enviados normalmente no submit — só as
	   novas linhas-resumo abaixo ficam visíveis/tocáveis. */
	body.agencia-home-page .agencia-hero-busca__linha {
		display: none;
	}

	body.agencia-home-page .agencia-hero-busca__resumo--grade {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	body.agencia-home-page .agencia-hero-busca__btn-label--desktop {
		display: none;
	}

	body.agencia-home-page .agencia-hero-busca__btn-label--mobile {
		display: inline;
	}

	/* Badge "RIO DE JANEIRO" (pill branca com pino) — movida pro DOM pra
	   dentro de .agencia-hero__overlay (ver HomeShortcode.php), então no
	   mobile ela deixa de flutuar perto do topo da foto e passa a ficar
	   "embaixo" junto com subtítulo/badges, presa ao mesmo bottom:110px do
	   bloco de texto. position:static cancela o absolute/top/left da regra
	   base (que ainda vale pro desktop, onde o pill continua
	   display:none/invisível — só é usado no mobile). Menor e reordenada
	   (via flex order abaixo) pra ficar depois do texto de destaque, não
	   antes — o texto vira o protagonista, o pill é só um selo pequeno. */
	body.agencia-home-page .agencia-hero__pill {
		display: inline-flex;
		position: static;
		order: 2;
		margin: 0 0 0.6rem;
		padding: 0.3rem 0.65rem 0.3rem 0.5rem;
		font-size: 0.6rem;
	}

	body.agencia-home-page .agencia-hero__pill svg {
		width: 11px;
		height: 11px;
	}

	/* Overlay vira flex column pra permitir reordenar pill/subtítulo/badges
	   independente da ordem no DOM (mantida como está pra acessibilidade/SEO
	   — o pill continua vindo primeiro no HTML). */
	body.agencia-home-page .agencia-hero__overlay {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	/* Título grande "Rio de Janeiro" sai no mobile — o pill (movido pra
	   dentro do overlay acima) já comunica o destino. */
	body.agencia-home-page .agencia-hero__overlay-title {
		display: none;
	}

	/* Com o h2 oculto, o subtítulo passa a ser o "headline" de fato no
	   mobile. Ele é dividido em dois trechos (ver HomeShortcode.php): a
	   frase de destaque, maior e com peso de título, e o complemento
	   ("prontos para sua próxima temporada"), que vira uma linha menor
	   logo abaixo — como um título + subtítulo de verdade, em vez de um
	   parágrafo corrido único. Text-shadow garante legibilidade mesmo em
	   trechos mais claros da foto. */
	body.agencia-home-page .agencia-hero__overlay-subtitle {
		font-family: var(--agencia-font-heading);
		color: #fff;
		text-shadow: 0 2px 10px rgba(20, 12, 10, 0.4);
		order: 1;
		margin: 0;
		max-width: 340px;
	}

	body.agencia-home-page .agencia-hero__overlay-subtitle-destaque {
		display: block;
		font-size: 32px;
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: -0.01em;
	}

	body.agencia-home-page .agencia-hero__overlay-subtitle-complemento {
		display: block;
		font-family: var(--agencia-font-body);
		font-size: 0.85rem;
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: normal;
		color: rgba(255, 255, 255, 0.82);
		margin-top: 0.3rem;
	}

	/* Traço curto separando o headline do resto (pill + lista) — mesma
	   disposição de um "divider" abaixo do título, dando respiro antes da
	   lista de itens. */
	body.agencia-home-page .agencia-hero__overlay-subtitle::after {
		content: '';
		display: block;
		width: 40px;
		height: 3px;
		margin-top: 0.9rem;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 999px;
	}

	/* Badges de confiança viram uma lista vertical (ícone em círculo +
	   rótulo por linha), em vez da fileira horizontal — mesma disposição
	   de uma lista de destaques empilhada abaixo do título. Sombra sutil
	   no texto pra não desaparecer contra partes mais claras da foto. */
	body.agencia-home-page .agencia-hero__badges {
		order: 3;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.45rem;
		margin-top: 0.55rem;
	}

	body.agencia-home-page .agencia-hero__badge {
		font-weight: 500;
		font-size: 0.8rem;
		gap: 0.6rem;
		text-shadow: 0 1px 6px rgba(20, 12, 10, 0.35);
	}

	body.agencia-home-page .agencia-hero__badge svg {
		box-sizing: border-box;
		width: 28px;
		height: 28px;
		padding: 7px;
		border: 1.5px solid rgba(255, 255, 255, 0.45);
		border-radius: 50%;
		flex-shrink: 0;
	}

	/* Título/subtítulo/badges de confiança mantêm a MESMA posição de antes
	   (bottom:110px) — só o texto fica ancorado aqui, o degradê escuro foi
	   desacoplado pra .agencia-hero__media::after logo abaixo, que se
	   estende bem mais pra baixo da foto (até a base, atrás do card) sem
	   arrastar o texto junto.

	   padding-left/right somam o padding do tema de volta pelo mesmo motivo
	   do pill acima: .agencia-hero__overlay é filho de .agencia-hero__media,
	   então herda o deslocamento do breakout full-bleed e precisa da mesma
	   compensação pro texto não ficar cortado na borda da tela. */
	body.agencia-home-page .agencia-hero__overlay {
		/* Bottom recuado de volta (era 150px): o headline a 32px ocupa 4
		   linhas (antes eram 2), então o bloco de texto ficou bem mais alto
		   e precisa "nascer" bem mais perto da base da foto — que por sua
		   vez cresceu (ver .agencia-hero__media acima) — pra não encostar
		   no header. */
		bottom: 230px;
		padding-top: 0.75rem;
		padding-left: calc(1.75rem + clamp(30px, 5vw, 50px));
		padding-right: calc(1.75rem + clamp(30px, 5vw, 50px));
		background: none;
	}

	/* Degradê escuro desacoplado do texto: cobre uma faixa bem maior da
	   foto (de ~38% da altura até a base, atrás inclusive da área que o
	   card de busca sobrepõe) pra dar mais contraste/profundidade, mas sem
	   mover título/subtítulo/badges — eles continuam presos ao
	   .agencia-hero__overlay acima, que não mudou de posição. z-index:1
	   fica acima da <img> (elemento estático, sempre pintado primeiro) e
	   abaixo do texto/pill (z-index:2). */
	body.agencia-home-page .agencia-hero__media::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 38%;
		bottom: 0;
		background: linear-gradient(180deg, rgba(20, 12, 10, 0) 0%, rgba(20, 12, 10, 0.6) 45%, rgba(20, 12, 10, 0.92) 100%);
		z-index: 1;
		pointer-events: none;
	}

}

@media (max-width: 560px) {
	/* Mesma compensação acima, mas usando a base menor (1.25rem) que o
	   .agencia-hero__overlay assume em telas bem estreitas (ver regra
	   correspondente sem escopo de home, logo abaixo do bloco de 900px). */
	body.agencia-home-page .agencia-hero__overlay {
		padding-left: calc(1.25rem + clamp(30px, 5vw, 50px));
		padding-right: calc(1.25rem + clamp(30px, 5vw, 50px));
	}
}

.agencia-hero-busca__btn-label--mobile {
	display: none;
}

.agencia-hero__pill {
	display: none;
	position: absolute;
	top: 96px;
	left: 1.25rem;
	z-index: 2;
	align-items: center;
	gap: 0.4rem;
	background: #fff;
	color: var(--agencia-text);
	border-radius: 999px;
	padding: 0.45rem 0.9rem 0.45rem 0.7rem;
	font-family: var(--agencia-font-body);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 6px 16px rgba(20, 12, 10, 0.22);
}

.agencia-hero__pill svg {
	width: 14px;
	height: 14px;
	color: var(--agencia-primary);
	flex-shrink: 0;
}

/* Linhas-resumo (Localização / Check-in-Check-out / Hóspedes) — cada uma
   abre um bottom sheet (ver .agencia-hero-sheet mais abaixo) via
   hero-busca.js. Escondidas por padrão (só aparecem no mobile home, ver
   media query acima). */

.agencia-hero-busca__resumo {
	display: none;
	flex-direction: column;
}

.agencia-hero-busca__resumo-linha {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 0.85rem;
	padding: 0.85rem 0.15rem;
	border: none;
	border-bottom: 1px solid var(--agencia-border);
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: var(--agencia-font-body);
	transition: background-color 0.15s ease;
}

/* Feedback de toque + foco: sem isso os campos pareciam texto estático,
   sem indicação de que são botões que abrem os bottom sheets. */
.agencia-hero-busca__resumo-linha:active,
.agencia-hero-busca__resumo-metade:active {
	background-color: var(--agencia-bg-soft);
}

.agencia-hero-busca__resumo-linha:focus-visible,
.agencia-hero-busca__resumo-metade:focus-visible {
	outline: 2px solid var(--agencia-primary);
	outline-offset: -2px;
}

.agencia-hero-busca__resumo-linha:last-of-type {
	border-bottom: none;
}

.agencia-hero-busca__resumo-linha--datas,
.agencia-hero-busca__resumo-linha--dupla {
	padding: 0;
	align-items: stretch;
}

.agencia-hero-busca__resumo-metade {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 0.15rem;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: var(--agencia-font-body);
	transition: background-color 0.15s ease;
}

/* Grade 2x2 (Destino/Check-in/Check-out/Hóspedes) — cada botão é uma
   célula da grade, com linhas divisórias finas entre elas em vez das
   linhas empilhadas antigas. */
.agencia-hero-busca__resumo--grade {
	display: none;
}

.agencia-hero-busca__resumo--grade .agencia-hero-busca__resumo-metade {
	border-bottom: 1px solid var(--agencia-border);
	border-right: 1px solid var(--agencia-border);
}

/* Respiro entre o conteúdo e a barra divisória vertical — sem isso o
   ícone da coluna da direita ficava colado na linha. */
.agencia-hero-busca__resumo--grade .agencia-hero-busca__resumo-metade:nth-child(odd) {
	padding-right: 0.6rem;
}

.agencia-hero-busca__resumo--grade .agencia-hero-busca__resumo-metade:nth-child(2n) {
	border-right: none;
	padding-left: 0.6rem;
}

.agencia-hero-busca__resumo--grade .agencia-hero-busca__resumo-metade:nth-last-child(-n+2) {
	border-bottom: none;
}

.agencia-hero-busca__resumo-divisor {
	width: 1px;
	align-self: stretch;
	margin: 0.55rem 0;
	background: var(--agencia-border);
	flex-shrink: 0;
}

.agencia-hero-busca__resumo-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--agencia-bg-soft);
	color: var(--agencia-primary);
	flex-shrink: 0;
}

.agencia-hero-busca__resumo-icon svg {
	width: 18px;
	height: 18px;
}

.agencia-hero-busca__resumo-texto {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.agencia-hero-busca__resumo-texto strong {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--agencia-text);
}

.agencia-hero-busca__resumo-texto small {
	font-size: 0.8rem;
	color: var(--agencia-muted);
	opacity: 0.75;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	transition: color 0.15s ease, opacity 0.15s ease;
}

/* Estado "preenchido": localização/datas já escolhidas ficam com peso e
   cor mais fortes, diferenciando-se visualmente do texto de instrução
   ("Selecione o destino", "Adicionar data") — sem isso, campo vazio e
   campo preenchido pareciam idênticos. */
.agencia-hero-busca__resumo-texto small.is-preenchido {
	color: var(--agencia-text);
	font-weight: 600;
	opacity: 1;
}

.agencia-hero-busca__resumo-chevron {
	width: 18px;
	height: 18px;
	margin-left: auto;
	color: var(--agencia-muted);
	flex-shrink: 0;
}

/* Bottom sheets — mesmo padrão de gatilho+painel dos popovers de
   single-imovel.php (imovel-datas.js/imovel-hospedes.js), mas deslizando
   a partir da base da tela em vez de centralizado, e reaproveitando as
   classes de calendário/contador já definidas em imovel.css (carregado
   na home junto com o Assistente Inteligente — ver enqueue_assets()). */

.agencia-hero-sheet {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.agencia-hero-sheet[hidden] {
	display: none;
}

.agencia-hero-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 12, 10, 0.5);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.agencia-hero-sheet.is-aberto .agencia-hero-sheet__backdrop {
	opacity: 1;
}

.agencia-hero-sheet__painel {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: min(82vh, 640px);
	background: #fff;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -12px 32px rgba(20, 12, 10, 0.24);
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform 0.28s ease;
}

.agencia-hero-sheet.is-aberto .agencia-hero-sheet__painel {
	transform: translateY(0);
}

.agencia-hero-sheet__cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1.1rem;
	border-bottom: 1px solid var(--agencia-border);
	flex-shrink: 0;
}

.agencia-hero-sheet__cabecalho h3 {
	margin: 0;
	font-family: var(--agencia-font-heading);
	font-size: 1.05rem;
	color: var(--agencia-text);
}

.agencia-hero-sheet__fechar {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: var(--agencia-bg-soft);
	color: var(--agencia-text);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.agencia-hero-sheet__corpo {
	padding: 0.5rem 1.1rem;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.agencia-hero-sheet__rodape {
	padding: 0.75rem 1.1rem;
	border-top: 1px solid var(--agencia-border);
	flex-shrink: 0;
}

.agencia-hero-sheet__aplicar {
	width: 100%;
	height: 42px;
	border-radius: calc(var(--agencia-radius) - 4px);
	background: linear-gradient(120deg, var(--agencia-primary) 0%, var(--agencia-primary-dark) 100%);
}

/* Lista de cidades (sheet de localização) */

.agencia-hero-cidades-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.agencia-hero-cidades-lista__item {
	display: block;
	width: 100%;
	padding: 0.85rem 0.5rem;
	border: none;
	border-bottom: 1px solid var(--agencia-border);
	background: none;
	text-align: left;
	font-family: var(--agencia-font-body);
	font-size: 0.92rem;
	color: var(--agencia-text);
	cursor: pointer;
}

.agencia-hero-cidades-lista li:last-child .agencia-hero-cidades-lista__item {
	border-bottom: none;
}

.agencia-hero-cidades-lista__item.is-selecionada {
	color: var(--agencia-primary);
	font-weight: 700;
}

/* Sheet de datas: um mês por vez, navegado com setas + slide horizontal
   (ver mudarMesCalendario() em hero-busca.js), reaproveitando
   .agencia-imovel-datas-mes* de imovel.css só pra grade de dias — o
   título do mês agora mora no cabeçalho de navegação, fora do elemento
   que desliza. */

.agencia-hero-calendario__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.agencia-hero-calendario__titulo {
	font-family: var(--agencia-font-heading);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--agencia-text);
	text-align: center;
	flex: 1;
}

.agencia-hero-calendario__seta {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border: 1px solid var(--agencia-border);
	border-radius: 50%;
	background: #fff;
	color: var(--agencia-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.agencia-hero-calendario__seta:hover:not(:disabled) {
	border-color: var(--agencia-primary);
	background: var(--agencia-bg-soft);
}

.agencia-hero-calendario__seta:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.agencia-hero-calendario__seta svg {
	width: 18px;
	height: 18px;
}

.agencia-hero-calendario__viewport {
	position: relative;
	overflow: hidden;
}

/* Calendário mais compacto na vertical: as células de dia herdam largura
   de imovel.css (aspect-ratio 1/1), mas aqui o painel do sheet é mais
   largo que o popover original, então as colunas ficam largas e o
   aspect-ratio 1/1 deixa cada linha alta demais — achatamos a proporção
   e reduzimos os respiros ao redor dos dias da semana, escopado a este
   sheet pra não afetar o popover original da página de imóvel. */
.agencia-hero-sheet .agencia-imovel-datas-mes__semana {
	margin-bottom: 0.1rem;
}

.agencia-hero-sheet .agencia-imovel-datas-mes__semana span {
	font-size: 0.65rem;
}

.agencia-hero-sheet .agencia-imovel-datas-mes__dia {
	aspect-ratio: 1 / 0.7;
	font-size: 0.78rem;
}

/* Sheet de hóspedes: contador único, reaproveitando
   .agencia-imovel-hospedes-popover__botao/__contador de imovel.css. */

.agencia-hero-hospedes-linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.15rem 0;
}

.agencia-hero-hospedes-linha strong {
	font-family: var(--agencia-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--agencia-text);
}

/* Contador reaproveita .agencia-imovel-hospedes-popover__botao/__contador
   de imovel.css, mas o botão fica um pouco menor aqui pra combinar com o
   sheet mais compacto — escopado a este sheet pra não afetar o popover
   original da página de imóvel. */
.agencia-hero-sheet .agencia-imovel-hospedes-popover__botao {
	width: 26px;
	height: 26px;
}

.agencia-home__anchor {
	display: block;
	position: relative;
	top: -90px;
	visibility: hidden;
}

.agencia-home__destaques,
.agencia-imoveis-archive__browse {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
}

.agencia-home__destaques-title,
.agencia-viagens-title {
	text-align: center;
	font-size: 1.9rem;
	margin: 0 0 0.75rem;
}

.agencia-home__destaques-subtitle {
	text-align: center;
	color: var(--agencia-muted);
	margin: 0 0 2.5rem;
}

.agencia-home__destaques-head {
	position: relative;
	text-align: center;
	margin: 0 0 1rem;
}

.agencia-home__destaques-eyebrow {
	display: inline-block;
	color: var(--agencia-accent);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}

.agencia-home__destaques-head .agencia-home__destaques-title {
	display: block;
}

.agencia-home__destaques-divider {
	display: block;
	width: 64px;
	height: 3px;
	margin: 1.5rem auto 0;
	background: var(--agencia-accent);
	border-radius: 999px;
}

/* Trip card grid */

.agencia-viagens-archive {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 1.5rem;
}

.agencia-viagens-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 2rem;
	margin: 1.5rem 0;
}

.agencia-viagens-grid--destaques {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
}

.agencia-viagem-card {
	border-radius: var(--agencia-radius);
	overflow: hidden;
	box-shadow: var(--agencia-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.agencia-viagem-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(63, 18, 16, 0.14);
}

.agencia-viagem-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.agencia-viagem-card__thumb {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--agencia-bg-soft);
	overflow: hidden;
}

.agencia-viagem-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.agencia-viagem-card__thumb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--agencia-primary-light) 0%, var(--agencia-teal) 100%);
}

.agencia-viagem-card__badge {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	z-index: 2;
	background: var(--agencia-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(63, 18, 16, 0.2);
}

.agencia-viagem-card__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 2.5rem 1.25rem 1.25rem;
	background: linear-gradient(180deg, rgba(63, 18, 16, 0) 0%, rgba(63, 18, 16, 0.55) 45%, rgba(63, 18, 16, 0.92) 100%);
	color: #fff;
}

.agencia-viagem-card__destino {
	margin: 0 0 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffd8ae;
}

.agencia-viagem-card__title {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
	font-family: var(--agencia-font-heading);
	color: #fff;
}

.agencia-viagem-card__data {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	color: #dbe4f5;
}

.agencia-viagem-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.agencia-viagem-card__preco {
	font-family: var(--agencia-font-body);
	font-weight: 400;
	font-size: 0.8rem;
	color: #dbe4f5;
}

.agencia-viagem-card__preco strong {
	display: block;
	font-family: var(--agencia-font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	color: #fff;
}

.agencia-viagem-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--agencia-primary);
	color: #fff;
	font-size: 1rem;
	flex-shrink: 0;
}

.agencia-viagens-pagination {
	margin: 2.5rem 0 1rem;
	text-align: center;
}

/* Home: featured property card (editorial "Destinos" style) */

.agencia-destaque-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: var(--agencia-radius-large);
	overflow: hidden;
	box-shadow: var(--agencia-shadow-medium);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.agencia-destaque-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--agencia-shadow-large);
}

.agencia-destaque-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--agencia-bg-soft);
}

.agencia-destaque-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(63, 18, 16, 0.5) 0%, rgba(63, 18, 16, 0) 42%);
}

.agencia-destaque-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.agencia-destaque-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.agencia-destaque-card:hover .agencia-destaque-card__media img {
	transform: scale(1.06);
}

.agencia-destaque-card__thumb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--agencia-primary-light) 0%, var(--agencia-teal) 100%);
}

.agencia-destaque-card__badge {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: var(--agencia-primary-dark);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.4rem 0.8rem;
	border-radius: var(--agencia-radius-pill);
	box-shadow: 0 4px 10px rgba(63, 18, 16, 0.2);
}

.agencia-destaque-card__badge svg {
	width: 12px;
	height: 12px;
	fill: #fff;
}

.agencia-destaque-card__fav {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--agencia-shadow-medium);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--agencia-primary);
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.agencia-destaque-card__fav:hover {
	transform: scale(1.08);
}

.agencia-destaque-card__fav svg {
	width: 18px;
	height: 18px;
}

.agencia-destaque-card__body {
	padding: 1.1rem 1.1rem 1.1rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.agencia-home h3.agencia-destaque-card__title {
	margin: 0 0 0.35rem;
	padding: 0;
	font-family: var(--agencia-font-serif);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.3;
	color: var(--agencia-text);
	text-shadow: none;
}

.agencia-destaque-card__title a {
	color: inherit;
	text-decoration: none;
}

.agencia-destaque-card__title a:hover {
	color: var(--agencia-primary);
}

.agencia-destaque-card__local {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0 0 0.55rem;
	font-size: 0.76rem;
	font-weight: 500;
	color: var(--agencia-muted);
	text-shadow: none;
}

.agencia-destaque-card__local svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	fill: var(--agencia-primary-light);
}

.agencia-destaque-card__desc {
	margin: 0 0 0.8rem;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--agencia-muted);
	text-shadow: none;
}

.agencia-destaque-card__divider {
	border: none;
	border-top: 1px solid var(--agencia-border);
	margin: auto 0 0.8rem;
}

.agencia-destaque-card__tags {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin: 0 0 0.9rem;
	padding: 0;
	list-style: none;
}

.agencia-destaque-card__tags li {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--agencia-muted);
	white-space: nowrap;
}

.agencia-destaque-card__tags svg {
	width: 14px;
	height: 14px;
	color: var(--agencia-primary-light);
	flex-shrink: 0;
}

.agencia-destaque-card__footer {
	margin-top: auto;
	display: flex;
	justify-content: flex-end;
}

.agencia-destaque-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 1.5px solid var(--agencia-primary);
	color: var(--agencia-primary);
	background: transparent;
	border-radius: var(--agencia-radius-pill);
	padding: 0.45rem 1rem;
	font-family: var(--agencia-font-heading);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.01em;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.agencia-destaque-card__cta svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

.agencia-destaque-card__cta:hover {
	background: var(--agencia-primary);
	color: #fff;
	transform: none;
}

/* ------------------------------------------------------------------ */
/* Home: seção "Imóveis" com filtros + grid 2 col + mapa (.agencia-browse) */
/* Componente novo e independente de .agencia-destaque-card, que segue   */
/* em uso na seção "Próximos imóveis" de single-imovel.php.              */
/* ------------------------------------------------------------------ */

.agencia-browse__barra {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0.25rem 1.5rem 1.5rem;
	margin: 0 -1.5rem 1.5rem;
}

/* Card unificado — envolve o formulário de busca + divisor + filtros de comodidades */

.agencia-browse__grupo {
	position: relative;
	background: #fff;
	border: 1px solid var(--agencia-border);
	border-radius: var(--agencia-radius-large);
	box-shadow: var(--agencia-shadow-medium);
	padding: 0.4rem;
}

/* Card de busca — Destino / Check-in / Check-out / Hóspedes + Buscar imóveis */

.agencia-browse__form {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 0;
}

.agencia-browse__grupo-divisor {
	height: 1px;
	margin: 0.4rem 0.6rem;
	background: var(--agencia-border);
}

.agencia-browse__campo {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 1rem;
	border: none;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

/* Destino recebe mais espaço que os demais campos: é a decisão mais
   importante da busca e o texto ("Para onde?") não pode truncar. */
.agencia-browse__campo--destino {
	flex: 1.5 1 0;
}

label.agencia-browse__campo {
	cursor: text;
}

.agencia-browse__campo-gatilho {
	all: unset;
	box-sizing: border-box;
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 1rem;
	cursor: pointer;
	width: 100%;
}

/* Mesmo padrão de ícone do card de busca da home
   (.agencia-hero-busca__resumo-icon): círculo com fundo suave por trás do
   traço, em vez do ícone "solto". Mantém a identidade visual consistente
   entre os dois formulários de busca do site. */
.agencia-browse__campo-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--agencia-bg-soft);
	color: var(--agencia-primary);
}

.agencia-browse__campo:focus-within .agencia-browse__campo-icone,
.agencia-browse__campo-gatilho:focus-visible .agencia-browse__campo-icone {
	background: var(--agencia-primary);
	color: #fff;
}

.agencia-browse__campo-icone svg {
	width: 18px;
	height: 18px;
	display: block;
}

.agencia-browse__campo-textos {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
	flex: 1 1 auto;
}

.agencia-browse__campo-rotulo {
	font-family: var(--agencia-font-body);
	font-weight: 700;
	font-size: 0.72rem;
	color: var(--agencia-text);
}

.agencia-browse__campo-valor {
	font-family: var(--agencia-font-body);
	font-size: 0.85rem;
	color: var(--agencia-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Datas selecionadas ficam com texto "cheio" (mesma lógica do
   is-preenchido que existia nos inputs nativos), diferenciando
   visualmente de "Quando?" (placeholder). */
.agencia-browse__campo-valor.is-preenchido {
	color: var(--agencia-text);
}

.agencia-browse__campo-input {
	width: 100%;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 0;
	font-family: var(--agencia-font-body);
	font-size: 0.85rem;
	color: var(--agencia-muted);
}

/* Só fica com a cor "preenchida" quando o campo tem um valor real —
   evita que a data de hoje (exibida em cinza pelo Safari em campos
   vazios) pareça uma data já selecionada pelo usuário. */
.agencia-browse__campo-input.is-preenchido {
	color: var(--agencia-text);
}

.agencia-browse__campo-input::placeholder {
	color: var(--agencia-muted);
}

.agencia-browse__campo-input:focus {
	outline: none;
}

.agencia-browse__campo-chevron {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--agencia-muted);
}

.agencia-browse__campo-divisor {
	flex: 0 0 auto;
	width: 1px;
	align-self: center;
	height: 34px;
	background: var(--agencia-border);
}

.agencia-browse__destino-lista {
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 260px;
	max-width: 320px;
	padding: 0.75rem;
	background: #fff;
	border-radius: var(--agencia-radius-large);
	box-shadow: var(--agencia-shadow-xl);
}

.agencia-browse__destino-lista[hidden] {
	display: none;
}

.agencia-browse__destino-lista .agencia-browse__pill--cidade {
	width: 100%;
	justify-content: flex-start;
}

/* Calendário customizado de Check-in/Check-out — substitui o seletor
   nativo do navegador (não estilizável) por um popup próprio, no mesmo
   padrão visual do dropdown de Destino. Compartilhado pelos dois
   gatilhos (checkin/checkout); a posição horizontal é ajustada via JS
   conforme qual gatilho foi clicado. */
.agencia-browse__calendario {
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 0;
	z-index: 25;
	width: 320px;
	max-width: calc(100vw - 2rem);
	padding: 1rem;
	background: #fff;
	border-radius: var(--agencia-radius-large);
	box-shadow: var(--agencia-shadow-xl);
}

.agencia-browse__calendario[hidden] {
	display: none;
}

.agencia-browse__calendario-cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.agencia-browse__calendario-mes {
	margin: 0;
	font-family: var(--agencia-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--agencia-text);
}

.agencia-browse__calendario-nav {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--agencia-muted);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.agencia-browse__calendario-nav svg {
	width: 16px;
	height: 16px;
}

.agencia-browse__calendario-nav:hover {
	background: var(--agencia-bg-light);
	color: var(--agencia-primary);
}

.agencia-browse__calendario-dica {
	margin: 0 0 0.75rem;
	font-family: var(--agencia-font-body);
	font-size: 0.78rem;
	color: var(--agencia-muted);
}

.agencia-browse__calendario-semana {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 0.2rem;
}

.agencia-browse__calendario-semana span {
	display: block;
	text-align: center;
	font-family: var(--agencia-font-body);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--agencia-muted);
}

.agencia-browse__calendario-grade {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.agencia-browse__calendario-celula {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Faixa contínua do intervalo selecionado, pintada atrás do círculo de
   cada dia (::before ocupa a célula inteira; nas pontas do intervalo só
   metade da célula, para o círculo do dia "cortar" a faixa ao meio). */
.agencia-browse__calendario-celula.is-no-intervalo::before,
.agencia-browse__calendario-celula.is-intervalo-inicio::before,
.agencia-browse__calendario-celula.is-intervalo-fim::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--agencia-primary-light);
	background: color-mix( in srgb, var(--agencia-primary) 14%, #fff );
}

.agencia-browse__calendario-celula.is-intervalo-inicio::before {
	left: 50%;
}

.agencia-browse__calendario-celula.is-intervalo-fim::before {
	right: 50%;
}

.agencia-browse__calendario-dia {
	all: unset;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	font-family: var(--agencia-font-body);
	font-size: 0.82rem;
	color: var(--agencia-text);
	cursor: pointer;
}

.agencia-browse__calendario-dia:hover:not(:disabled) {
	background: var(--agencia-bg-light);
}

.agencia-browse__calendario-dia:disabled {
	color: var(--agencia-border);
	cursor: not-allowed;
}

.agencia-browse__calendario-dia.is-hoje {
	font-weight: 700;
	color: var(--agencia-primary);
}

.agencia-browse__calendario-dia.is-selecionado {
	background: var(--agencia-primary);
	color: #fff;
	font-weight: 700;
}

.agencia-browse__calendario-dia.is-selecionado:hover {
	background: var(--agencia-primary);
}

.agencia-browse__calendario-rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.85rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--agencia-border);
}

.agencia-browse__calendario-limpar,
.agencia-browse__calendario-hoje {
	all: unset;
	box-sizing: border-box;
	font-family: var(--agencia-font-body);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--agencia-primary);
	cursor: pointer;
	padding: 0.3rem 0.4rem;
}

.agencia-browse__calendario-limpar:hover,
.agencia-browse__calendario-hoje:hover {
	text-decoration: underline;
}

.agencia-browse__form-buscar {
	flex: 0 0 auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.5rem;
	white-space: nowrap;
}

.agencia-browse__form-buscar svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

@media (max-width: 899px) {
	.agencia-browse__barra {
		gap: 0.6rem;
	}

	.agencia-browse__grupo {
		padding: 0.4rem;
	}

	.agencia-browse__form {
		flex-wrap: wrap;
	}

	.agencia-browse__campo,
	.agencia-browse__campo-gatilho {
		flex: 1 1 45%;
		gap: 0.5rem;
		padding: 0.4rem 0.5rem;
	}

	.agencia-browse__campo-icone {
		width: 26px;
		height: 26px;
	}

	.agencia-browse__campo-icone svg {
		width: 14px;
		height: 14px;
	}

	.agencia-browse__campo-rotulo {
		font-size: 0.66rem;
	}

	.agencia-browse__campo-valor,
	.agencia-browse__campo-input {
		font-size: 0.8rem;
	}

	.agencia-browse__campo-divisor {
		display: none;
	}

	.agencia-browse__form-buscar {
		flex: 1 1 100%;
		justify-content: center;
		height: 42px;
		margin-top: 0.3rem;
		padding: 0 1.5rem;
	}

	.agencia-browse__filtros {
		gap: 0.4rem;
		padding: 0.15rem;
	}

	.agencia-browse__pill {
		gap: 0.3rem;
		padding: 0.45rem 0.85rem;
		font-size: 0.8rem;
	}

	.agencia-browse__pill-icone {
		width: 13px;
		height: 13px;
	}

	.agencia-browse__mais-filtros {
		font-size: 0.8rem;
	}
}

@media (max-width: 560px) {
	.agencia-browse__barra {
		padding: 0.25rem 1rem 1.5rem;
		margin: 0 -1rem 1.5rem;
	}

	/* Mantém 2 campos por linha também aqui (mesma regra do breakpoint de
	   899px) — empilhar 1 por linha nesta largura deixava vão horizontal
	   ocioso enorme em cada campo. */
	.agencia-browse__campo,
	.agencia-browse__campo-gatilho {
		flex: 1 1 45%;
	}

	.agencia-browse__destino-lista {
		left: 0;
		right: 0;
		min-width: 0;
		max-width: none;
	}

	/* Nesta largura os gatilhos de Check-in/Check-out não têm espaço
	   sobrando ao lado para um popup de 320px — o calendário vira
	   largura total, ignorando o "left" calculado via JS no desktop. */
	.agencia-browse__calendario {
		left: 0 !important;
		right: 0;
		width: auto;
		max-width: none;
	}

	.agencia-browse__mais-filtros {
		margin-left: 0;
	}
}

.agencia-browse__filtros {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	padding: 0.2rem 0.2rem 0.1rem;
}

.agencia-browse__filtros-scroll {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.agencia-browse__filtros-scroll::after,
.agencia-browse__filtros-scroll::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 36px;
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.agencia-browse__filtros-scroll::after {
	right: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}

.agencia-browse__filtros-scroll::before {
	left: 0;
	background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
}

.agencia-browse__filtros-scroll.is-scrollavel::after {
	opacity: 1;
}

.agencia-browse__filtros-scroll.is-scrollavel-esquerda::before {
	opacity: 1;
}

/* Setas de navegação da lista de comodidades: no touch a rolagem já
   funciona por gesto, mas no desktop (mouse) arrastar/rolar horizontal
   não é óbvio — as setas dão um jeito clicável de "deslizar" a lista.
   Só aparecem quando há conteúdo para aquele lado (controlado via JS). */
.agencia-browse__filtros-seta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--agencia-border, #e6dedd);
	border-radius: 999px;
	background: #fff;
	color: var(--agencia-text);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.agencia-browse__filtros-seta svg {
	width: 15px;
	height: 15px;
}

.agencia-browse__filtros-seta:hover {
	border-color: var(--agencia-primary);
	color: var(--agencia-primary);
}

.agencia-browse__filtros-seta[hidden] {
	display: none;
}

@media (max-width: 640px) {
	.agencia-browse__filtros-seta {
		display: none !important;
	}
}

.agencia-browse__filtros-grupo {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.6rem;
	overflow-x: auto;
	min-width: 0;
	scrollbar-width: none;
}

.agencia-browse__filtros-grupo::-webkit-scrollbar {
	display: none;
}

.agencia-browse__filtros-divisor {
	display: none;
}

.agencia-browse__mais-filtros {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0;
	margin-left: auto;
	border: none;
	background: transparent;
	color: var(--agencia-text);
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.agencia-browse__mais-filtros:hover {
	color: var(--agencia-primary);
}

.agencia-browse__mais-filtros svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.agencia-browse__botao-filtros-contagem {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--agencia-primary);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
}

.agencia-browse__botao-filtros-contagem[hidden] {
	display: none;
}

.agencia-browse__pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--agencia-border, #e6dedd);
	border-radius: var(--agencia-radius-pill);
	background: #fff;
	color: var(--agencia-ink, #24201f);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.agencia-browse__pill:hover {
	border-color: var(--agencia-primary);
	transform: translateY(-1px);
}

.agencia-browse__pill.is-active {
	background: var(--agencia-primary);
	border-color: var(--agencia-primary);
	color: #fff;
}

.agencia-browse__pill--cidade {
	background: var(--agencia-bg-light);
	border-color: transparent;
}

.agencia-browse__pill--cidade.is-active {
	background: var(--agencia-primary);
	border-color: var(--agencia-primary);
}

.agencia-browse__pill--limpar {
	align-self: flex-start;
	padding: 0.2rem 0;
	background: transparent;
	border: none;
	color: var(--agencia-primary);
	text-decoration: underline;
}

.agencia-browse__pill--limpar[hidden] {
	display: none;
}

.agencia-browse__pill-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: var(--agencia-primary);
}

.agencia-browse__pill.is-active .agencia-browse__pill-icone {
	color: #fff;
}

.agencia-browse__pill-icone svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Painel de filtros avançados (preço, quartos, hóspedes) */

.agencia-browse__painel {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.agencia-browse__painel[hidden] {
	display: none;
}

.agencia-browse__painel-fundo {
	position: absolute;
	inset: 0;
	background: rgba(36, 20, 18, 0.45);
	cursor: pointer;
	border: 0;
}

.agencia-browse__painel-conteudo {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: 85vh;
	overflow-y: auto;
	background: #fff;
	border-radius: var(--agencia-radius-large) var(--agencia-radius-large) 0 0;
	padding: 1.5rem;
	box-shadow: var(--agencia-shadow-xl);
	animation: agencia-painel-in 0.25s ease;
}

@keyframes agencia-painel-in {
	from {
		transform: translateY(24px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.agencia-browse__painel-cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.agencia-browse__painel-cabecalho h3 {
	margin: 0;
	font-family: var(--agencia-font-heading);
	font-size: 1.1rem;
	color: var(--agencia-ink, #24201f);
}

.agencia-browse__painel-fechar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--agencia-border, #e6dedd);
	background: #fff;
	color: var(--agencia-ink, #24201f);
	cursor: pointer;
}

.agencia-browse__painel-fechar-btn svg {
	width: 14px;
	height: 14px;
}

.agencia-browse__painel-secao {
	padding: 1.25rem 0;
	border-top: 1px solid var(--agencia-border, #e6dedd);
}

.agencia-browse__painel-secao:first-of-type {
	border-top: none;
	padding-top: 0;
}

.agencia-browse__painel-secao h4 {
	margin: 0 0 0.85rem;
	font-family: var(--agencia-font-heading);
	font-size: 0.95rem;
	color: var(--agencia-ink, #24201f);
}

.agencia-browse__painel-preco {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.agencia-browse__painel-campo {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--agencia-border, #e6dedd);
	border-radius: var(--agencia-radius-small);
}

.agencia-browse__painel-campo span {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--agencia-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.agencia-browse__painel-campo input {
	border: none;
	outline: none;
	font-size: 0.95rem;
	font-family: var(--agencia-font-body);
	color: var(--agencia-ink, #24201f);
	width: 100%;
}

.agencia-browse__painel-preco-separador {
	color: var(--agencia-muted);
	flex: 0 0 auto;
}

.agencia-browse__stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 220px;
}

.agencia-browse__stepper-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--agencia-border, #e6dedd);
	background: #fff;
	color: var(--agencia-ink, #24201f);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.agencia-browse__stepper-btn:hover {
	border-color: var(--agencia-primary);
	color: var(--agencia-primary);
}

.agencia-browse__stepper-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.agencia-browse__stepper-valor {
	min-width: 90px;
	text-align: center;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--agencia-ink, #24201f);
}

.agencia-browse__painel-rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.25rem;
	margin-top: 0.25rem;
	border-top: 1px solid var(--agencia-border, #e6dedd);
}

.agencia-browse__painel-limpar {
	background: transparent;
	border: none;
	color: var(--agencia-ink, #24201f);
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
	font-size: 0.9rem;
}

.agencia-browse__tipo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

.agencia-browse__tipo-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 0.5rem;
	border: 1px solid var(--agencia-border, #e6dedd);
	border-radius: var(--agencia-radius-small);
	background: #fff;
	color: var(--agencia-ink, #24201f);
	font-size: 0.78rem;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.agencia-browse__tipo-card:hover {
	border-color: var(--agencia-primary);
	transform: translateY(-1px);
}

.agencia-browse__tipo-card svg {
	width: 26px;
	height: 26px;
}

.agencia-browse__tipo-card.is-active {
	background: var(--agencia-bg-light);
	border-color: var(--agencia-primary);
	color: var(--agencia-primary);
}

.agencia-browse__comodidades-grupo {
	margin-bottom: 1rem;
}

.agencia-browse__comodidades-grupo:last-of-type {
	margin-bottom: 0;
}

.agencia-browse__comodidades-grupo[hidden] {
	display: none;
}

.agencia-browse__comodidades-grupo-titulo {
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--agencia-muted);
}

.agencia-browse__comodidades-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.agencia-browse__pill--comodidade {
	padding: 0.55rem 0.9rem 0.55rem 0.7rem;
}

.agencia-browse__pill-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0;
	height: 15px;
	overflow: hidden;
	color: #fff;
	transition: width 0.15s ease;
}

.agencia-browse__pill--comodidade.is-active .agencia-browse__pill-check {
	width: 15px;
	margin-right: 0.15rem;
}

.agencia-browse__pill-check svg {
	width: 100%;
	height: 100%;
	display: block;
}

.agencia-browse__painel-mostrar-mais {
	display: inline-block;
	margin-top: 0.9rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--agencia-ink, #24201f);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

.agencia-browse__painel-opcao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0;
	border-top: 1px solid var(--agencia-border, #e6dedd);
}

.agencia-browse__painel-opcao:first-of-type {
	border-top: none;
	padding-top: 0;
}

.agencia-browse__painel-opcao-texto {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.agencia-browse__painel-opcao-titulo {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--agencia-ink, #24201f);
}

.agencia-browse__painel-opcao-desc {
	font-size: 0.78rem;
	color: var(--agencia-muted);
	max-width: 260px;
}

.agencia-browse__toggle {
	flex: 0 0 auto;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.agencia-browse__toggle-track {
	display: block;
	position: relative;
	width: 44px;
	height: 26px;
	border-radius: var(--agencia-radius-pill);
	background: var(--agencia-border, #e6dedd);
	transition: background 0.2s ease;
}

.agencia-browse__toggle-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--agencia-shadow, 0 1px 3px rgba(0, 0, 0, 0.25));
	transition: transform 0.2s ease;
}

.agencia-browse__toggle[aria-checked="true"] .agencia-browse__toggle-track {
	background: var(--agencia-primary);
}

.agencia-browse__toggle[aria-checked="true"] .agencia-browse__toggle-thumb {
	transform: translateX(18px);
}

@media (min-width: 700px) {
	.agencia-browse__painel {
		align-items: center;
	}

	.agencia-browse__painel-conteudo {
		border-radius: var(--agencia-radius-large);
	}
}

.agencia-browse__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
	gap: 2rem;
	align-items: start;
}

.agencia-browse__resultados {
	min-width: 0;
}

.agencia-browse__contagem {
	margin: 0 0 1.25rem;
	color: var(--agencia-muted);
	font-size: 0.9rem;
}

.agencia-browse__contagem strong {
	color: var(--agencia-ink, #24201f);
}

.agencia-browse__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem 1.5rem;
}

.agencia-browse__vazio {
	display: none;
	text-align: center;
	color: var(--agencia-muted);
	padding: 3rem 1rem;
}

.agencia-browse__vazio:not([hidden]) {
	display: block;
}

.agencia-browse__mapa {
	position: sticky;
	top: 1.5rem;
	height: clamp(420px, 70vh, 720px);
	border-radius: var(--agencia-radius-large);
	overflow: hidden;
	box-shadow: var(--agencia-shadow-medium);
	border: 1px solid rgba(36, 26, 24, 0.08);
}

/* O próprio botão de zoom do Google (bottom-right) fica colado no canto sem
   isso — um respiro consistente com o resto do layout "cartão". */
.agencia-browse__mapa .gm-bundled-control {
	margin: 0 12px 12px 0 !important;
}

.agencia-browse__mapa-canvas {
	width: 100%;
	height: 100%;
}

.agencia-browse__mapa-aviso {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: var(--agencia-bg-soft);
	color: var(--agencia-muted);
	text-align: center;
	padding: 2rem;
	font-size: 0.9rem;
}

/* Marcador de preço custom no mapa (Airbnb-style pill) */
.agencia-browse-pin {
	background: #fff;
	color: var(--agencia-ink, #24201f);
	font-weight: 700;
	font-size: 0.8rem;
	padding: 0.4rem 0.75rem;
	border-radius: var(--agencia-radius-pill);
	box-shadow: var(--agencia-shadow-medium);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.agencia-browse__layout {
		grid-template-columns: 1fr;
	}

	.agencia-browse__mapa {
		position: static;
		height: 360px;
		order: -1;
	}

	/* Sem chave do Google Maps configurada, o mapa só exibe um aviso —
	   não faz sentido reservar essa prioridade/altura para uma área sem
	   conteúdo útil, empurrando os imóveis para baixo da dobra. Nesse
	   caso, o bloco volta para depois dos resultados e ocupa bem menos
	   espaço. Quando o mapa estiver ativo, o comportamento acima
	   (map-first) permanece inalterado. */
	.agencia-browse__mapa:has(.agencia-browse__mapa-aviso) {
		order: 0;
		height: 120px;
	}

	.agencia-browse__grid {
		grid-template-columns: 1fr;
	}
}

/* Card estilo Airbnb com carrossel de fotos */

.agencia-browse-card {
	display: block;
	/* É item direto de um grid (.agencia-browse__grid). Sem min-width:0 o
	   título com white-space:nowrap (.agencia-browse-card__title) força o
	   card a ficar mais largo que a coluna, estourando a largura da página
	   inteira no mobile — é o que causava o corte/vazamento do próximo
	   card na borda direita. */
	min-width: 0;
}

.agencia-browse-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--agencia-radius-large);
	overflow: hidden;
	background: var(--agencia-bg-soft);
}

.agencia-browse-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.agencia-browse-card__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.agencia-browse-card__slide.is-active {
	opacity: 1;
}

.agencia-browse-card__slide--placeholder {
	background-color: var(--agencia-bg-soft);
}

.agencia-browse-card__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	color: var(--agencia-ink, #24201f);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease, background 0.15s ease;
	z-index: 2;
}

.agencia-browse-card__media:hover .agencia-browse-card__nav {
	opacity: 1;
}

.agencia-browse-card__nav:hover {
	background: #fff;
}

.agencia-browse-card__nav--prev {
	left: 10px;
}

.agencia-browse-card__nav--next {
	right: 10px;
}

.agencia-browse-card__nav svg {
	width: 15px;
	height: 15px;
}

.agencia-browse-card__dots {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	display: flex;
	gap: 4px;
	z-index: 2;
}

.agencia-browse-card__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.65);
	transition: background 0.15s ease, transform 0.15s ease;
}

.agencia-browse-card__dot.is-active {
	background: #fff;
	transform: scale(1.3);
}

.agencia-browse-card__trofeu {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.7rem;
	background: #fff;
	color: var(--agencia-ink, #24201f);
	font-size: 0.72rem;
	font-weight: 700;
	border-radius: var(--agencia-radius-pill);
	box-shadow: var(--agencia-shadow-medium);
	z-index: 2;
}

.agencia-browse-card__trofeu svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.agencia-browse-card__fav {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.agencia-browse-card__fav svg {
	width: 22px;
	height: 22px;
	transition: fill 0.15s ease, stroke 0.15s ease;
}

.agencia-browse-card__fav[aria-pressed="true"] svg {
	fill: var(--agencia-primary);
	stroke: var(--agencia-primary);
}

.agencia-browse-card__body {
	padding: 0.9rem 0.1rem 0;
}

.agencia-browse-card__linha-topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.agencia-browse-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.agencia-browse-card__title a {
	color: inherit;
	text-decoration: none;
}

.agencia-browse-card__nota {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.agencia-browse-card__nota svg {
	width: 13px;
	height: 13px;
	color: var(--agencia-ink, #24201f);
}

.agencia-browse-card__subtitulo {
	margin: 0.2rem 0 0;
	color: var(--agencia-muted);
	font-size: 0.9rem;
}

.agencia-browse-card__meta {
	margin: 0.2rem 0 0;
	color: var(--agencia-muted);
	font-size: 0.9rem;
}

.agencia-browse-card__preco {
	margin: 0.5rem 0 0;
	font-size: 0.95rem;
}

.agencia-browse-card__preco span {
	font-weight: 700;
	text-decoration: underline;
}

.agencia-browse-card__estimativa {
	margin: 0.15rem 0 0;
	color: var(--agencia-muted);
	font-size: 0.78rem;
}

@media (max-width: 600px) {
	.agencia-browse-card__media {
		aspect-ratio: 4 / 3;
	}
}

/* Single viagem */

.agencia-viagem-single {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1.5rem 4rem;
}

.agencia-viagem-single__header {
	/* Horizontal position/width (100vw + calc(50% - 50vw) breakout) is set
	   by the shared full-bleed rule near the top of this file — only the
	   vertical spacing is set here so that rule isn't clobbered. */
	margin-top: 0;
	margin-bottom: 3rem;
	padding: 3rem 0;
	background: linear-gradient(135deg, var(--agencia-primary) 0%, var(--agencia-primary-dark) 100%);
	color: #fff;
	text-align: left;
	/* A fixed-ish min-height + vertical centering keeps the hero balanced
	   whether or not the optional Região/Melhor época badges are present,
	   instead of the content sitting top-heavy with a big dead gap below
	   when those fields are empty. */
	display: flex;
	align-items: center;
	min-height: clamp(460px, 56vw, 620px);
}

.agencia-viagem-single__header--com-imagem {
	background-size: cover;
	background-position: center;
	position: relative;
}

/* Left-to-right scrim: darkest where the text sits, fading out toward the
   right so the photo itself stays visible, matching the reference design. */
.agencia-viagem-single__header--com-imagem::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(11, 20, 38, 0.92) 0%, rgba(11, 20, 38, 0.78) 32%, rgba(11, 20, 38, 0.25) 65%, rgba(11, 20, 38, 0) 100%);
}

/* Centered, max-width, padded container — mirrors .agencia-hero__container
   so hero text lines up with the nav bar's gutter instead of sitting flush
   against the true viewport edge on wide screens. */
.agencia-viagem-single__header-container {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
}

.agencia-viagem-single__header-inner {
	position: relative;
	max-width: 640px;
	margin: 0;
	width: 100%;
	flex: 1 1 420px;
}

/* Cartão de preço + calendário flutuando sobre a capa, ao lado do texto do
   hero (em telas largas) ou empilhado abaixo dele (em telas estreitas). */
.agencia-viagem-single__header-container .agencia-viagem-single__preco-destaque {
	margin: 0;
	flex: 0 1 380px;
	width: 100%;
}

.agencia-viagem-single__header-container .agencia-preco-destaque {
	padding: 2rem 1.75rem;
}

@media (max-width: 860px) {
	.agencia-viagem-single__header {
		align-items: flex-start;
		min-height: 0;
		padding: 2.5rem 0;
	}

	.agencia-viagem-single__header-container {
		flex-direction: column;
		align-items: stretch;
	}

	.agencia-viagem-single__header-container .agencia-viagem-single__preco-destaque {
		max-width: 420px;
	}
}

.agencia-viagem-single__header h1 {
	color: #fff;
	font-family: var(--agencia-font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	margin: 0.5rem 0 1rem;
}

.agencia-viagem-single__header .agencia-viagem-single__resumo {
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.7;
	margin: 0 0 2rem;
}

.agencia-viagem-single__destino {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--agencia-teal);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	font-size: 0.85rem;
	margin: 0;
}

.agencia-viagem-single__destino svg {
	width: 16px;
	height: 16px;
}

.agencia-viagem-single__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1.5rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	padding: 1rem 1.5rem;
	margin-top: 1.75rem;
	backdrop-filter: blur(2px);
}

.agencia-viagem-single__badge {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	text-align: left;
	padding-right: 1.5rem;
}

.agencia-viagem-single__badge:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.agencia-viagem-single__badge-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--agencia-teal);
	flex-shrink: 0;
}

.agencia-viagem-single__badge-icone svg {
	width: 20px;
	height: 20px;
}

.agencia-viagem-single__badge-texto {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.agencia-viagem-single__badge-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.agencia-viagem-single__badge-valor {
	font-size: 0.95rem;
	font-weight: 500;
	color: #fff;
}

.agencia-viagem-single__header-cta {
	margin-top: 2rem;
}

.agencia-viagem-single__header-cta svg {
	width: 16px;
	height: 16px;
}

.agencia-viagem-single__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.agencia-viagem-single__trust-item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	padding: 0.65rem 1rem;
}

.agencia-viagem-single__trust-item svg {
	width: 20px;
	height: 20px;
	color: var(--agencia-teal);
	flex-shrink: 0;
}

.agencia-viagem-single__trust-texto {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.agencia-viagem-single__trust-texto strong {
	font-size: 0.82rem;
	font-weight: 700;
	color: #fff;
}

.agencia-viagem-single__trust-texto span {
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.68);
}

.agencia-viagem-single__galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem;
	margin: 1.5rem 0;
}

.agencia-viagem-single__galeria img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 8px;
}

.agencia-viagem-single__conteudo {
	line-height: 1.7;
	color: var(--agencia-text);
	margin: 1.25rem 0;
}

/* These two sections were the only top-level blocks on this page missing from
   the shared full-bleed rule above, so they were still trapped inside the
   article's own max-width:960px column while every sibling section (hero,
   reserva, institucional, esperar) broke out to full viewport width — that
   mismatch is what showed up as big blank white bands flanking a suddenly-
   narrow block ("zonas brancas"). Now that they're full-bleed too, they need
   the same single-box max-width/padding/margin:auto inner container as the
   others so their content lines up with the hero's gutter instead of
   stretching edge-to-edge. */
/* margin-top/bottom only (NOT the `margin: 4rem 0` shorthand) — the shorthand
   resets margin-left/margin-right to 0 too, which silently overwrote the
   full-bleed rule's `margin-left/right: calc(50% - 50vw)` above (same class
   selector, later in the file → same specificity → last one wins). That's
   what actually caused the "zonas brancas"/horizontal-scrollbar report: the
   section kept width:100vw but its horizontal margin collapsed to 0, so the
   full-viewport-wide box sat offset at the article's normal (narrow, centered)
   position instead of at the true viewport edge — blank space on the left,
   overflow off the right edge. */
.agencia-viagem-single__precos,
.agencia-viagem-single__depoimentos {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.agencia-viagem-single__precos > .agencia-precos-intro,
.agencia-viagem-single__precos > .agencia-precos-grid,
.agencia-viagem-single__depoimentos > h2,
.agencia-viagem-single__depoimentos > .agencia-depoimentos-grid {
	max-width: 1280px;
	padding: 0 1.5rem;
	margin-left: auto;
	margin-right: auto;
}

/* .agencia-viagem-single__reserva now breaks out to full viewport width
   (see the shared full-bleed rule above) so its left/right gutter lines up
   with the hero above it instead of falling back to the theme's own
   (narrower) content column — that mismatch made this section look
   noticeably narrower/more indented than the hero. The max-width + padding +
   margin:auto must all live on the SAME box (the direct children here),
   mirroring the hero's `.agencia-viagem-single__header-container` and
   institucional's `.agencia-institucional__container` exactly — splitting the
   padding onto the outer section and the max-width onto the children (as a
   prior version of this rule did) computes a different left-edge offset than
   those two containers and produced a visible section-to-section
   misalignment ("torta") down the page.

   Also: this must set margin-top/margin-bottom only, NOT the `margin: 4rem 0`
   shorthand — the shorthand resets margin-left/margin-right to 0 as well,
   which clobbered the full-bleed rule's `margin-left/right: calc(50% - 50vw)`
   above it (same selector specificity, later in the file wins). With the
   horizontal margin reset to 0 but width still 100vw, the section rendered as
   a full-viewport-wide box sitting at the article's normal narrow/centered
   offset instead of the true viewport edge — this was the real cause of the
   "zonas brancas" / phantom-horizontal-scrollbar report, not the earlier
   scrollbar-width theory. */
.agencia-viagem-single__reserva {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.agencia-viagem-single__reserva > h2,
.agencia-viagem-single__reserva > .agencia-form-erro,
.agencia-viagem-single__reserva > .agencia-reserva-layout {
	max-width: 1280px;
	padding: 0 1.5rem;
	margin-left: auto;
	margin-right: auto;
}

/* Preço em destaque + calendário de datas disponíveis (topo da página da
   viagem): um cartão central com o preço em evidência e um calendário
   simples onde só as datas de saída cadastradas ficam clicáveis. */

.agencia-viagem-single__preco-destaque {
	margin: 2.5rem 0 3rem;
}

.agencia-preco-destaque {
	background: #fff;
	border: 1px solid var(--agencia-bg-soft);
	border-radius: var(--agencia-radius);
	box-shadow: var(--agencia-shadow);
	padding: 2.5rem 2rem;
	text-align: center;
}

.agencia-preco-destaque__preco {
	margin-bottom: 2rem;
}

.agencia-preco-destaque__preco-eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--agencia-primary);
	margin-bottom: 0.35rem;
}

.agencia-preco-destaque__preco-valor {
	display: block;
	font-family: var(--agencia-font-heading);
	font-size: clamp(2.4rem, 5vw, 3.2rem);
	font-weight: 700;
	color: var(--agencia-accent);
	line-height: 1;
}

.agencia-preco-destaque__preco-label {
	display: block;
	margin-top: 0.4rem;
	color: var(--agencia-muted);
	font-weight: 600;
}

.agencia-preco-destaque__calendario {
	max-width: 340px;
	margin: 0 auto;
}

.agencia-preco-destaque__calendario-titulo {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--agencia-primary);
	margin: 0 0 1rem;
}

.agencia-preco-destaque__dica {
	margin-top: 1rem;
	font-size: 0.85rem;
	color: var(--agencia-muted);
}

.agencia-preco-destaque__cta {
	width: 100%;
	margin-top: 1.5rem;
}

.agencia-preco-destaque__cta svg {
	width: 16px;
	height: 16px;
}

.agencia-calendario {
	max-width: 340px;
	margin: 0 auto;
}

.agencia-calendario__carregando {
	color: var(--agencia-muted);
	font-size: 0.9rem;
}

.agencia-calendario__cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.85rem;
}

.agencia-calendario__mes {
	font-family: var(--agencia-font-heading);
	font-weight: 700;
	color: var(--agencia-primary);
	text-transform: capitalize;
}

.agencia-calendario__seta {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	border: 1px solid var(--agencia-bg-soft);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--agencia-primary);
	transition: background 0.2s ease, color 0.2s ease;
	padding: 0;
}

.agencia-calendario__seta:hover:not(:disabled) {
	background: var(--agencia-bg-light);
	color: var(--agencia-primary);
}

.agencia-calendario__seta:disabled {
	opacity: 0.3;
	cursor: default;
}

.agencia-calendario__seta svg {
	width: 16px;
	height: 16px;
}

.agencia-calendario__semana {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 0.4rem;
}

.agencia-calendario__semana-dia {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--agencia-muted);
	text-transform: uppercase;
	text-align: center;
}

.agencia-calendario__grade {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.agencia-calendario__dia {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--agencia-muted);
	background: transparent;
	border: none;
	font-family: var(--agencia-font-body);
}

.agencia-calendario__dia--vazio {
	visibility: hidden;
}

.agencia-calendario__dia--disponivel {
	color: var(--agencia-primary);
	background: var(--agencia-bg-light);
	cursor: pointer;
}

.agencia-calendario__dia--disponivel:hover {
	background: var(--agencia-primary);
	color: #fff;
}

.agencia-calendario__dia--selecionado,
.agencia-calendario__dia--selecionado:hover {
	background: var(--agencia-primary);
	color: #fff;
	box-shadow: 0 0 0 3px var(--agencia-bg-light);
}

.agencia-reserva-form__data-selecionada {
	background: var(--agencia-accent-soft);
	color: var(--agencia-primary);
	border-radius: calc(var(--agencia-radius) - 4px);
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

.agencia-reserva-form__data-selecionada strong {
	color: var(--agencia-accent-dark);
}

.agencia-viagem-single__eyebrow {
	color: var(--agencia-teal);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	font-size: 0.8rem;
	margin: 0 0 0.5rem;
}

/* Bem-vindo ao destino — premium institutional section (Airbnb / Apple /
   Booking-style): full-bleed 2-column layout with a single large photo,
   a badge + display title + decorative rule, an elegant intro paragraph,
   and three feature cards, with scroll-triggered reveal animations. */

.agencia-viagem-single__bemvindo {
	margin-top: 0;
	margin-bottom: 0;
}

.agencia-institucional {
	background: #fff;
	/* Reconciled against design-system/tokens.json (2026-07-29): navy ->
	   primary.500, the local teal -> official accent.500 (trust/information,
	   same role as --agencia-teal elsewhere), cool grays -> warm neutrals. */
	--institucional-navy: #A6332E;
	--institucional-teal: #2B6E78;
	--institucional-gray-bg: #FAF6F5;
	--institucional-gray-text: #6B5652;
	--institucional-muted: #A8938E;
}

.agencia-institucional__container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 120px 1.5rem;
}

.agencia-institucional__grid {
	display: grid;
	/* minmax(0, ...) is required here: plain fr tracks default to a min
	   width of "auto" (the content's min-content size), which lets a track
	   grow past its intended share of the row instead of shrinking — that
	   blowout is what pushed the cards column past the viewport edge. */
	grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
	gap: 56px;
	align-items: center;
}

/* Coluna esquerda: uma única fotografia impactante */

.agencia-institucional__media {
	position: relative;
	min-width: 0;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.agencia-institucional__grid.is-inview .agencia-institucional__media {
	opacity: 1;
	transform: scale(1);
}

.agencia-institucional__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(166, 51, 46, 0) 45%, rgba(166, 51, 46, 0.35) 75%, rgba(63, 18, 16, 0.82) 100%);
	pointer-events: none;
}

.agencia-institucional__img {
	display: block;
	width: 100%;
	height: 680px;
	object-fit: cover;
}

.agencia-institucional__media-legenda {
	position: absolute;
	left: 28px;
	right: 28px;
	bottom: 28px;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.agencia-institucional__media-legenda-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(4px);
	color: var(--institucional-teal);
}

.agencia-institucional__media-legenda-icone svg {
	width: 20px;
	height: 20px;
}

.agencia-institucional__media-legenda-texto {
	min-width: 0;
	color: #fff;
}

.agencia-institucional__media-legenda-eyebrow {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--institucional-teal);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.agencia-institucional__media-legenda-texto strong {
	display: block;
	margin-bottom: 0.4rem;
	font-size: clamp(1.35rem, 2vw, 1.7rem);
	font-weight: 800;
	line-height: 1.15;
}

.agencia-institucional__media-legenda-texto p {
	margin: 0;
	max-width: 320px;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

/* Coluna direita */

.agencia-institucional__conteudo {
	min-width: 0;
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}

.agencia-institucional__grid.is-inview .agencia-institucional__conteudo {
	opacity: 1;
	transform: translateX(0);
}

.agencia-institucional__badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	color: var(--institucional-teal);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.agencia-institucional__badge-icone {
	font-size: 16px;
	line-height: 1;
}

.agencia-institucional__titulo {
	margin: 0;
	font-size: clamp(2.5rem, 5vw, 72px);
	font-weight: 800;
	line-height: 1;
	color: var(--institucional-navy);
}

.agencia-institucional__linha {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 1.75rem 0;
}

.agencia-institucional__linha::before {
	content: '';
	display: block;
	width: 70px;
	height: 5px;
	border-radius: 999px;
	background: var(--institucional-teal);
}

.agencia-institucional__linha::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--institucional-teal);
}

.agencia-institucional__texto {
	max-width: 560px;
	margin: 0 0 2.5rem;
	font-size: 22px;
	line-height: 1.8;
	color: var(--institucional-muted);
}

.agencia-institucional__texto p {
	margin: 0 0 1rem;
}

.agencia-institucional__texto p:last-child {
	margin-bottom: 0;
}

.agencia-institucional__texto p:empty {
	display: none;
}

/* Cards */

.agencia-institucional__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.agencia-institucional__card {
	/* flex-basis 0 (not a px value) + min-width:0 lets the three cards
	   shrink evenly to whatever the column actually has available,
	   instead of holding a content-based minimum width that overflows
	   the grid track. */
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-radius: 20px;
	padding: 26px 18px;
	background: #fff;
	border: 1px solid #eef2f6;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.agencia-institucional__card:nth-child(1) {
	transition-delay: 0.1s;
}

.agencia-institucional__card:nth-child(2) {
	transition-delay: 0.2s;
}

.agencia-institucional__card:nth-child(3) {
	transition-delay: 0.3s;
}

.agencia-institucional__grid.is-inview .agencia-institucional__card {
	opacity: 1;
	transform: translateY(0);
}

.agencia-institucional__card:hover {
	transform: translateY(-8px);
	transition: transform 0.35s ease;
}

.agencia-institucional__card-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: #eafbf8;
	color: var(--institucional-teal);
}

.agencia-institucional__card-icone svg {
	width: 20px;
	height: 20px;
}

.agencia-institucional__card h3 {
	margin: 0 0 0.5rem;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--institucional-navy);
	hyphens: auto;
	overflow-wrap: break-word;
}

.agencia-institucional__card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--institucional-gray-text);
	overflow-wrap: break-word;
}

.agencia-institucional__cta {
	margin-top: 32px;
}

@media (max-width: 900px) {
	.agencia-institucional__container {
		padding: 80px 1.5rem;
	}

	.agencia-institucional__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.agencia-institucional__img {
		height: 420px;
	}

	.agencia-institucional__texto {
		max-width: none;
	}
}

@media (max-width: 600px) {
	.agencia-institucional__container {
		padding: 60px 24px;
	}

	.agencia-institucional__titulo {
		font-size: 48px;
	}

	.agencia-institucional__texto {
		font-size: 1.05rem;
	}

	.agencia-institucional__img {
		height: 320px;
	}

	.agencia-institucional__media-legenda {
		left: 18px;
		right: 18px;
		bottom: 18px;
		gap: 10px;
	}

	.agencia-institucional__media-legenda-icone {
		width: 36px;
		height: 36px;
	}

	.agencia-institucional__media-legenda-icone svg {
		width: 16px;
		height: 16px;
	}

	.agencia-institucional__media-legenda-texto p {
		max-width: none;
	}

	.agencia-institucional__cards {
		flex-direction: column;
	}

	.agencia-institucional__card {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
	}

	.agencia-institucional__card-icone {
		margin-bottom: 0;
		margin-right: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.agencia-institucional__media,
	.agencia-institucional__conteudo,
	.agencia-institucional__card {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

/* O que esperar */

.agencia-viagem-single__esperar {
	/* Horizontal position/width (100vw + calc(50% - 50vw) breakout) is set
	   by the shared full-bleed rule near the top of this file — only the
	   vertical spacing is set here so that rule isn't clobbered. */
	padding: 4rem 1.5rem;
	background: var(--agencia-bg-light);
}

.agencia-esperar-intro {
	max-width: 620px;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.agencia-esperar-divisor {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.agencia-esperar-divisor__linha {
	width: 28px;
	height: 1px;
	background: var(--agencia-accent);
	opacity: 0.5;
}

.agencia-esperar-divisor__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--agencia-accent);
}

.agencia-esperar-divisor__icone svg {
	width: 18px;
	height: 18px;
}

.agencia-esperar-intro h2 {
	margin: 0 0 0.6rem;
}

.agencia-esperar-intro p {
	margin: 0;
	color: var(--agencia-muted);
}

.agencia-esperar-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	max-width: 1100px;
	margin: 0 auto;
}

.agencia-esperar-card {
	background: #fff;
	border-radius: var(--agencia-radius);
	padding: 1.75rem 1.5rem;
	text-align: center;
	box-shadow: var(--agencia-shadow);
}

.agencia-esperar-card__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--agencia-bg-soft);
	color: var(--agencia-primary);
	margin-bottom: 1rem;
}

.agencia-esperar-card__icone svg {
	width: 24px;
	height: 24px;
}

.agencia-esperar-card h3 {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
}

.agencia-esperar-card p {
	margin: 0;
	font-size: 0.88rem;
	color: var(--agencia-muted);
	line-height: 1.5;
}

/* Pricing cards */

.agencia-precos-intro {
	max-width: 620px;
	margin: 0 auto 2rem;
	text-align: center;
}

.agencia-precos-intro h2 {
	margin: 0 0 0.6rem;
}

.agencia-precos-intro p {
	margin: 0;
	color: var(--agencia-muted);
}

/* auto-fill (used elsewhere in this file) always reserves as many 220px
   tracks as fit the row, even when there are fewer cards than that — the
   leftover tracks stay empty instead of disappearing, so a trip configured
   with a single payment option (e.g. only "Reservar sem pagamento agora"
   enabled) renders as one card stranded on the left with a large dead strip
   of white space next to it. auto-fit collapses those empty tracks to 0,
   and justify-content:center + a capped track size (instead of 1fr, which
   would just stretch the lone card to fill the whole row) lets 1-3 cards
   sit centered at a natural size instead of stretching or floating left. */
.agencia-precos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
	justify-content: center;
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.agencia-preco-card {
	background: #fff;
	border: 1px solid var(--agencia-bg-soft);
	border-radius: var(--agencia-radius);
	padding: 1.75rem 1.5rem;
	text-align: center;
	box-shadow: var(--agencia-shadow);
}

.agencia-preco-card__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--agencia-accent-soft);
	color: var(--agencia-accent);
	margin-bottom: 1rem;
}

.agencia-preco-card__icone svg {
	width: 24px;
	height: 24px;
}

.agencia-preco-card__label {
	margin: 0 0 0.6rem;
	font-weight: 600;
	color: var(--agencia-primary);
}

.agencia-preco-card__valor {
	margin: 0 0 0.4rem;
	font-family: var(--agencia-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--agencia-accent);
}

.agencia-preco-card__detalhe {
	margin: 0;
	font-size: 0.85rem;
	color: var(--agencia-muted);
}

@media (max-width: 782px) {
	.agencia-esperar-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.agencia-esperar-grid {
		grid-template-columns: 1fr;
	}
}

/* Reserva form */

.agencia-reserva-form {
	background: var(--agencia-bg-light);
	border-radius: var(--agencia-radius);
	padding: 2rem;
}

.agencia-reserva-form p {
	margin: 0 0 1.6rem;
}

.agencia-reserva-form label {
	display: block;
	font-weight: 600;
	color: var(--agencia-primary);
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
}

.agencia-reserva-form input[type="text"],
.agencia-reserva-form input[type="email"],
.agencia-reserva-form input[type="date"],
.agencia-reserva-form input[type="number"] {
	width: 100%;
	max-width: 420px;
	padding: 0.85rem 1rem;
	border: 1px solid var(--agencia-border);
	border-radius: 8px;
	font-family: var(--agencia-font-body);
	font-size: 0.95rem;
	background: #fff;
}

.agencia-reserva-form fieldset {
	border: 1px solid var(--agencia-border);
	border-radius: var(--agencia-radius);
	padding: 1rem 1.25rem 1.25rem;
	margin: 1.5rem 0;
	background: #fff;
}

.agencia-reserva-form legend {
	font-family: var(--agencia-font-heading);
	font-weight: 600;
	color: var(--agencia-primary);
	padding: 0 0.4rem;
}

.agencia-reserva-form fieldset .agencia-reserva-form__opcao {
	display: block;
	margin: 0.5rem 0;
	font-weight: 400;
}

.agencia-reserva-form input[type="radio"],
.agencia-reserva-form input[type="checkbox"] {
	accent-color: var(--agencia-primary);
}

.agencia-reserva-form__opcao-detalhe {
	display: block;
	font-size: 0.8rem;
	color: var(--agencia-muted);
	margin-top: 0.15rem;
}

.agencia-form-erro {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	border-radius: var(--agencia-radius);
	padding: 0.9rem 1.2rem;
	margin-bottom: 1.5rem;
	color: #a12a20;
}

/* Utilitário: esconde visualmente mas mantém acessível a leitores de tela */

.agencia-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Layout de duas colunas: resumo fixo + wizard */

.agencia-reserva-layout {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 2rem;
	align-items: start;
}

/* Grid items default to min-width:auto, which lets their content's
   min-content size (e.g. the 4-item step row below) force the item wider
   than its actual track share, overflowing to the right — the same
   class of bug already fixed on .agencia-institucional__feature. Since the
   reserva section only recently started rendering at its intended
   (narrower, hero-aligned) width, this was previously masked by extra
   slack from the wider fallback layout. */
.agencia-reserva-layout__resumo,
.agencia-reserva-layout__wizard {
	min-width: 0;
}

.agencia-reserva-layout__resumo {
	position: sticky;
	top: 1.5rem;
	max-height: calc(100vh - 3rem);
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--agencia-border);
	border-radius: var(--agencia-radius);
	overflow: hidden;
	box-shadow: var(--agencia-shadow);
}

.agencia-reserva-layout__resumo-foto {
	display: block;
	width: 100%;
	height: 220px;
	flex: none;
	object-fit: cover;
}

.agencia-reserva-layout__resumo-corpo {
	padding: 1.25rem 1.4rem 1.5rem;
	overflow-y: auto;
}

.agencia-reserva-layout__resumo-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.9rem;
}

.agencia-reserva-layout__resumo-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	background: var(--agencia-bg-soft);
	color: var(--agencia-primary);
	font-size: 0.72rem;
	font-weight: 600;
}

.agencia-reserva-layout__resumo-badge svg {
	width: 13px;
	height: 13px;
	color: var(--agencia-accent);
}

.agencia-reserva-layout__resumo-descricao {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--agencia-muted);
}

.agencia-reserva-layout__resumo-divisor {
	height: 1px;
	margin: 1.1rem 0;
	background: var(--agencia-border);
}

.agencia-reserva-layout__resumo-subtitulo {
	margin: 0 0 0.6rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--agencia-accent);
}

.agencia-reserva-layout__resumo-destaques {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.agencia-reserva-layout__resumo-destaques li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.83rem;
	color: var(--agencia-primary);
}

.agencia-reserva-layout__resumo-destaques svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--agencia-teal);
}

.agencia-reserva-layout__resumo-preco {
	margin: 0 0 0.85rem;
	font-size: 0.85rem;
	color: var(--agencia-muted);
}

.agencia-reserva-layout__resumo-preco strong {
	display: block;
	font-family: var(--agencia-font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--agencia-accent);
	line-height: 1.3;
}

.agencia-reserva-layout__resumo-pagamentos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.agencia-reserva-layout__resumo-pagamentos li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.82rem;
	color: var(--agencia-muted);
	padding-bottom: 0.5rem;
	border-bottom: 1px dashed var(--agencia-border);
}

.agencia-reserva-layout__resumo-pagamentos li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.agencia-reserva-layout__resumo-pagamentos strong {
	color: var(--agencia-primary);
	font-weight: 700;
	white-space: nowrap;
}

.agencia-reserva-layout__resumo-eyebrow {
	margin: 0 0 0.3rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--agencia-accent);
}

.agencia-reserva-layout__resumo-titulo {
	margin: 0 0 1rem;
	font-family: var(--agencia-font-heading);
	font-size: 1.15rem;
	font-style: italic;
	font-weight: 700;
	color: var(--agencia-primary);
	line-height: 1.3;
}

.agencia-reserva-layout__resumo-linha {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	color: var(--agencia-muted);
}

.agencia-reserva-layout__resumo-linha:last-child {
	margin-bottom: 0;
}

.agencia-reserva-layout__resumo-linha svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 0.05rem;
	color: var(--agencia-teal);
}

.agencia-reserva-layout__resumo-linha strong {
	color: var(--agencia-primary);
}

@media (max-width: 782px) {
	.agencia-reserva-layout {
		grid-template-columns: 1fr;
	}

	.agencia-reserva-layout__resumo {
		position: static;
	}
}

/* Reserva wizard (etapas com progresso) */

.agencia-reserva-wizard__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}

.agencia-reserva-wizard__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: var(--agencia-accent);
	color: #fff;
	font-family: var(--agencia-font-heading);
	font-weight: 700;
	font-size: 0.8rem;
}

.agencia-reserva-wizard__topo-titulo {
	font-family: var(--agencia-font-heading);
	font-weight: 700;
	font-size: 1rem;
	color: var(--agencia-primary);
}

.agencia-reserva-wizard__barra {
	background: var(--agencia-bg-soft);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.agencia-reserva-wizard__barra-preenchida {
	display: block;
	height: 100%;
	width: 25%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--agencia-teal), var(--agencia-accent));
	transition: width 0.35s ease;
}

.agencia-reserva-wizard__passos {
	display: flex;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	gap: 0.5rem;
}

.agencia-reserva-wizard__passo {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-align: center;
}

.agencia-reserva-wizard__passo-label {
	overflow-wrap: break-word;
}

.agencia-reserva-wizard__passo-bolha {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--agencia-border);
	color: var(--agencia-muted);
	font-family: var(--agencia-font-heading);
	font-weight: 700;
	font-size: 0.9rem;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.agencia-reserva-wizard__passo-check {
	display: none;
	width: 16px;
	height: 16px;
}

.agencia-reserva-wizard__passo-label {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--agencia-muted);
}

.agencia-reserva-wizard__passo--ativo .agencia-reserva-wizard__passo-bolha {
	border-color: var(--agencia-accent);
	color: var(--agencia-accent);
	transform: scale(1.08);
}

.agencia-reserva-wizard__passo--ativo .agencia-reserva-wizard__passo-label {
	color: var(--agencia-primary);
}

.agencia-reserva-wizard__passo--concluido .agencia-reserva-wizard__passo-bolha {
	background: var(--agencia-teal);
	border-color: var(--agencia-teal);
	color: #fff;
}

.agencia-reserva-wizard__passo--concluido .agencia-reserva-wizard__passo-numero {
	display: none;
}

.agencia-reserva-wizard__passo--concluido .agencia-reserva-wizard__passo-check {
	display: block;
}

.agencia-reserva-wizard__passo--concluido .agencia-reserva-wizard__passo-label {
	color: var(--agencia-primary);
}

.agencia-reserva-wizard__reforco {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--agencia-accent-soft);
	color: var(--agencia-accent-dark);
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	margin: 0 0 1.5rem;
}

.agencia-reserva-wizard__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.agencia-reserva-wizard__nav .agencia-btn--outline {
	margin-right: auto;
}

.agencia-reserva-wizard__nav svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 560px) {
	.agencia-reserva-wizard__passo-label {
		display: none;
	}
}

.agencia-reserva-wizard__stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.agencia-reserva-wizard__stepper-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid var(--agencia-border);
	border-radius: 50%;
	background: #fff;
	color: var(--agencia-primary);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.agencia-reserva-wizard__stepper-btn:hover {
	background: var(--agencia-bg-light);
	border-color: var(--agencia-primary);
	color: var(--agencia-primary-dark);
}

.agencia-reserva-wizard__stepper-input {
	width: 3.5rem !important;
	max-width: 3.5rem !important;
	text-align: center;
	-moz-appearance: textfield;
}

.agencia-reserva-wizard__stepper-input::-webkit-outer-spin-button,
.agencia-reserva-wizard__stepper-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.agencia-reserva-wizard__total-bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.5rem -2rem -2rem;
	padding: 1rem 2rem;
	background: var(--agencia-bg-soft);
	border-top: 1px solid var(--agencia-border);
	border-radius: 0 0 var(--agencia-radius) var(--agencia-radius);
}

.agencia-reserva-wizard__total-label {
	font-weight: 600;
	color: var(--agencia-muted);
	font-size: 0.9rem;
}

.agencia-reserva-wizard__total-valor {
	font-family: var(--agencia-font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--agencia-accent);
}

/* Termos modal */

.agencia-termos-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--agencia-accent);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
}

.agencia-termos-link:hover {
	color: var(--agencia-accent-dark);
}

body.agencia-termos-aberto {
	overflow: hidden;
}

.agencia-termos-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.agencia-termos-modal[hidden] {
	display: none;
}

.agencia-termos-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(63, 18, 16, 0.6);
}

.agencia-termos-modal__caixa {
	position: relative;
	background: #fff;
	border-radius: var(--agencia-radius);
	box-shadow: var(--agencia-shadow);
	max-width: 640px;
	width: 100%;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.agencia-termos-modal__cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--agencia-bg-soft);
}

.agencia-termos-modal__cabecalho h3 {
	margin: 0;
	font-family: var(--agencia-font-heading);
	color: var(--agencia-primary);
	font-size: 1.1rem;
}

.agencia-termos-modal__fechar {
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--agencia-muted);
	cursor: pointer;
	padding: 0.25rem;
}

.agencia-termos-modal__fechar:hover {
	color: var(--agencia-primary);
}

.agencia-termos-modal__corpo {
	padding: 1.25rem 1.5rem;
	overflow-y: auto;
	color: var(--agencia-text);
	font-size: 0.9rem;
	line-height: 1.6;
}

.agencia-termos-modal__corpo p {
	margin: 0 0 1rem;
}

.agencia-termos-modal__rodape {
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--agencia-bg-soft);
	text-align: right;
}

/* Testimonials */

.agencia-depoimentos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
	margin: 1.5rem 0;
}

.agencia-depoimento {
	background: var(--agencia-bg-light);
	border-radius: var(--agencia-radius);
	padding: 1.5rem;
	margin: 0;
	border-left: 4px solid var(--agencia-teal);
}

.agencia-depoimento p {
	margin: 0 0 0.75rem;
	font-style: italic;
	line-height: 1.6;
}

.agencia-depoimento cite {
	font-style: normal;
	font-weight: 600;
	color: var(--agencia-primary);
}

/* Login */

.agencia-login {
	max-width: 420px;
	margin: 3rem auto;
	padding: 2rem;
	background: #fff;
	border-radius: var(--agencia-radius);
	box-shadow: var(--agencia-shadow);
}

.agencia-login-form p {
	margin: 0.9rem 0;
}

.agencia-login-form label {
	display: block;
	font-weight: 600;
	color: var(--agencia-primary);
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
}

.agencia-login-form input[type="text"],
.agencia-login-form input[type="password"] {
	width: 100%;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--agencia-border);
	border-radius: 8px;
	font-family: var(--agencia-font-body);
	font-size: 0.95rem;
}

.agencia-login--logado {
	text-align: center;
}

.agencia-login__icone {
	width: 64px;
	height: 64px;
	margin: 0 auto 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--agencia-teal);
	color: #fff;
	font-size: 1.75rem;
	font-weight: 700;
}

.agencia-login--logado h1 {
	margin-bottom: 0.5rem;
}

.agencia-login__usuario {
	color: var(--agencia-muted);
	margin-bottom: 1.75rem;
}

.agencia-login__acoes {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.agencia-login__acoes .agencia-btn {
	width: 100%;
}

/* Minhas reservas */

.agencia-minhas-reservas-card {
	max-width: 1100px;
	margin: 2.5rem auto;
	padding: 0 1.5rem;
}

.agencia-minhas-reservas {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: var(--agencia-radius);
	overflow: hidden;
	box-shadow: var(--agencia-shadow);
}

.agencia-minhas-reservas th,
.agencia-minhas-reservas td {
	padding: 0.9rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid var(--agencia-bg-soft);
}

.agencia-minhas-reservas th {
	background: var(--agencia-primary);
	color: #fff;
	font-family: var(--agencia-font-heading);
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.agencia-minhas-reservas tbody tr:last-child td {
	border-bottom: none;
}

/* Status badges */

.agencia-status-badge {
	display: inline-block;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
}

.agencia-status-badge--confirmada {
	background: #e3f8f1;
	color: #0b8a63;
}

.agencia-status-badge--parcial {
	background: #e5f4fb;
	color: #0f6fa3;
}

.agencia-status-badge--pendente {
	background: #fff3e0;
	color: #b06a00;
}

.agencia-status-badge--cancelada {
	background: #fdecea;
	color: #a12a20;
}

/* Obrigado */

.agencia-obrigado {
	max-width: 640px;
	margin: 3rem auto;
	padding: 2.5rem;
	text-align: center;
	background: #fff;
	border-radius: var(--agencia-radius);
	box-shadow: var(--agencia-shadow);
}

.agencia-obrigado__icone {
	width: 64px;
	height: 64px;
	margin: 0 auto 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--agencia-teal);
	color: #fff;
	font-size: 1.75rem;
	font-weight: 700;
}

.agencia-card,
.agencia-obrigado-resumo {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1.5rem;
	text-align: left;
}

.agencia-obrigado-resumo th,
.agencia-obrigado-resumo td {
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--agencia-bg-soft);
}

.agencia-obrigado-resumo tbody tr:last-child th,
.agencia-obrigado-resumo tbody tr:last-child td {
	border-bottom: none;
}

/* Pagamento */

.agencia-pagamento-pix,
.agencia-pagamento-cartao {
	border: 1px solid var(--agencia-bg-soft);
	border-radius: var(--agencia-radius);
	padding: 1.5rem;
	margin: 1.5rem 0;
	background: var(--agencia-bg-light);
}

.agencia-pagamento-pix__qrcode {
	display: block;
	width: 220px;
	height: 220px;
	margin: 0.75rem auto;
	border-radius: 8px;
}

.agencia-pagamento-pix__codigo {
	width: 100%;
	max-width: 420px;
	font-family: monospace;
	font-size: 0.85em;
	padding: 0.6rem;
	border: 1px solid var(--agencia-border);
	border-radius: 8px;
}

.agencia-pagamento-pix__aviso {
	font-size: 0.85em;
	color: var(--agencia-muted);
}

.agencia-pagamento-pix__copiar {
	display: block;
	margin: 0.5rem auto 0;
	padding: 0.6rem 1.4rem;
	border-radius: 999px;
	border: 2px solid var(--agencia-primary);
	background: transparent;
	color: var(--agencia-primary);
	font-family: var(--agencia-font-heading);
	font-weight: 600;
	cursor: pointer;
}

.agencia-pagamento-pix__copiar:hover {
	background: var(--agencia-primary);
	color: #fff;
}

.agencia-pagamento-erro {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	border-radius: var(--agencia-radius);
	padding: 0.9rem 1.2rem;
	margin-bottom: 1.5rem;
	color: #a12a20;
}

.agencia-pagamento-cartao__mensagem {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	border-radius: var(--agencia-radius);
	padding: 0.75rem 1rem;
	margin-top: 1rem;
	color: #a12a20;
	font-size: 0.9em;
}

/* Site-wide header/footer branding (theme header + plugin-generated footer) */

.wp-block-site-title,
.wp-block-site-title a {
	font-family: var(--agencia-font-heading);
	font-weight: 700;
	color: var(--agencia-primary);
	text-decoration: none;
}

.wp-block-navigation {
	font-family: var(--agencia-font-body);
}

.wp-block-navigation a {
	color: var(--agencia-text);
}

.wp-block-navigation a:hover {
	color: var(--agencia-accent);
}

/* Top utility bar (thin strip above the header, quick trust reassurances) */

.agencia-topbar {
	background: var(--agencia-primary-dark);
}

.agencia-topbar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.5rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.75rem;
	font-family: var(--agencia-font-body);
	font-size: 0.78rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
}

.agencia-topbar__inner span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	position: relative;
}

.agencia-topbar__inner span:not(:last-child)::after {
	content: '';
	position: absolute;
	right: -0.875rem;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
}

.agencia-topbar__icone {
	width: 13px;
	height: 13px;
	color: var(--agencia-teal);
	flex-shrink: 0;
}

/* On classic (non-block) active themes, e.g. Hello Elementor in
   production, get_header()/get_footer() render the theme's own bare
   header.php/footer.php directly — the render_block_core/template-part
   swap below never fires there, so TemplateLoader also injects the
   agency header/footer via wp_body_open/wp_footer (see
   render_classic_theme_header/footer()) and we hide the theme's
   native wrappers here so they don't show up empty/unstyled alongside. */
body.agencia-classic-theme #site-header,
body.agencia-classic-theme #site-footer,
body.agencia-classic-theme .site-header,
body.agencia-classic-theme .site-footer {
	display: none !important;
}

/* Site header (logo + nav, replaces the theme's block header everywhere) */

.agencia-site-header {
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	box-shadow: 0 1px 0 rgba(36, 26, 24, 0.06);
	position: sticky;
	top: 0;
	z-index: 40;
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
	/* The theme applies a default margin-block-start to every direct child
	   of .wp-site-blocks (via :where(), so any real selector overrides it).
	   Without this, a visible white sliver appears between the topbar and
	   the header, since this header is the 2nd child of that wrapper. */
	margin-block-start: 0;
}

.agencia-site-header__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1.5rem;
	min-height: 78px;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

@media (min-width: 1024px) {
	.agencia-site-header__inner {
		padding: 0 5rem;
	}
}

.agencia-site-header__logo {
	display: block;
	line-height: 0;
	margin-right: auto;
	transition: opacity 0.2s ease;
}

.agencia-site-header__logo:hover {
	opacity: 0.85;
}

.agencia-site-header__logo img {
	display: block;
	width: auto;
	height: 44px;
	object-fit: contain;
}

.agencia-site-header__nav {
	display: none;
	align-items: center;
	gap: 2rem;
	margin-left: 2.5rem;
}

.agencia-site-header__nav a {
	font-family: var(--agencia-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--agencia-text);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.agencia-site-header__nav a:hover {
	color: var(--agencia-primary);
}

@media (min-width: 1024px) {
	.agencia-site-header__nav {
		display: flex;
	}
}

.agencia-site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
	position: relative;
}

.agencia-site-header__cta {
	display: none;
	height: 42px;
	padding: 0 1.4rem;
	font-size: 0.92rem;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.agencia-site-header__cta {
		display: inline-flex;
	}
}

.agencia-site-header__anfitriao {
	font-family: var(--agencia-font-body);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--agencia-text);
	text-decoration: none;
	white-space: nowrap;
	padding: 0.65rem 0.9rem;
	border-radius: 999px;
	transition: background 0.2s ease;
}

.agencia-site-header__anfitriao:hover {
	background: var(--agencia-bg-light);
}

.agencia-site-header__globe {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: var(--agencia-text);
	cursor: pointer;
	transition: background 0.2s ease;
}

.agencia-site-header__globe:hover {
	background: var(--agencia-bg-light);
}

.agencia-site-header__globe svg {
	width: 20px;
	height: 20px;
}

.agencia-site-header__menu {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	height: 42px;
	padding: 0.4rem 0.5rem 0.4rem 0.85rem;
	border: 1px solid var(--agencia-border);
	border-radius: 999px;
	background: #fff;
	color: var(--agencia-text);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(36, 26, 24, 0.1);
	transition: box-shadow 0.2s ease;
}

.agencia-site-header__menu:hover {
	box-shadow: 0 2px 6px rgba(36, 26, 24, 0.16);
}

.agencia-site-header__menu-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.agencia-site-header__menu-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--agencia-muted);
	color: #fff;
	flex-shrink: 0;
	overflow: hidden;
}

.agencia-site-header__menu-avatar svg {
	width: 22px;
	height: 22px;
}

.agencia-site-header__dropdown {
	display: none;
	flex-direction: column;
	align-items: stretch;
	gap: 0.15rem;
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 260px;
	background: #fff;
	border-radius: var(--agencia-radius);
	box-shadow: 0 8px 28px rgba(36, 26, 24, 0.18);
	padding: 0.65rem;
	z-index: 41;
}

.agencia-site-header__dropdown--aberto {
	display: flex;
}

.agencia-site-header__dropdown-divisor {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0.4rem 0;
	background: var(--agencia-border);
}

.agencia-site-header__dropdown-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	color: var(--agencia-primary);
}

.agencia-site-header__dropdown-icon svg {
	width: 20px;
	height: 20px;
}

/* Busca principal ("Encontrar hospedagem") em destaque no topo do
   dropdown mobile/tablet, no estilo campo-de-busca — sem ela, quem acessa
   abaixo de 1024px não tinha nenhum caminho visível até a ação de
   conversão mais importante do header. */
.agencia-site-header__dropdown-busca {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	padding: 0.75rem 0.85rem;
	border: 1.5px solid var(--agencia-primary);
	border-radius: 999px;
	background: var(--agencia-bg-light);
	font-family: var(--agencia-font-body);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--agencia-primary);
	text-decoration: none;
	transition: background 0.15s ease;
}

.agencia-site-header__dropdown-busca:hover {
	background: var(--agencia-bg-soft);
}

.agencia-site-header__dropdown-busca .agencia-site-header__dropdown-icon {
	width: 18px;
	height: 18px;
}

.agencia-site-header__dropdown-busca .agencia-site-header__dropdown-icon svg {
	width: 18px;
	height: 18px;
}

.agencia-site-header__dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border-radius: 10px;
	text-decoration: none;
	transition: background 0.15s ease;
}

.agencia-site-header__dropdown-item:hover {
	background: var(--agencia-bg-light);
}

.agencia-site-header__dropdown-texto {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.agencia-site-header__dropdown-texto strong {
	font-family: var(--agencia-font-body);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--agencia-text);
}

.agencia-site-header__dropdown-texto small {
	font-size: 0.78rem;
	color: var(--agencia-muted);
}

@media (max-width: 640px) {
	.agencia-site-header__anfitriao,
	.agencia-site-header__globe {
		display: none;
	}
}

/* Site footer */

.agencia-site-footer {
	background: var(--agencia-bg-light);
	color: var(--agencia-text);
	padding: 3.5rem 1.5rem 2rem;
	margin-top: 0;
	border-top: 1px solid var(--agencia-border);
}

.agencia-site-footer__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(240px, 1.3fr) repeat(3, 1fr);
	gap: 2.5rem;
	text-align: left;
	padding-bottom: 2.5rem;
}

.agencia-site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.agencia-site-footer__titulo {
	font-family: var(--agencia-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--agencia-text);
	margin: 0 0 0.2rem;
}

.agencia-site-footer__nav {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.agencia-site-footer__nav a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--agencia-muted);
	text-decoration: none;
	font-size: 0.92rem;
}

.agencia-site-footer__nav a:hover {
	color: var(--agencia-primary);
	text-decoration: underline;
}

.agencia-site-footer__nav-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--agencia-primary);
	opacity: 0.85;
}

.agencia-site-footer__nav-icone svg {
	width: 100%;
	height: 100%;
}

/* Bloco de marca (logo + descrição + CTA WhatsApp) */

.agencia-site-footer__marca {
	gap: 1.1rem;
}

.agencia-site-footer__logo {
	display: inline-block;
}

.agencia-site-footer__logo img {
	height: 40px;
	width: auto;
	display: block;
}

.agencia-site-footer__descricao {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--agencia-muted);
}

.agencia-site-footer__whatsapp {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background: #fff;
	border: 1px solid var(--agencia-border);
	border-radius: var(--agencia-radius-large);
	padding: 0.85rem 1rem;
	text-decoration: none;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.agencia-site-footer__whatsapp:hover {
	border-color: var(--agencia-primary);
	box-shadow: var(--agencia-shadow-medium);
	transform: translateY(-1px);
}

.agencia-site-footer__whatsapp-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--agencia-bg-light);
	color: var(--agencia-primary);
}

.agencia-site-footer__whatsapp-icone svg {
	width: 20px;
	height: 20px;
}

.agencia-site-footer__whatsapp-textos {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	flex: 1 1 auto;
	min-width: 0;
}

.agencia-site-footer__whatsapp-titulo {
	font-family: var(--agencia-font-heading);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--agencia-text);
}

.agencia-site-footer__whatsapp-sub {
	font-size: 0.8rem;
	color: var(--agencia-muted);
}

.agencia-site-footer__whatsapp-seta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--agencia-primary);
}

.agencia-site-footer__whatsapp-seta svg {
	width: 100%;
	height: 100%;
}

/* Coluna Contato: lista de itens com divisores */

.agencia-site-footer__contato-lista {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* Sem padding vertical: o item antigo (lista empilhada, com linhas
   horizontais entre eles) usava 0.75rem em cima/embaixo como respiro. Lado a
   lado esse padding só empurrava o ícone/texto para baixo, destoando da
   primeira linha das colunas "Explorar"/"Suporte" ao lado. */
.agencia-site-footer__contato-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0;
	text-decoration: none;
	color: inherit;
}

.agencia-site-footer__contato-item:hover .agencia-site-footer__contato-titulo {
	color: var(--agencia-primary);
}

/* Itens lado a lado agora — o divisor vira uma linha vertical entre eles em
   vez da linha horizontal usada quando a lista era empilhada. */
.agencia-site-footer__contato-divisor {
	align-self: stretch;
	border: none;
	border-left: 1px solid var(--agencia-border);
	margin: 0 1.25rem;
}

.agencia-site-footer__contato-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--agencia-bg-light);
	color: var(--agencia-primary);
}

.agencia-site-footer__contato-icone svg {
	width: 17px;
	height: 17px;
}

.agencia-site-footer__contato-textos {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.agencia-site-footer__contato-titulo {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--agencia-text);
	transition: color 0.2s ease;
}

.agencia-site-footer__contato-sub {
	font-size: 0.78rem;
	color: var(--agencia-muted);
}

/* Bloco de newsletter */

.agencia-site-footer__newsletter {
	max-width: 1180px;
	margin: 0 auto 2.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	background: #fff;
	border: 1px solid var(--agencia-border);
	border-radius: var(--agencia-radius-large);
	padding: 1.75rem 2rem;
}

.agencia-site-footer__newsletter-info {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1 1 320px;
	min-width: 0;
}

.agencia-site-footer__newsletter-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--agencia-bg-light);
	color: var(--agencia-primary);
}

.agencia-site-footer__newsletter-icone svg {
	width: 21px;
	height: 21px;
}

.agencia-site-footer__newsletter-titulo {
	margin: 0 0 0.15rem;
	font-family: var(--agencia-font-heading);
	font-weight: 600;
	font-size: 1rem;
	color: var(--agencia-text);
}

.agencia-site-footer__newsletter-descricao {
	margin: 0;
	font-size: 0.85rem;
	color: var(--agencia-muted);
}

.agencia-site-footer__newsletter-form {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex: 0 1 420px;
	min-width: 260px;
}

.agencia-site-footer__newsletter-form input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--agencia-border);
	border-radius: var(--agencia-radius-pill);
	font-size: 0.9rem;
	font-family: var(--agencia-font-body);
	color: var(--agencia-text);
	background: var(--agencia-bg-light);
}

.agencia-site-footer__newsletter-form input[type="email"]:focus {
	outline: none;
	border-color: var(--agencia-primary);
}

.agencia-site-footer__newsletter-form .agencia-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

.agencia-site-footer__newsletter-feedback {
	max-width: 1180px;
	margin: -1.5rem auto 1.5rem;
	padding: 0 2rem;
	font-size: 0.85rem;
	text-align: right;
}

.agencia-site-footer__newsletter-feedback--sucesso {
	color: #2e7d4f;
}

.agencia-site-footer__newsletter-feedback--erro {
	color: var(--agencia-primary);
}

.agencia-site-footer__bottom {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--agencia-border);
}

.agencia-site-footer__copy {
	margin: 0;
	font-size: 0.85rem;
	color: var(--agencia-muted);
}

.agencia-site-footer__copy a {
	color: var(--agencia-muted);
	text-decoration: underline;
}

.agencia-site-footer__copy a:hover {
	color: var(--agencia-primary);
}

.agencia-site-footer__copy-divisor {
	margin: 0 0.5rem;
	color: var(--agencia-border);
}

.agencia-site-footer__redes {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.agencia-site-footer__redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--agencia-border);
	color: var(--agencia-muted);
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.agencia-site-footer__redes a svg {
	width: 17px;
	height: 17px;
}

.agencia-site-footer__redes a:hover,
.agencia-site-footer__redes a:focus-visible {
	color: #fff;
	background: var(--agencia-primary);
	border-color: var(--agencia-primary);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(166, 51, 46, 0.25);
}

@media (max-width: 900px) {
	.agencia-site-footer__inner {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}

	.agencia-site-footer__marca {
		grid-column: 1 / -1;
	}

	.agencia-site-footer__whatsapp {
		max-width: 420px;
	}

	.agencia-site-footer__newsletter {
		padding: 1.5rem;
	}

	.agencia-site-footer__newsletter-feedback {
		padding: 0 1.5rem;
	}
}

@media (max-width: 600px) {
	.agencia-site-footer__inner {
		/* Explorar e Suporte (as duas colunas de navegação) lado a lado
		   nessa largura em vez de empilhadas — sobra bastante espaço
		   horizontal ocioso com uma coluna só. Marca e Contato continuam
		   ocupando a linha inteira (ver grid-column abaixo). */
		grid-template-columns: repeat(2, 1fr);
		column-gap: 1.5rem;
		gap: 2rem;
	}

	.agencia-site-footer__col--contato {
		grid-column: 1 / -1;
	}

	.agencia-site-footer__marca {
		grid-column: 1 / -1;
		/* Sem isso, logo/descrição/whatsapp só empilham em fluxo normal de
		   bloco (a `.agencia-site-footer__marca` nunca declara display, então
		   o `gap` do desktop nem chega a fazer efeito). No mobile, a logo
		   sozinha numa linha e o parágrafo inteiro embaixo dela desperdiça
		   espaço horizontal — colocamos os dois lado a lado numa grade de 2
		   colunas (logo | texto), com o WhatsApp ocupando a linha toda
		   embaixo. */
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		row-gap: 1.1rem;
		align-items: start;
	}

	.agencia-site-footer__logo {
		grid-row: 1;
		grid-column: 1;
	}

	.agencia-site-footer__descricao {
		grid-row: 1;
		grid-column: 2;
	}

	.agencia-site-footer__whatsapp {
		grid-column: 1 / -1;
		max-width: none;
	}

	.agencia-site-footer__newsletter {
		flex-direction: column;
		align-items: stretch;
		padding: 1.5rem;
	}

	/* Em flex-direction:row (desktop/tablet) o `flex: 1 1 320px` do bloco de
	   info e o `flex: 0 1 420px` do form definem LARGURA. Ao virar coluna
	   aqui, esses valores de flex-basis passam a valer para ALTURA — o
	   bloco de info "crescia" (flex-grow:1) para preencher a altura
	   sobrando, abrindo um vão vazio enorme antes do campo de e-mail. Sem
	   eixo para distribuir, os dois viram blocos de altura natural. */
	.agencia-site-footer__newsletter-info {
		flex: 0 0 auto;
	}

	.agencia-site-footer__newsletter-form {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
	}

	.agencia-site-footer__newsletter-feedback {
		text-align: left;
		padding: 0 1.5rem;
	}

	.agencia-site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.agencia-site-footer__copy-divisor {
		display: none;
	}

	.agencia-site-footer__copy br {
		display: none;
	}
}