/*
GERAL
*/

body {
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	text-decoration: none;
	color: #000000;
	margin: 0;
	padding: 0;
}

a {
   text-decoration: none; 
}

/*
OTIMIZAÇÃO DE FONTES
*/

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/*
MENU
*/

#menu {
	display: flex;
	/* Coluna: a barra (.row-menu) fica em cima e o dropdown mobile (.menu,
	   abaixo) empilha logo depois dela, empurrando o resto da página quando
	   abre — em vez de flutuar por cima (position:absolute). */
	flex-direction: column;
	align-items: center;
	width: 100%;
	background-color: #FFFFFF;
	justify-content: center;
}

.row-menu {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	width: 90%;
	
}

.logo {
	width: 200px;
	height: 74px;
	background-image: url('../img/logo350.png') ;
	background-size: 176px;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 0px;
}


.btn-whatsapp {
	width: 27px;
	height: 27px;
	float: right;
	color: #0E2E50;
	cursor: pointer;
}

.btn-whatsapp svg {
	width: 100%;
	height: 100%;
	display: block;
}

/*
GRUPO WHATSAPP + INSTAGRAM NO CABEÇALHO (index.html, 2026-09-05) -----------
Item "c" da avaliação de credibilidade: o Instagram (@brstudios.imob) é o
canal de captação de leads, mas só aparecia como ícone pequeno no rodapé —
elevado aqui pro cabeçalho, ao lado do WhatsApp, com a mesma proeminência.
Por enquanto só em index.html (protótipo p/ avaliação do usuário, mesmo
esquema das regras .logo-link/.menu-desktop/.whatsapp-link do bloco
desktop mais abaixo) — replicar nas demais páginas se aprovado.
*/
.social-links {
	display: flex;
	align-items: center;
	gap: 18px;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 18px;
}

.header-left-spacer {
	width: 25px;
	height: 25px;
	visibility: hidden;
}

.instagram-link {
	display: flex;
	color: #0E2E50;
	cursor: pointer;
}

.instagram-link:hover {
	color: #874470;
}

.btn-instagram {
	width: 25px;
	height: 25px;
	display: block;
}

/*
BOTAO MENU MOBILE
*/

.btn-menu {
	width: 30px;
	height: 23px;
	float: left;
	text-align: center;
	color: #0E2E50;
	cursor: pointer;
	/* reset de aparência padrão de <button> (inofensivo quando aplicado a um <img>,
	   nas páginas ainda não migradas para o botão acessível) */
	background: none;
	border: none;
	padding: 0;
	display: block;
}

.btn-menu svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Menu mobile: painel dropdown claro logo abaixo do cabeçalho — não é mais
   um overlay escuro cobrindo a tela toda, nem flutua por cima do resto da
   página: fica no fluxo normal de #menu (flex-direction:column, acima),
   então ao abrir empurra o conteúdo abaixo em vez de sobrepor. position:
   relative (sem sair do fluxo) só pra ancorar o "×" de fechar dentro do
   próprio painel — ver #menu-principal .btn-close. */
.menu {
	display: none;
	position: relative;
	width: 100%;
	background-color: #ffffff;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 12px 24px -8px;
}

.btn-close {
	font-size: 2rem;
	color: #0E2E50;
	float: right;
	cursor: pointer;
	margin-right: 20px;
	/* reset de aparência padrão de <button>, inofensivo em páginas com <a class="btn-close"> */
	background: none;
	border: none;
	padding: 0;
}

/* Posição do "×" de fechar dentro do painel — escopado a esta página só, via #menu-principal */
#menu-principal .btn-close {
	position: absolute;
	top: 10px;
	right: 16px;
	font-size: 2rem;
	line-height: 1;
	float: none;
	margin-right: 0;
}

.menu ul {
	width: 100%;
	margin: 0;
	/* zera o padding-left padrão do navegador pra <ul> (reserva de espaço pro
	   marcador de lista) — sem isso, com width:100%, o <ul> ficava 40px mais
	   largo que o container e causava rolagem horizontal na página */
	padding: 0;
	float: none;
	text-align: left;
}

.menu li {
	padding: 0px;
	margin-left: 0px;
	list-style: none;
	border-bottom: 1px solid #ADD8E6;
}

.menu li:last-child {
	border-bottom: none;
}

.menu li a {
	display: block;
	font-size: 1.1em;
	color: #0E2E50;
	padding: 16px 24px;
	text-decoration: none;
}

.menu li:hover a {
	color: #2EB4AD;
}

/*
MENU HORIZONTAL DESKTOP
*/

/* Substitui o hambúrguer no desktop (.btn-menu escondido no bloco
   min-width:1000px) por uma navegação em texto no próprio cabeçalho.
   Escondido no mobile por padrão — só aparece a partir do breakpoint desktop. */
.menu-desktop {
	display: none;
}

.menu-desktop ul {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 36px;
}

.menu-desktop a {
	color: #0E2E50;
	/* 400 (não 700) porque só as variantes 400/700 do Open Sans são
	   carregadas (ver <link> do Google Fonts no <head>) — um peso
	   intermediário como 500 cairia pro 400 mesmo, então já usa direto. */
	font-weight: 400;
	font-size: 0.95rem;
	text-decoration: none;
}

.menu-desktop a:hover {
	color: #2EB4AD;
}

/*
HEADER
*/

#header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    height: 330px;
    align-items: center;
    text-align: center;
    background-color: #87CEEB; /* Mantido como fallback base */
    /* Sintaxe moderna com suporte a WebP */
    background-image: image-set(
        url('../img/fundobanner.webp') type('image/webp'),
        url('../img/fundobanner.jpg') type('image/jpeg')
    );
    /* Fallback para navegadores que não suportam image-set */
    background-image: -webkit-image-set(
        url('../img/fundobanner.webp') type('image/webp'),
        url('../img/fundobanner.jpg') type('image/jpeg')
    );
    /* Último fallback para navegadores muito antigos */
    background-image: url('../img/fundobanner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Camada de gradiente por cima da foto do header, nas cores da marca
   (#2D2D4E/#874470, mesmas do .cidade-hero das páginas de cidade) — melhora
   o contraste do texto branco em cima de qualquer trecho mais claro da foto.
   z-index:0 explícito pra garantir que fique atrás de .title1 (z-index:1
   abaixo) independente da ordem de pintura. Fica atrás de #filtro também,
   que já tem z-index:5 próprio (ver .titlefiltro #filtro mais abaixo). */
#header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(160deg, rgba(45, 45, 78, 0.55) 0%, rgba(135, 68, 112, 0.35) 55%, rgba(14, 46, 80, 0.15) 100%);
	pointer-events: none;
}

.titlefiltro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 90%;
}

.title1 {
	/* position:relative + z-index:1 só pra ficar acima do #header::before
	   (que tem z-index:0) — precisa estar aqui, não em .titlefiltro: #filtro
	   é posicionado "bottom:0" relativo ao ancestral posicionado mais próximo
	   (ver .titlefiltro #filtro abaixo), que precisa continuar sendo #header
	   (330px de altura) e não .titlefiltro (que só tem a altura do próprio
	   conteúdo) — senão o filtro sobe e cobre o título rotativo no mobile. */
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	/* 100% em vez de largura fixa: dá à frase rotativa (ver #titulo-rotativo)
	   toda a largura disponível em .titlefiltro pra reduzir quebra de linha —
	   ver .title1 h1 abaixo, que precisa da mesma largura explícita. */
	width: 100%;
	color: #ffffff;
	line-height: 180%;
	text-align: center;
	/* -1px (não -2px, como o resto de .titulo h1/h3 usado noutras páginas) —
	   mesmo tracking do título do hero das páginas studios-em-* (ver
	   .cidade-hero .titulo h1 mais abaixo), que ficava com aparência mais
	   "leve"/espaçada que o -2px original daqui. */
	letter-spacing: -1px;
	/* Sobe o H1 30px no mobile, dando mais respiro em relação ao #filtro
	   (que fica ancorado embaixo do #header via .titlefiltro #filtro,
	   position:absolute + bottom:0). Cancelado no desktop (ver bloco
	   min-width:1000px) onde o filtro fica ao lado, não embaixo. */
	transform: translateY(-30px);
}

.title1 h2 {
	font-size: 1.9rem;
}

.title1 h1 {
	font-size: 1.4rem;
	text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.45);
	/* Sem isso o h1 (item flex dentro de .title1) encolhe pro seu próprio
	   "fit-content" em vez de usar a largura cheia do container — com frases
	   mais longas (rotativas, ver #titulo-rotativo) isso causava uma quebra
	   de linha a mais do que o necessário. Cancelado no desktop (que já
	   ocupa a largura toda por conta própria, sem precisar disso). */
	width: 100%;
}

/* Frase rotativa do H1 (index): o JS troca o texto de #titulo-rotativo em
   intervalos, com um fade de opacidade — ver script "H1 rotativo" no
   index.html. Some/aparece só de opacidade, não afeta o layout ao redor. */
#titulo-rotativo {
	transition: opacity 0.4s ease;
}

#titulo-rotativo.title1-fade {
	opacity: 0;
}

/* Sem troca de frase pra quem pede menos movimento na tela (o JS lê essa
   mesma preferência e nem inicia o intervalo de rotação nesse caso; esta
   regra só evita qualquer fade residual caso o texto mude por outro meio). */
@media (prefers-reduced-motion: reduce) {
	#titulo-rotativo {
		transition: none;
	}
}

.title2 {
	position: absolute;
	top: 365px;
	color: #ffffff;
	line-height: 140%;
	text-align: left;
	padding: 6px;
	font-size: 1rem;
	letter-spacing: -0.5px;
	
}

.title2 a {
	color: #ffffff;
	text-decoration: none;
}

/*
FILTRO (cidade + preço)
*/

#filtro {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 25px 0px;
}

.filtro-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 90%;
	max-width: 700px;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
	padding: 20px;
	box-sizing: border-box;
}

.filtro-campo {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: left;
}

.filtro-campo label {
	font-size: 0.85rem;
	color: #808080;
	margin-bottom: 5px;
}

.filtro-campo select {
	padding: 10px;
	padding-right: 36px;
	border-radius: 6px;
	border: 1px solid #ADD8E6;
	font-size: 1rem;
	font-family: inherit;
	color: #0E2E50;
	background-color: #ffffff;
	/* Seta própria no lugar da nativa do navegador — só assim dá pra controlar
	   a distância dela até a borda (a nativa não aceita margin/padding). */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2E50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 16px;
}

.filtro-botao {
	padding: 12px 20px;
	border-radius: 6px;
	border: none;
	background-color: #874470;
	color: #ffffff;
	font-weight: bold;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

.filtro-botao:hover {
	background-color: #633653;
}

/* Filtro dentro do header da index (mobile): metade sobreposto na foto do
   header, metade na área branca abaixo — o filtro sai do fluxo normal (fica
   "position:absolute" relativo ao #header) e usa translateY(50%) pra descer
   exatamente a metade da própria altura, seja qual for essa altura. Não mexe
   na margem da .titulo logo abaixo, só sobrepõe visualmente por cima dela. */
.titlefiltro #filtro {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	width: 90%;
	max-width: 500px;
	padding: 0;
	z-index: 5;
}

.titlefiltro .filtro-form {
	width: 100%;
	max-width: 100%;
}

/*
TÍTULO VENDA
*/

.titulo {
	display: flex;
	flex-direction: column;
	margin: 60px auto 40px auto;
	width: 90%;
	align-items: center;
	text-align: center;
}

.titulo p {
	margin: 0px;
	padding: 0px;
	letter-spacing: -0.5px;
	font-size: 1.1rem;
	color: #808080;
}

.titulo h3 {
	letter-spacing: -2px;
	font-size: 1.7rem;
	margin: 0px 0px 3px 0px;
	padding: 0px;
	color: #0E2E50;
}

.titulo h1 {
	letter-spacing: -2px;
	font-size: 1.7rem;
	margin: 0px 0px 3px 0px;
	padding: 0px;
	color: #0E2E50;
}

/* Mesmo estilo de .titulo h3/h1 acima, só que pra h2 — usado nos títulos de
   seção da index (ex.: "Studios com alta procura", "Por que investir em
   studios", "Como funciona o processo de compra") que precisavam ficar h2
   por hierarquia (h1 é só o rotativo do header), sem herdar o tamanho grande
   do h2 padrão do navegador. Regra adicional, não altera .titulo h3/h1 já
   usados por outras páginas. letter-spacing -1px (não -2px, como .titulo
   h3/h1) pra bater com o tracking usado nos títulos das páginas
   studios-em-* (.cidade-hero .titulo h1 e .cidade-imoveis-titulo h2, ambos
   -1px), que ficam com aparência mais "leve"/espaçada que o -2px padrão. */
.titulo h2 {
	letter-spacing: -1px;
	font-size: 1.8rem;
	margin: 0px 0px 3px 0px;
	padding: 0px;
	color: #0E2E50;
}

.titulo img {
	margin: 7px;
}

/* No mobile, o filtro do header (#filtro, ver regra .titlefiltro #filtro)
   sobrepõe 50% da própria altura por cima desta seção — a margem padrão de
   60px não é suficiente pra abrir espaço, cobrindo o título "Studios com
   alta procura". Aumentada só nesta instância (classe extra, não mexe no
   .titulo genérico usado em #vantagens e nas outras páginas). No desktop o
   filtro não sobrepõe nada (vira coluna ao lado do título), então volta ao
   valor padrão de 60px lá embaixo. */
.titulo-pos-filtro {
	margin-top: 176px;
}

/*
IMÓVEIS VENDA
*/

#imoveis {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 10px 0px 60px 0px;
}

.resultado-contagem {
	display: none;
	width: 100%;
	text-align: center;
	margin: 0 0 15px 0;
	color: #808080;
	font-size: 0.95rem;
}

.resultado-contagem.visivel {
	display: block;
}

.resultado-vazio {
	display: none;
	width: 90%;
	max-width: 500px;
	margin: 20px auto 40px auto;
	text-align: center;
	color: #808080;
	font-size: 1rem;
	line-height: 150%;
}

.resultado-vazio.visivel {
	display: block;
}

.resultado-vazio a {
	color: #0E2E50;
	font-weight: bold;
	text-decoration: underline;
}

.box {
	display: flex;
	flex-direction: column;
	width: 350px;
	height: 430px;
	margin: 7.5px;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

/*
CARD MODELO — reaproveitado em todas as páginas de imóveis/cidade e nos
blocos "Imóveis semelhantes". Mudanças aqui ficam escopadas em .box-modelo
pra não afetar os outros cards .box ainda com os ícones antigos em PNG.
*/

.box-modelo .box-slide {
	position: relative;
	overflow: hidden;
	border-radius: 10px 10px 0 0;
}

/* Slider de fotos do card: scroll nativo com snap (funciona com o dedo no
   mobile sem JS nenhum) + setas opcionais pra desktop/mouse. Sem bullets nem
   barra de progresso, como pedido — só o scroll com snap mesmo. */
.box-slide-track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.box-slide-track::-webkit-scrollbar {
	display: none;
	height: 0;
}

.box-slide-link {
	display: block;
	width: 100%;
	height: 100%;
}

.box-slide-track img {
	flex: 0 0 100%;
	scroll-snap-align: start;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.box-slide-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 40px;
	height: 40px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px;
	border: none;
	padding: 0;
	cursor: pointer;
}

.box-slide-arrow-left {
	left: 8px;
	background-image: url('../img/setaleft.png');
}

.box-slide-arrow-right {
	right: 8px;
	background-image: url('../img/setaright.png');
}

.box-detail-link {
	display: block;
}

.box-tags {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

.box-tag {
	background-color: #8A00C4;
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: bold;
	letter-spacing: -0.3px;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.box-tag2 {
	background-color: #3AC400;
	color: #FFFFFF;
	font-size: 0.7rem;
	font-weight: bold;
	letter-spacing: -0.3px;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Segunda etiqueta empilhada (quando houver): roxo mais escuro que a primeira,
   pra dar hierarquia visual (status principal em cima, destaque secundário embaixo) */
.box-tags .box-tag:nth-child(2) {
	background-color: #F200FF;
}

.box-modelo .bd2A,
.box-modelo .bd2B,
.box-modelo .bd2C {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-image: none;
}

.box-modelo .bd2 p {
	margin: 0;
}


.box-slide {
	background-color: #e0e0e0;
	width: 100%;
	height: 250px;
}

.box-slide img {
	z-index: 2;
}

.bs-1 {
	position: relative;
	top: 10px;
	left: 8px;
	background-color: #ffffff;
	width: 80px;
	height: 20px;
	z-index: 2;
	margin: 0px
}

.bs-2 {
	position: relative;
	top: 40px;
	left: 8px;
	background-color: #ffffff;
	width: 80px;
	height: 20px;
	z-index: 2;
	margin: 0px;
}


.box-detail {
	width: 100%;
	height: 180px;
	text-align: left;
}

.bd1 {
	background-color: #fffff;
	width: 100%;
	height: 135px;
	padding: 20px;
	border-width: 0px 0px 1px 0px;
	border-color: #ADD8E6;
	border-style: dashed;
	box-sizing: border-box;
	line-height: 150%;
}

.bd1price {
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	color: #2EB4AD;
}

.bd1title {
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	color: #0E2E50;
}

.bd1adress {
	margin: 0px;
	padding: 0px;
	color: #808080;
	font-size: 0.9rem;
}

.bd1adress img{
	margin-right: 7px;
	vertical-align: middle;
}


.bd2 {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 45px;
	color: #808080;
	font-size: 0.9rem;
}

.bd2 p {
	margin-left: 50%;
}

.bd2A {
	width: 33%;
	border-width: 0px 1px 0px 0px;
	border-color: #ADD8E6;
	border-style: dashed;
	background-image: url('../img/im2.png') ;
	background-size: 28px;
	background-position: 20px;
	background-repeat: no-repeat;
	
}

.bd2B {
	width: 33%;
	background-image: url('../img/iquarto.png') ;
	background-size: 25px;
	background-position: 20px;
	background-repeat: no-repeat;
}

.bd2C {
	width: 33%;
	border-width: 0px 0px 0px 1px;
	border-color: #ADD8E6;
	border-style: dashed;
	background-image: url('../img/ibanh.png') ;
	background-size: 25px;
	background-position: 20px;
	background-repeat: no-repeat;
}


/*
BOTÃO
*/


.botao-todos {
	display: flex;
	margin-top: 40px;
	color: #000000;
	text-decoration: none;
	padding: 10px 30px;
	font-size: .9em;
	font-weight: bold;
	border-radius: 10px;
	border: 1px solid #0E2E50;
	color: #0E2E50;
}

.botao-invista {
	display: flex;
	margin-top: 10px;
	color: #000000;
	text-decoration: none;
	padding: 10px 30px;
	font-size: .9em;
	font-weight: bold;
	border-radius: 10px;
	border: 1px solid #FEFA71;
	color: #ffffff;
}

/*
ROW IMÓVEIS
*/

.row {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	width: 100%;
	max-width: 1100px;
	align-items: center;
	text-align: center;
}

.paginas {
	margin-top: 40px;
	padding: 0px;
	text-align: center;
	color: #0E2E50;
	font-weight: bold;
}	

.paginas a{
	text-decoration: underline;
	color: #0E2E50;
}


/*
VANTAGENS DE INVESTIR EM STUDIOS (index) — substitui as antigas seções
#invista (banner de foto + frase única) e #precos (tabela de preços/índices
FIPE, dado que exigia atualização mensal manual e não era mantida). Cards com
ícone explicando os principais motivos pra investir, fechando com um CTA pra
como-investir-em-studios.html. Título/intro reaproveitam o bloco .titulo
genérico (mesmo usado em "Studios com alta procura" logo acima).
*/

#vantagens {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background-color: #ffffff;
	padding: 10px 0px 70px 0px;
}

.vantagens-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	width: 90%;
	max-width: 1100px;
	margin: 10px auto 40px auto;
}

.vantagem-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 10px;
	background-color: #F8F6FB;
	border-radius: 12px;
	padding: 26px 22px;
}

.vantagem-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(46, 180, 173, 0.12);
	color: #2EB4AD;
	flex-shrink: 0;
}

.vantagem-icone svg {
	width: 24px;
	height: 24px;
}

.vantagem-card h3 {
	margin: 0px;
	padding: 0px;
	font-size: 1.1rem;
	letter-spacing: -0.5px;
	color: #0E2E50;
}

.vantagem-card p {
	margin: 0px;
	padding: 0px;
	font-size: 0.92rem;
	line-height: 155%;
	color: #6b6b7a;
}

.vantagens-cta {
	display: flex;
}

.botao-vantagens {
	display: flex;
	color: #ffffff;
	text-decoration: none;
	padding: 14px 34px;
	font-size: .95em;
	font-weight: bold;
	border-radius: 10px;
	background-color: #2EB4AD;
}

.botao-vantagens:hover {
	background-color: #26948e;
}

/*
COMO FUNCIONA O PROCESSO DE COMPRA (index) — seção logo depois de #vantagens,
mesmo padrão de card usado lá (ver .vantagem-card acima), só que numerado em
vez de com ícone: 4 passos do funil de vendas atual (filtro/catálogo →
WhatsApp → assessoria/documentação → fechamento), terminando num CTA direto
pro WhatsApp. Fundo lilás (mesmo tom de #imoveis.cidade-imoveis) pra
diferenciar do branco de #vantagens logo acima.
*/

#processo {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background-color: #F8F6FB;
	padding: 60px 0px 70px 0px;
}

.processo-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	width: 90%;
	max-width: 1100px;
	margin: 10px auto 40px auto;
}

.processo-passo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 10px;
	background-color: #ffffff;
	border-radius: 12px;
	padding: 26px 22px;
}

.processo-numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #0E2E50;
	color: #ffffff;
	font-weight: bold;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.processo-passo h3 {
	margin: 0px;
	padding: 0px;
	font-size: 1.1rem;
	letter-spacing: -0.5px;
	color: #0E2E50;
}

.processo-passo p {
	margin: 0px;
	padding: 0px;
	font-size: 0.92rem;
	line-height: 155%;
	color: #6b6b7a;
}

.processo-cta {
	display: flex;
}

/* Verde do WhatsApp (mesma lógica de marca do botão do menu) — deixa claro
   que o clique abre uma conversa, não navega pra outra página do site. */
.botao-processo {
	display: flex;
	color: #ffffff;
	text-decoration: none;
	padding: 14px 34px;
	font-size: .95em;
	font-weight: bold;
	border-radius: 10px;
	background-color: #25D366;
}

.botao-processo:hover {
	background-color: #1fb959;
}

/*
DEPOIMENTOS (index) — prova social logo antes do rodapé. Reaproveita
depoimentos reais de clientes da BR Lotes Imob, extraídos dos destaques do
Instagram @brlotes.imob (2026-09-05), já que a BR Studios ainda não tem
depoimentos próprios — ver [[home-depoimentos-section]] na memória do projeto.
Mesmo padrão de card usado em #vantagens/#processo (ver .vantagem-card/
.processo-passo acima). Fundo branco + cards lilás, fechando a alternância
branco/lilás/branco (#vantagens/#processo/#depoimentos) antes do rodapé
escuro.
*/
#depoimentos {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background-color: #ffffff;
	padding: 10px 0px 70px 0px;
}

.depoimentos-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	width: 90%;
	max-width: 1100px;
	margin: 10px auto 30px auto;
}

.depoimento-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 12px;
	background-color: #F8F6FB;
	border-radius: 12px;
	padding: 26px 22px;
}

.depoimento-estrelas {
	margin: 0px;
	padding: 0px;
	color: #F2B705;
	font-size: 0.95rem;
	letter-spacing: 3px;
}

.depoimento-texto {
	margin: 0px;
	padding: 0px;
	font-size: 0.95rem;
	line-height: 160%;
	color: #3a3a46;
}

.depoimento-autor {
	display: flex;
	align-items: center;
	gap: 12px;
}

.depoimento-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.depoimento-autor-info {
	display: flex;
	flex-direction: column;
}

.depoimento-autor-nome {
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	font-size: 0.9rem;
	color: #0E2E50;
}

.depoimento-autor-local {
	margin: 0px;
	padding: 0px;
	font-size: 0.85rem;
	color: #6b6b7a;
}

.depoimentos-instagram {
	margin: 0px;
}

.depoimentos-instagram a {
	color: #874470;
	font-weight: bold;
	text-decoration: none;
	font-size: 0.95rem;
}

.depoimentos-instagram a:hover {
	text-decoration: underline;
}

/* Faixa intermediária: 2 colunas antes do breakpoint desktop (min-width:1000px,
   onde vira 4 colunas — ver bloco correspondente mais abaixo no arquivo), pra
   não espremer os 4 cards numa faixa de tablet/notebook estreito. Precisa vir
   DEPOIS das regras base .vantagens-grid/.processo-grid acima (mesma
   especificidade — quem vem por último no arquivo vence a cascata).
   .depoimentos-grid entra na mesma regra mas fica em 2 colunas também no
   desktop (não tem override no bloco min-width:1000px mais abaixo) — 4
   depoimentos mais longos ficam apertados demais em 4 colunas. */
@media screen and (min-width: 640px) and (max-width: 999px) {
	.vantagens-grid,
	.processo-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 640px) {
	.depoimentos-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/*
QUEM SOMOS
*/

#qsomos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 10px 0px 60px 0px;
}

/*
RODAPÉ
*/

#rodape {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	width: 100%;
	align-items: center;
	background-color: #0E2E50;
	color: #ffffff;
	padding: 60px 0px 40px 0px;
}

/*
CORRETORES
*/

#corretores {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	width: 100%;
	align-items: center;
	padding: 60px 0px 100px 0px;
}

/*
ROW RODAPÉ
*/

.rowrod {
	display: flex;
	flex-direction: column;
	justify-content: left;
	margin: 0 auto;
	width: 90%;
	color: #C0C0C0;
}

.rod2 {
	display: flex;
	flex-direction: column;
	text-align: left;
	font-size: 0.9rem;
	margin: 0px 0px 40px 0px;
}

.rtitle {
	font-size: 1.3rem;
	font-weight: bold;
	margin-bottom: 20px;
	color: #ffffff;
}

.rod2 a {
	color: #C0C0C0;
	text-decoration: none;
}

.rod2 a:hover {
	color: #ffffff;
}

.rod2 p {
	margin-top: -8px;
}

.rod3 {
	display: flex;
	width: 100%;
	margin-top: 20px;
	align-items: center;
	flex-direction: row;
	text-align: left;
	font-size: 0.7rem;
	line-height: 160%;
	border-top: 1px solid #ffffff;
	padding-top: 30px;
	
}

.rod3 a {
	text-decoration: underline;
	color: #C0C0C0;
}

.rod3 a:hover {
	color: #ffffff;
}

.rod3 img {
	margin-right: 12px;
}


.rod4 {
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
	margin-top: -40px;
}

.rod4 img {
	margin-right: 15px;
}

.rod4 img:hover {
	filter: brightness(0) invert(1);
	
}

/*
PAGINA DO IMÓVEL ------------------------------------------------------------
*/

#slidermae {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    height: 450px;
    align-items: center;
    text-align: center;
}

#slider {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
#slider input[type=radio] {
   display: none;
}
#slider label {
   cursor:pointer;
   text-decoration: none;
}
slides {
    background: #fff;
    touch-action: pan-y pinch-zoom; /* Permite scroll vertical mas manipula horizontalmente */
    -webkit-overflow-scrolling: touch; /* Suaviza a rolagem em iOS */
    position: relative;
}

#overflow {
    width: 100%;
    overflow: hidden;
    touch-action: none; /* Previne comportamentos de touch padrão */
}

.inner {
    transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    width: 300%;
    line-height: 0;
    height: 410px;
    will-change: margin-left; /* Otimiza a performance da animação */
    touch-action: pan-x; /* Permite apenas movimento horizontal */
}

#slide1:checked ~ #slides .inner {
    margin-left: 0;
}

#slide2:checked ~ #slides .inner {
    margin-left: -33.3333%;
}

#slide3:checked ~ #slides .inner {
    margin-left: -66.6667%;
}

#slide4:checked ~ #slides .inner {
    margin-left: -100%;
}

#slide5:checked ~ #slides .inner {
    margin-left: -133.3333%;
}

#slide6:checked ~ #slides .inner {
    margin-left: -166.6667%;
}

#slide7:checked ~ #slides .inner {
    margin-left: -200%;
}

#slide8:checked ~ #slides .inner {
    margin-left: -233.3333%;
}

#slide9:checked ~ #slides .inner {
    margin-left: -266.6667%;
}

#slides .inner {
   transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
   width: 300%;
   line-height: 0;
   height: 410px;
}
#slides .slide {
   width: calc(100% / 9); /* 11.1% era arredondado, causando sobra crescente da imagem seguinte a cada slide (mais visível no mobile) */
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   color: #fff; 
}
#slides .slide_1 {
   background: #ffffff;
}
#slides .slide_2 {
   background: #ffffff;
}
#slides .slide_3 {
   background: #ffffff;
}
#slides .slide_4 {
   background: #ffffff;
}
#slides .slide_5 {
    background: #ffffff;
}

#slides .slide_6 {
    background: #ffffff;
}

#slides .slide_7 {
    background: #ffffff;
}

#slides .slide_8 {
    background: #ffffff;
}

#slides .slide_9 {
    background: #ffffff;
}
/* Dimensões intrínsecas (width/height nas tags img) + isto reserva a altura
   correta antes da imagem carregar, evitando pulos de layout (CLS) */
.slide-content img {
   width: 100%;
   height: auto;
   display: block;
}
#controls {
   margin: -230px 0 0 0;
   width: 100%;
   height: 50px;
  
}
#controls label {
   transition: opacity 0.2s ease-out;
   display: none;
   width: 50px;
   height: 50px;
   
}
#controls label:hover {
   opacity: 1;
}

@media screen and (max-width: 900px) {

		#slide1:checked ~ #controls label:nth-child(2),
		#slide2:checked ~ #controls label:nth-child(3),
		#slide3:checked ~ #controls label:nth-child(4),
		#slide4:checked ~ #controls label:nth-child(5),
		#slide5:checked ~ #controls label:nth-child(6),
		#slide6:checked ~ #controls label:nth-child(7),
		#slide7:checked ~ #controls label:nth-child(8),
		#slide8:checked ~ #controls label:nth-child(9),
		#slide9:checked ~ #controls label:nth-child(1)


		{
		   background: url('../img/setaright.png') no-repeat;
		   background-size: 50px;
		   float:right;
		   margin: 0 5% 0 0;
		   display: block;
		}

		#slide1:checked ~ #controls label:nth-child(9),
		#slide2:checked ~ #controls label:nth-child(1),
		#slide3:checked ~ #controls label:nth-child(2),
		#slide4:checked ~ #controls label:nth-child(3),
		#slide5:checked ~ #controls label:nth-child(4),
		#slide6:checked ~ #controls label:nth-child(5),
		#slide7:checked ~ #controls label:nth-child(6),
		#slide8:checked ~ #controls label:nth-child(7),
		#slide9:checked ~ #controls label:nth-child(8) 
		{
		   background: url('../img/setaleft.png') no-repeat;
		   float:left;
		   background-size: 50px;
		   margin: 0 0 0 5%;
		   display: block;
		}
}
@media screen and (min-width: 901px) {
   
   #bullets label:nth-child(n+8) {
        display: none;
    }
	
		#slide1:checked ~ #controls label:nth-child(2),
		#slide2:checked ~ #controls label:nth-child(3),
		#slide3:checked ~ #controls label:nth-child(4),
		#slide4:checked ~ #controls label:nth-child(5),
		#slide5:checked ~ #controls label:nth-child(6),
		#slide6:checked ~ #controls label:nth-child(7),
		#slide7:checked ~ #controls label:nth-child(1)


		{
		   background: url('../img/setaright.png') no-repeat;
		   background-size: 50px;
		   float:right;
		   margin: 0 5% 0 0;
		   display: block;
		}
		
		#slide1:checked ~ #controls label:nth-child(7),
		#slide2:checked ~ #controls label:nth-child(1),
		#slide3:checked ~ #controls label:nth-child(2),
		#slide4:checked ~ #controls label:nth-child(3),
		#slide5:checked ~ #controls label:nth-child(4),
		#slide6:checked ~ #controls label:nth-child(5),
		#slide7:checked ~ #controls label:nth-child(6) 
		{
		   background: url('../img/setaleft.png') no-repeat;
		   float:left;
		   background-size: 50px;
		   margin: 0 0 0 5%;
		   display: block;
		}
}


#bullets {
   margin: 200px 0 0;
   text-align: center;
   font-size: 0; /* remove o espaço em branco entre os <label> inline-block (evita
   que o tamanho de fonte do dispositivo influencie a largura total dos 12 bullets) */
}
#bullets label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:100%;
   background: #ccc;
   margin: 0 9px;
}
#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4),
#slide5:checked ~ #bullets label:nth-child(5),
#slide6:checked ~ #bullets label:nth-child(6),
#slide7:checked ~ #bullets label:nth-child(7), 
#slide8:checked ~ #bullets label:nth-child(8), 
#slide9:checked ~ #bullets label:nth-child(9) 
{

   background: #444;
}
@media screen and (max-width: 900px) {

   #slides .inner {
        width: 900%;
    }
   
#slide1:checked ~ #slides .inner {
    margin-left: 0;
}

#slide2:checked ~ #slides .inner {
    margin-left: -100%;
}

#slide3:checked ~ #slides .inner {
    margin-left: -200%;
}

#slide4:checked ~ #slides .inner {
    margin-left: -300%;
}

#slide5:checked ~ #slides .inner {
    margin-left: -400%;
}

#slide6:checked ~ #slides .inner {
    margin-left: -500%;
}

#slide7:checked ~ #slides .inner {
    margin-left: -600%;
}

#slide8:checked ~ #slides .inner {
    margin-left: -700%;
}

#slide9:checked ~ #slides .inner {
    margin-left: -800%;
}

   #slides {
      max-width: calc(100%);
      margin: 0;
   }


}

/*
SLIDER DE 12 IMAGENS (variante de #slidermae para imóveis com mais fotos, ex:
Alfa Vita) — mesma mecânica de rádio buttons do slider de 9 imagens acima, só
recalculada para N=12. Ativada aplicando a classe .slider12 no <div id="slider">
(além de acrescentar os inputs/slides/controles 10, 11 e 12); sem essa classe a
página continua usando o padrão de 9 imagens sem qualquer alteração. Toda regra
aqui usa o prefixo "#slider.slider12" só para ganhar especificidade e sobrepor
as regras equivalentes do padrão de 9 acima, sem precisar tocar nelas (ver
convenção de mudanças aditivas no CLAUDE.md).
*/
#slider.slider12 #slides .inner {
    width: 400%;
}
#slider.slider12 #slides .slide {
    width: calc(100% / 12);
}
#slider.slider12 #slide1:checked ~ #slides .inner { margin-left: 0; }
#slider.slider12 #slide2:checked ~ #slides .inner { margin-left: -33.3333%; }
#slider.slider12 #slide3:checked ~ #slides .inner { margin-left: -66.6667%; }
#slider.slider12 #slide4:checked ~ #slides .inner { margin-left: -100%; }
#slider.slider12 #slide5:checked ~ #slides .inner { margin-left: -133.3333%; }
#slider.slider12 #slide6:checked ~ #slides .inner { margin-left: -166.6667%; }
#slider.slider12 #slide7:checked ~ #slides .inner { margin-left: -200%; }
#slider.slider12 #slide8:checked ~ #slides .inner { margin-left: -233.3333%; }
#slider.slider12 #slide9:checked ~ #slides .inner { margin-left: -266.6667%; }
#slider.slider12 #slide10:checked ~ #slides .inner { margin-left: -300%; }
#slider.slider12 #slide11:checked ~ #slides .inner { margin-left: -333.3333%; }
#slider.slider12 #slide12:checked ~ #slides .inner { margin-left: -366.6667%; }

/* Bullet ativo (12 pontinhos em vez de 9) */
#slider.slider12 #slide1:checked ~ #bullets label:nth-child(1),
#slider.slider12 #slide2:checked ~ #bullets label:nth-child(2),
#slider.slider12 #slide3:checked ~ #bullets label:nth-child(3),
#slider.slider12 #slide4:checked ~ #bullets label:nth-child(4),
#slider.slider12 #slide5:checked ~ #bullets label:nth-child(5),
#slider.slider12 #slide6:checked ~ #bullets label:nth-child(6),
#slider.slider12 #slide7:checked ~ #bullets label:nth-child(7),
#slider.slider12 #slide8:checked ~ #bullets label:nth-child(8),
#slider.slider12 #slide9:checked ~ #bullets label:nth-child(9),
#slider.slider12 #slide10:checked ~ #bullets label:nth-child(10),
#slider.slider12 #slide11:checked ~ #bullets label:nth-child(11),
#slider.slider12 #slide12:checked ~ #bullets label:nth-child(12)
{
    background: #444;
}

@media screen and (min-width: 901px) {
    /* Reset: como #slide1..#slide9 são os mesmos IDs do padrão de 9 imagens,
       as regras de seta desse padrão (não escopadas, ver acima) continuam
       "enxergando" esses inputs aqui e ligando as setas erradas (ex.: nth-
       child(7) do padrão de 9 além do nth-child(10) certo do padrão de 12).
       Zera tudo primeiro; as regras abaixo religam só a seta correta. */
    #slider.slider12 #controls label:nth-child(n) {
        display: none;
    }

    /* No padrão de 9, só 3 fotos ficam sem "parada" própria de seta/bolinha
       (a regra genérica #bullets label:nth-child(n+8) esconde a 8ª em diante).
       Aqui, com 3 fotos visíveis por vez em 12 no total, as paradas vão até a
       10ª (N-V+1=10) — reexibe as bolinhas 8,9,10 que a regra genérica escondeu. */
    #slider.slider12 #bullets label:nth-child(n+8):nth-child(-n+10) {
        display: inline-block;
    }

    #slider.slider12 #slide1:checked ~ #controls label:nth-child(2),
    #slider.slider12 #slide2:checked ~ #controls label:nth-child(3),
    #slider.slider12 #slide3:checked ~ #controls label:nth-child(4),
    #slider.slider12 #slide4:checked ~ #controls label:nth-child(5),
    #slider.slider12 #slide5:checked ~ #controls label:nth-child(6),
    #slider.slider12 #slide6:checked ~ #controls label:nth-child(7),
    #slider.slider12 #slide7:checked ~ #controls label:nth-child(8),
    #slider.slider12 #slide8:checked ~ #controls label:nth-child(9),
    #slider.slider12 #slide9:checked ~ #controls label:nth-child(10),
    #slider.slider12 #slide10:checked ~ #controls label:nth-child(1)
    {
       background: url('../img/setaright.png') no-repeat;
       background-size: 50px;
       float:right;
       margin: 0 5% 0 0;
       display: block;
    }

    #slider.slider12 #slide1:checked ~ #controls label:nth-child(10),
    #slider.slider12 #slide2:checked ~ #controls label:nth-child(1),
    #slider.slider12 #slide3:checked ~ #controls label:nth-child(2),
    #slider.slider12 #slide4:checked ~ #controls label:nth-child(3),
    #slider.slider12 #slide5:checked ~ #controls label:nth-child(4),
    #slider.slider12 #slide6:checked ~ #controls label:nth-child(5),
    #slider.slider12 #slide7:checked ~ #controls label:nth-child(6),
    #slider.slider12 #slide8:checked ~ #controls label:nth-child(7),
    #slider.slider12 #slide9:checked ~ #controls label:nth-child(8),
    #slider.slider12 #slide10:checked ~ #controls label:nth-child(9)
    {
       background: url('../img/setaleft.png') no-repeat;
       float:left;
       background-size: 50px;
       margin: 0 0 0 5%;
       display: block;
    }
}

@media screen and (max-width: 900px) {
    /* Mesmo reset do bloco desktop acima: neutraliza as setas do padrão de 9
       antes de religar só a seta correta do padrão de 12 (ver comentário lá). */
    #slider.slider12 #controls label:nth-child(n) {
        display: none;
    }

    #slider.slider12 #slides .inner {
        width: 1200%;
    }
    #slider.slider12 #slide1:checked ~ #slides .inner { margin-left: 0; }
    #slider.slider12 #slide2:checked ~ #slides .inner { margin-left: -100%; }
    #slider.slider12 #slide3:checked ~ #slides .inner { margin-left: -200%; }
    #slider.slider12 #slide4:checked ~ #slides .inner { margin-left: -300%; }
    #slider.slider12 #slide5:checked ~ #slides .inner { margin-left: -400%; }
    #slider.slider12 #slide6:checked ~ #slides .inner { margin-left: -500%; }
    #slider.slider12 #slide7:checked ~ #slides .inner { margin-left: -600%; }
    #slider.slider12 #slide8:checked ~ #slides .inner { margin-left: -700%; }
    #slider.slider12 #slide9:checked ~ #slides .inner { margin-left: -800%; }
    #slider.slider12 #slide10:checked ~ #slides .inner { margin-left: -900%; }
    #slider.slider12 #slide11:checked ~ #slides .inner { margin-left: -1000%; }
    #slider.slider12 #slide12:checked ~ #slides .inner { margin-left: -1100%; }

    #slider.slider12 #slides {
        max-width: calc(100%);
        margin: 0;
    }

    #slider.slider12 #slide1:checked ~ #controls label:nth-child(2),
    #slider.slider12 #slide2:checked ~ #controls label:nth-child(3),
    #slider.slider12 #slide3:checked ~ #controls label:nth-child(4),
    #slider.slider12 #slide4:checked ~ #controls label:nth-child(5),
    #slider.slider12 #slide5:checked ~ #controls label:nth-child(6),
    #slider.slider12 #slide6:checked ~ #controls label:nth-child(7),
    #slider.slider12 #slide7:checked ~ #controls label:nth-child(8),
    #slider.slider12 #slide8:checked ~ #controls label:nth-child(9),
    #slider.slider12 #slide9:checked ~ #controls label:nth-child(10),
    #slider.slider12 #slide10:checked ~ #controls label:nth-child(11),
    #slider.slider12 #slide11:checked ~ #controls label:nth-child(12),
    #slider.slider12 #slide12:checked ~ #controls label:nth-child(1)
    {
       background: url('../img/setaright.png') no-repeat;
       background-size: 50px;
       float:right;
       margin: 0 5% 0 0;
       display: block;
    }

    #slider.slider12 #slide1:checked ~ #controls label:nth-child(12),
    #slider.slider12 #slide2:checked ~ #controls label:nth-child(1),
    #slider.slider12 #slide3:checked ~ #controls label:nth-child(2),
    #slider.slider12 #slide4:checked ~ #controls label:nth-child(3),
    #slider.slider12 #slide5:checked ~ #controls label:nth-child(4),
    #slider.slider12 #slide6:checked ~ #controls label:nth-child(5),
    #slider.slider12 #slide7:checked ~ #controls label:nth-child(6),
    #slider.slider12 #slide8:checked ~ #controls label:nth-child(7),
    #slider.slider12 #slide9:checked ~ #controls label:nth-child(8),
    #slider.slider12 #slide10:checked ~ #controls label:nth-child(9),
    #slider.slider12 #slide11:checked ~ #controls label:nth-child(10),
    #slider.slider12 #slide12:checked ~ #controls label:nth-child(11)
    {
       background: url('../img/setaleft.png') no-repeat;
       float:left;
       background-size: 50px;
       margin: 0 0 0 5%;
       display: block;
    }
}

/*
CONTINUAÇÃO PAGINA DO IMÓVEL --------------------------------------------------------------------------
*/

#breadcrumb {
	display: flex;
	width: 100%;
	justify-content: center;
}

.breadcrumb {
	width: 90%;
	margin: 12px auto 10px auto;
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.75rem;
}

.breadcrumb a {
	color: #808080;
	text-decoration: none;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

.breadcrumb li[aria-current="page"] {
	color: #0E2E50;
	font-weight: bold;
}

.breadcrumb li + li::before {
	content: "›";
	margin: 0 6px;
	color: #ADD8E6;
}

#tituloap {
	display: flex;
	width: 100%;
	justify-content: center;
}

.tituloap {
	display: flex;
	flex-direction: column;
	width: 90%;
	color: #808080;
	margin: 0auto;
}

.tituloap h1 {
	color: #0E2E50;
	font-size: 1.5rem;
	letter-spacing: -1px;
	margin-bottom: 3px;
}

.tituloap h4 {
	color: #4ecdc4;
	font-size: 1.6rem;
	letter-spacing: -1px;
	margin: 3px 0px 0px 0px;
}

.tituloap .preco {
	color: #4ecdc4;
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: -1px;
	margin: 3px 0px 0px 0px;
}

#detalhesap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 20px 0px 60px 0px;
}

.detalhes {
	display: flex;
	flex-direction: column;
	width: 90%;
	background-color: #ffffff;
}

.d1 {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.d2 {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 10px 0px 0px 0px;
	gap: 20px;
	
}

.infoap {
	display: flex;
	flex-direction: row;
	justify-content: left;
	gap: 10px;
}

.quadroinfo {
	width: 78px;
	height: 78px;
	border: 1px solid #ADD8E6;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #808080;
	font-size: 0.8rem;
}

.quadroinfo-icone {
	width: 40%;
	height: 40%;
	color: #4ecdc4;
	margin-bottom: 4px;
}

.descricao {
	width: 100%;
	margin-top: 15px;
	line-height: 160%;
}

.descricao ul {
	list-style-type: square;
	color: #808080;
}

.descricao ol {
	color: #00B38F;
}

.descricao h3 {
	font-size: 1.37rem;
	margin: 0px 0px 36px 0px;
	color: #808080;
}

.descricao h2 {
	font-size: 1.37rem;
	margin: 0px 0px 36px 0px;
	color: #808080;
}

.descricao .subtitulo {
	margin: 35px 0px 36px 0px;
	color: #808080;
}

/* FAQ de "Potencial de rentabilidade" (migração, valorização, aluguel) —
   bloco idêntico em todos os imóveis da mesma cidade, só troca o texto por
   cidade. Mesma linguagem visual da grade de "pontos próximos"
   (.pontos-proximos/.ponto-proximo, em #infoemp): borda azul clara, ícone
   teal, título em #0E2E50 — mas em <details>/<summary> (acordeão nativo,
   sem JS) por conta do texto mais longo de cada resposta. */
.faq-rentabilidade {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* mesmo respiro acima usado pelos títulos de seção (.subtitulo/h2/h3) da
	   página, pra não colar no parágrafo de introdução acima */
	margin: 35px 0px 0px 0px;
}

.faq-item-rentabilidade {
	border: 1px solid #ADD8E6;
	border-radius: 4px;
	padding: 10px 12px;
}

.faq-item-rentabilidade summary {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	list-style: none;
}

.faq-item-rentabilidade summary::-webkit-details-marker {
	display: none;
}

.faq-icone-rentabilidade {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	color: #4ecdc4;
}

.faq-pergunta-rentabilidade {
	color: #0E2E50;
	font-weight: bold;
	font-size: 0.9rem;
}

.faq-item-rentabilidade summary::after {
	content: "+";
	margin-left: auto;
	flex-shrink: 0;
	color: #4ecdc4;
	font-size: 1.3rem;
	font-weight: bold;
}

.faq-item-rentabilidade[open] summary::after {
	content: "–";
}

.faq-resposta-rentabilidade {
	margin: 10px 0px 0px 0px;
	color: #808080;
	font-size: 0.85rem;
	line-height: 150%;
}

/* Botão "Planta do imóvel" integrado ao texto de "Detalhes do apartamento":
   35px acima, no mesmo padrão de respiro dos títulos da página; embaixo o
   margin-top:35px do título seguinte também prevalece por colapso de margens */
.descricao .botao-planta {
	margin: 35px 0px;
	/* reset de aparência padrão de <button> (era um <div> antes de virar
	   acessível por teclado) — só família/tamanho de fonte, sem mexer no
	   font-weight:bold que já vem de .botaoinfoap (o atalho "font" resetaria isso também) */
	width: 100%;
	background: none;
	font-family: inherit;
	font-size: inherit;
}

.imgdescricao {
	width: 100%;
	height: 100%;
	margin: 0px 0px 20px 0px;
}

.imgdescricao img {
	width: 100%;
	height: auto;
}

.botaoinfoap {
	display: flex;
	justify-content: center;
	padding: 20px 30px;
	font-weight: bold;
	border-radius: 10px;
	border: 1px solid #0E2E50;
	color: #0E2E50;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
	cursor: pointer;
	
}

.botaoinfoap a {
	text-decoration: none;
	color: #0E2E50;
}

.botaoinfoap:hover {
	text-decoration: none;
	background-color: #FAFAFA;
}

.video {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 15px;
}

/* altura calculada a partir da largura (16:9 = proporção padrão do YouTube),
   em vez de uma altura fixa em px, para não sobrar/faltar espaço nas laterais */
.video iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-top: 16px;
}

/* Fachada clicável do vídeo (evita carregar o player do YouTube antes do clique) */
.video .video-facade {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: 16px;
	cursor: pointer;
	overflow: hidden;
}

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

.video .video-facade .video-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	background-color: rgba(0, 0, 0, 0.65);
	border-radius: 12px;
	transition: background-color 0.2s ease;
}

.video .video-facade .video-play-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #ffffff;
}

.video .video-facade:hover .video-play-btn,
.video .video-facade:focus-visible .video-play-btn {
	background-color: #FF0000;
}

.video .video-facade:focus-visible {
	outline: 2px solid #1479FF;
	outline-offset: 2px;
}

.infoemp {
	display: flex;
	flex-direction: column;
	width: 100%;
	line-height: 160%;
	margin-top: 15px;
}

.infoemp ul {
	list-style-type: square;
	color: #808080;
}

/* Grade de pontos próximos ("Conheça os pontos próximos") */
.pontos-proximos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 16px;
}

.ponto-proximo {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid #ADD8E6;
	border-radius: 4px;
	padding: 10px 12px;
}

.ponto-icone {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	color: #4ecdc4;
}

.ponto-texto {
	display: flex;
	flex-direction: column;
	line-height: 140%;
}

.ponto-nome {
	color: #0E2E50;
	font-weight: bold;
	font-size: 0.9rem;
}

.ponto-distancia {
	color: #808080;
	font-size: 0.8rem;
}


.d2 h3 {
	font-size: 1.37rem;
	color: #808080;
	padding-bottom: 20px;
	margin: 0px;
}

.d2 h2 {
	font-size: 1.37rem;
	color: #808080;
	padding-bottom: 20px;
	margin: 0px;
}

.mapa{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 266px;
	margin-top: -10px;
}

.mapa iframe {
	margin-top: 16px;
}

/*
LIGHTBOX PLANTA DO IMÓVEL
*/

.lightbox-planta {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.9);
	z-index: 999;
	justify-content: center;
	align-items: center;
	padding: 40px;
	box-sizing: border-box;
}

.lightbox-planta.active {
	display: flex;
}

.lightbox-planta img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 20px;
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 2.5rem;
	line-height: 1;
	color: #ffffff;
	cursor: pointer;
	/* reset de aparência padrão de <button> (era um <span> antes de virar
	   acessível por teclado) */
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
}

.botaowhats {
	display: flex;
	justify-content: center;
	padding: 20px 30px;
	margin-top: 10px;
	background-color: #00B38F;
	font-weight: bold;
	border-radius: 10px;
	color: #ffffff;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
	cursor: pointer;
	
}

.botaowhats img {
	margin-right: 10px;
	width: 25px;
	height: 25px;
}

.botaowhats:hover {
	background-color: #088A68;
}

/* Botão flutuante do WhatsApp (mobile): fixo no canto inferior direito,
   escondido até o JS adicionar .visivel (ver script no fim da página) */
.whatsapp-flutuante {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #00B38F;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px 0px;
	z-index: 999;
	visibility: hidden;
	transform: translateY(10px);
	transition: transform 0.4s ease, visibility 0.4s;
}

.whatsapp-flutuante img {
	width: 28px;
	height: 28px;
}

.whatsapp-flutuante:hover {
	background-color: #088A68;
}

.whatsapp-flutuante.visivel {
	visibility: visible;
	transform: translateY(0);
}

@media screen and (max-width: 999px) {
	.whatsapp-flutuante {
		display: flex;
	}
}

/* Formulário de contato alternativo */
#contato {
	display: flex;
	width: 100%;
	justify-content: center;
	background-color: #F5F5F5;
	margin-top: 40px;
	padding: 50px 0px;
}

.contato-detalhes {
	display: flex;
	flex-direction: column;
	width: 90%;
}

.contato-form-col,
.contato-similares-col {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}

.contato-similares-col {
	margin-top: 40px;
}

.contato-detalhes h2 {
	color: #0E2E50;
	font-size: 1.4rem;
	letter-spacing: -1px;
	margin: 0px 0px 6px 0px;
}

.contato-subtitulo {
	color: #808080;
	margin: 0px 0px 25px 0px;
}

.form-contato {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.form-contato-linha {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.form-contato-campo {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.form-contato-campo label {
	color: #0E2E50;
	font-size: 0.85rem;
	font-weight: bold;
	margin-bottom: 6px;
}

.form-contato-campo input,
.form-contato-campo textarea {
	border: 1px solid #ADD8E6;
	border-radius: 8px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 1rem;
	color: #0E2E50;
	resize: vertical;
}

.form-contato-campo input:focus,
.form-contato-campo textarea:focus {
	outline: none;
	border-color: #0E2E50;
}

.form-contato-honeypot {
	display: none;
}

.form-contato-botao {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px 30px;
	background-color: #0E2E50;
	color: #ffffff;
	font-weight: bold;
	font-family: inherit;
	font-size: 1rem;
	border: none;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
	cursor: pointer;
	margin-top: 6px;
}

.form-contato-botao:hover {
	background-color: #163a63;
}

.form-contato-botao:disabled {
	opacity: 0.7;
	cursor: default;
}

.form-contato-mensagem {
	margin-top: 16px;
	font-weight: bold;
}

.form-contato-mensagem.sucesso {
	color: #00B38F;
}

.form-contato-mensagem.erro {
	color: #c0392b;
}

/* "Imóveis semelhantes" (reaproveita os cards .box/.box-slide/.box-detail já
   usados em apartamentos-em-itajai.html etc.) — slide (swipe) só no mobile;
   no desktop vira uma fileira fixa de 3 cards preenchendo a coluna, sem slide */
.similares-slider {
	display: flex;
	flex-direction: row;
	gap: 15px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* barra de rolagem escondida (as bolinhas abaixo já indicam a posição) */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.similares-slider .box {
	flex: 0 0 auto;
	scroll-snap-align: start;
	margin: 0;
	width: 350px;
	height: auto;
}

/* Card idêntico ao usado em apartamentos-em-itajai.html (mesma largura/altura,
   mesmo bd1 com endereço) — só a imagem cobre a área com object-fit e os ícones
   do bd2 são SVG em vez do background-image antigo */
.similares-slider .box-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.similares-slider::-webkit-scrollbar {
	display: none;
	height: 0;
}

/* Especificações (m²/quartos/banheiros): ícone à esquerda do valor, na horizontal
   — mesma disposição do card original, só trocando o ícone de fundo (PNG) por SVG */
.similares-slider .bd2A,
.similares-slider .bd2B,
.similares-slider .bd2C {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-image: none;
}

.similares-slider .bd2 p {
	margin: 0;
}

.similares-icone {
	width: 22px;
	height: 22px;
	color: #4ecdc4;
	flex-shrink: 0;
}

/* Bolinhas de navegação do slide de "Imóveis semelhantes" — mesmo visual do
   #bullets do slider de fotos (10px, cinza/#ccc parado, #444 quando ativo) */
.similares-bullets {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 15px;
}

.similares-bullets button {
	width: 10px;
	height: 10px;
	border-radius: 100%;
	background: #ccc;
	border: none;
	padding: 0;
	cursor: pointer;
}

.similares-bullets button.ativo {
	background: #444;
}


/*
PÁGINA CIDADES --------------------------------------------------------------------------
*/

.row2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto;
	width: 100%;
	align-items: center;
	text-align: center;
}

/*
PÁGINA SOBRE --------------------------------------------------------------------------
*/

#sobre {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background-color: #f1f1f1;
}

.row-sobre {
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: 5% 0% 5% 0%;
	background-color: #f7f7f7;
}

.rs1 {
	padding: 40px;
	line-height: 160%;
}

.rs1 a {
	text-decoration: underline;
	color: #0E2E50;
}

.time {
	margin-top: -25px;
	font-size: 0.8rem;
	font-weight: bold;
	color: #6E6E6E;
}

.rs1 h1 {
	margin: 0px 0px 30px 0px;
	letter-spacing: -2px;
	font-size: 1.7rem;
	color: #0E2E50;
	line-height: 125%;
}

.rs1 h2 {
	margin: 30px 0px 30px 0px;
	letter-spacing: -1px;
	font-size: 1.3rem;
	color: #0E2E50;
}

.rs1 ul {
	list-style-image: url("../img/check2.png");
	margin: 30px 0px 30px 0px;
	color: #0E2E50;
	font-size: 1.0rem;
	letter-spacing: -1px;
}

.rs1 li {
	margin-top: 10px;
}

.rs1-ex-lista {
	width: 80%;
	line-height: 160%;
	margin: 0px 0px 60px 0px;
}

.rs1-ex-lista h4 {
	margin: 30px 0px 8px 0px;
	color: #0E2E50;
	letter-spacing: -1px;
	font-size: 1.3rem;
}

.rs2 {
	display: flex;
    flex-direction: column;
    width: 100%;
  }
  
.imgart {
	display: flex; 
}

.rs2-ex {
	width: 100%;
	height: 560px;
	background-image: url('../img/bc2.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media screen and (min-width:1000px) {

/* Hambúrguer some, menu horizontal em texto entra no lugar (ver
   .menu-desktop no bloco MENU acima). */
.btn-menu {display: none;}
.header-left-spacer {display: none;}
/* Logo e menu agrupados à esquerda (ordem natural do HTML: logo, depois
   nav, com um espaço fixo entre eles); .whatsapp-link com flex:1 empurra o
   ícone pra ponta direita, ocupando o espaço que sobra. .logo-link/
   .menu-desktop só existem na index.html por enquanto — não afeta as demais
   páginas. .whatsapp-link é comum a todas as páginas (mantém o
   comportamento original nelas); dentro de .social-links (só index.html,
   ver bloco MENU acima) ele é resetado pra não somar um flex:1 duplicado —
   quem empurra pro canto ali é o próprio .social-links. */
.logo-link {
	flex: 0 0 auto;
}
.menu-desktop {
	display: flex;
	flex: 0 0 auto;
	margin-left: 40px;
}
.whatsapp-link {
	display: flex;
	flex: 1;
	justify-content: flex-end;
}
.social-links {
	flex: 1;
	justify-content: flex-end;
}
.social-links .whatsapp-link {
	flex: 0 0 auto;
}

.row { display: flex; flex-direction: row; }
.row2 { display: flex; flex-direction: row; }
.rowrod { display: flex; flex-direction: row; }
.rod2 { margin: 0px 50px 0px 0px; }
.rod4 { margin: 0px }
.vantagens-grid, .processo-grid { grid-template-columns: repeat(4, 1fr); }
.row-sobre { display: flex; flex-direction: row; }
.tituloap h3 {font-size: 1.6rem;}
.tituloap {flex-direction: row; justify-content: space-between; align-items:center;}
.tituloap h4 {margin: 0px; font-size: 1.9rem;}
.tituloap .preco {margin: 0px; font-size: 1.9rem;}
.tituloap h1 {font-size: 1.5rem;}
.quadroinfo {width: 140px; height: 140px; font-size: 1rem;}
.pontos-proximos {grid-template-columns: 1fr 1fr;}
.form-contato-linha {flex-direction: row;}
.contato-detalhes {flex-direction: row; align-items: flex-start;}
.contato-form-col {width: auto; flex: 0 1 600px; max-width: 600px; margin: 0;}
.contato-similares-col {width: auto; flex: 1 1 0%; min-width: 0; max-width: none; margin: 0 0 0 40px;}
/* Os 2 cards ficam lado a lado no tamanho cheio; se a tela não tiver largura
   suficiente (ex.: notebooks 1366/1440px, com os 600px do formulário reservados
   ao lado), rola horizontalmente só dentro desta coluna — não afeta o resto da
   página. Em telas largas o bastante, os 2 cabem inteiros e não há o que rolar. */
.similares-slider .box:nth-child(3) {display: none;}
.similares-bullets {display: none;}
.descricao {max-width: 600px;}
.detalhes {flex-direction: row;}
.d2 {margin: 0px 0px 0px 40px;}
.video {margin-top: 15px;}
.botaowhats {margin: 0px}
/* width fixo trocado por flex:1 — faz o H1 ocupar o espaço que sobra ao lado
   do #filtro (que continua com largura/posição intocadas) em vez de ficar
   encostado na ponta direita de .titlefiltro (row-reverse + space-between)
   com um vão vazio crescente entre os dois conforme a tela alarga. Com
   justify-content:flex-start (abaixo) o texto cola directamente ao lado do
   filtro — a distância entre eles passa a ser o gap:20px fixo de
   .titlefiltro, não o espaço livre que sobra na tela. */
/* +20px além do gap:20px de .titlefiltro (total 40px) entre o filtro e o
   H1, só no desktop — pedido explícito de mais respiro lateral. */
.title1 {width: auto; flex: 1 1 0%; min-width: 300px; line-height: 260%; text-align: left; transform: none; justify-content: flex-start; margin-left: 40px;}
.title1 h2 {font-size: 2.3rem}
.title1 h1 {font-size: 2.3rem; width: auto;}
.filtro-form {flex-direction: row; align-items: flex-end;}
.titlefiltro {flex-direction: row-reverse; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;}
/* Largura generosa o bastante pra Cidade + Preço até + o botão caberem lado
   a lado numa linha só (a soma dos 3 min-content + gaps + padding gira em
   torno de 630px) — se a tela não tiver espaço pras duas colunas do header,
   o .titlefiltro (flex-wrap:wrap acima) empilha graciosamente em vez de
   estourar a largura do card. */
.titlefiltro #filtro {position: static; transform: none; width: 650px; max-width: 650px; flex-shrink: 0; padding: 0;}
.titulo-pos-filtro {margin-top: 60px;}
.title2 {top: 360px;}
.sb1 {width: 550px;}
.sb2 {width: 350px; margin-left: 25px;}
.rs1 {width: 55%; padding: 70px;}
.rs2 {width: 45%;}
.rs2-ex {width: 45%;}
}

/* Faixa "empilhada" do header (index): a partir de 1000px o layout normal é
   2 colunas (title1 + filtro lado a lado, ver bloco acima), mas entre 1000px
   e ~1280px title1(450px) + filtro(650px) não cabem lado a lado e o
   flex-wrap empilha os dois. Nesse empilhamento, "justify-content:space-
   between" (pensado pro layout de 2 colunas) deixa cada um colado numa
   ponta; aqui centraliza os dois, e o H1 junto. Precisa vir DEPOIS do bloco
   min-width:1000px acima pra ganhar do "justify-content:space-between" de
   lá (mesma especificidade, mesma media condition batendo nessa faixa —
   quem vem por último no arquivo vence). Acima de 1280px (testado sem
   quebra) volta ao layout normal de 2 colunas, fora dessa faixa. */
@media screen and (min-width: 1000px) and (max-width: 1279px) {
	#header .titlefiltro {
		justify-content: center;
	}

	#header .title1 {
		/* Sobrescreve o justify-content:flex-start de .title1 (pensado pro
		   layout de 2 colunas, onde o H1 cola do lado do filtro) — aqui,
		   empilhado, .title1 ocupa a linha toda e precisa centralizar a
		   própria caixa do H1 nela, não só o texto dentro da caixa. */
		justify-content: center;
		margin-left: 0;
		text-align: center;
	}
}

/*
PÁGINA CIDADE (studios-em-*) — REDESIGN HERO/FILTRO/IMÓVEIS (2026-08-26)
As seções #titulo/#filtro/#imoveis dessas páginas eram só fundo branco
empilhado. Redesenhadas com o roxo/azul-marinho do próprio logo
(img/logo350.png: #874470 e #2D2D4E) numa faixa "hero" escura, cartão do
filtro flutuando sobre ela, e um fundo levemente lilás na grade de imóveis —
pra dar hierarquia visual sem sair da paleta da marca. Tudo escopado via as
classes .cidade-hero/.cidade-filtro/.cidade-imoveis (adicionadas só no HTML
desta página por enquanto): não toca nas regras base #titulo/#filtro/#imoveis/
.titulo usadas por index.html, imoveis.html e as demais studios-em-*.html
ainda não migradas. Validado primeiro em studios-em-itajai.html; replicar
pras outras páginas de cidade depois de aprovado.
*/

.cidade-hero {
	background: linear-gradient(135deg, #2D2D4E 0%, #6B3A5C 55%, #874470 100%);
	padding: 55px 0 95px 0;
}

.cidade-hero .titulo {
	margin: 0 auto;
	max-width: 640px;
}

.cidade-hero .titulo p.cidade-hero-kicker {
	margin: 0 0 10px 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.cidade-hero .titulo h1 {
	color: #ffffff;
	font-size: 2rem;
	letter-spacing: -1px;
}

.cidade-hero-linha {
	display: block;
	width: 48px;
	height: 4px;
	margin: 14px auto;
	border-radius: 2px;
	background: linear-gradient(90deg, #2EB4AD, #874470);
}

.cidade-hero .titulo p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.05rem;
	line-height: 160%;
}

/* Cartão do filtro "flutuando" sobre a faixa colorida do hero — puxado pra
   cima com margin-top negativo (continua no fluxo normal, sem
   position:absolute) até sobrepor a própria metade de altura na faixa
   acima; o padding-bottom generoso do .cidade-hero é o que deixa espaço
   pra essa sobreposição sem cobrir o texto do título.
   O fundo da própria seção #filtro é transparente nos primeiros 60px (o
   valor do margin-top negativo acima, então a transição cai exatamente na
   borda de baixo do .cidade-hero) e lilás (mesma cor do #imoveis logo
   abaixo) daí pra frente — sem isso, a parte da seção que fica fora do
   card branco (especialmente abaixo dele, antes do #imoveis começar)
   mostrava o branco padrão do body. */
#filtro.cidade-filtro {
	padding-top: 0;
	margin-top: -60px;
	position: relative;
	z-index: 3;
	background: linear-gradient(to bottom, transparent 60px, #F8F6FB 60px);
}

#imoveis.cidade-imoveis {
	background: #F8F6FB;
	padding-top: 45px;
}

/* Igual a #imoveis.cidade-imoveis acima, só que exclusiva da index — classe
   separada (em vez de reusar .cidade-imoveis) pra poder divergir sem afetar
   imoveis.html/studios-em-*.html: a index mantém o gradiente vertical
   branco→lilás, elas ficam com o #F8F6FB sólido. */
#imoveis.index-imoveis {
	background: linear-gradient(180deg, #ffffff 0%, #F8F6FB 100%);
	padding-top: 45px;
}

.cidade-imoveis-titulo {
	width: 90%;
	max-width: 640px;
	margin: 0 auto 30px auto;
}

.cidade-imoveis-titulo h2 {
	margin: 0;
	padding: 0;
	color: #0E2E50;
	font-size: 1.6rem;
	letter-spacing: -1px;
}

.cidade-imoveis-titulo p {
	margin: 0;
	padding: 0;
	color: #6b6b7a;
	font-size: 1rem;
	line-height: 150%;
}

@media screen and (min-width: 1000px) {
	.cidade-hero {
		padding: 75px 0 115px 0;
	}

	.cidade-hero .titulo h1 {
		font-size: 2.6rem;
	}

	.cidade-hero .titulo p {
		font-size: 1.15rem;
	}

	#filtro.cidade-filtro {
		margin-top: -70px;
		background: linear-gradient(to bottom, transparent 70px, #F8F6FB 70px);
	}

	.cidade-imoveis-titulo h2 {
		font-size: 2rem;
	}
}

/* Rodapé (#rodape) das páginas de cidade: era o navy sólido (#0E2E50) padrão
   usado em toda a base do site, o que destoava do gradiente roxo/azul-marinho
   do .cidade-hero criado acima. Escopado via .cidade-rodape (mesma lógica das 
   outras classes .cidade-*: só em studios-em-itajai.html por enquanto),
   deixando o #rodape base intocado pras demais páginas. Precisa de
   "#rodape.cidade-rodape" (ID + classe) pra vencer a especificidade do
   "background-color" já definido em "#rodape" (ID sozinho). */
#rodape.cidade-rodape {
	background: linear-gradient(135deg, #874470 0%, #4A3159 55%, #2D2D4E 100%);
}

.cidade-rodape .rowrod {
	color: rgba(255, 255, 255, 0.8);
}

.cidade-rodape .rtitle {
	position: relative;
	padding-bottom: 12px;
}

/* Barrinha de destaque embaixo de cada título de coluna, no mesmo verde-água
   já usado como cor de destaque em outras partes do site (hover do menu
   desktop, preço dos cards) — amarra visualmente o rodapé ao resto da página. */
.cidade-rodape .rtitle::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36px;
	height: 3px;
	border-radius: 2px;
	background-color: #2EB4AD;
}

.cidade-rodape .rod2 a,
.cidade-rodape .rod3 a {
	color: rgba(255, 255, 255, 0.8);
}

.cidade-rodape .rod2 a:hover,
.cidade-rodape .rod3 a:hover {
	color: #ffffff;
}

.cidade-rodape .rod3 {
	border-top-color: rgba(255, 255, 255, 0.25);
}

/*
PÁGINA SOBRE — REDESIGN (2026-08-27) ---------------------------------------
Layout novo e próprio de sobre.html (#sobre-hero, #sobre-numeros,
#sobre-historia, #sobre-valores, #sobre-exterior, #sobre-cta),
reaproveitando a paleta já estabelecida no site (navy #0E2E50, verde-água
#2EB4AD, lilás #F8F6FB, gradiente roxo/azul-marinho do .cidade-hero, verde do
CTA do #processo) em vez de reaproveitar os componentes. Escopado só com IDs/
classes novos: não toca em #sobre/.rs1/.rs2/.row-sobre (ver "PÁGINA SOBRE"
mais acima), que continuam em uso por como-investir-em-studios.html e
brasileiros-no-exterior.html.
*/

#sobre-hero {
	display: flex;
	justify-content: center;
	background: linear-gradient(135deg, #2D2D4E 0%, #6B3A5C 55%, #874470 100%);
	padding: 55px 0 100px 0;
}

.sobre-hero-inner {
	width: 90%;
	max-width: 700px;
	text-align: center;
}

.sobre-kicker {
	margin: 0 0 14px 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#sobre-hero h1 {
	margin: 0 0 18px 0;
	padding: 0;
	color: #ffffff;
	font-size: 1.9rem;
	letter-spacing: -1px;
	line-height: 125%;
}

.sobre-hero-sub {
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1rem;
	line-height: 165%;
}

/*
Cartão de números "flutuando" sobre a faixa do hero — mesma técnica do
.cidade-filtro (margin-top negativo, sem sair do fluxo normal). O padding-
bottom generoso do #sobre-hero acima é o que abre espaço pra sobreposição.
*/
#sobre-numeros {
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 3;
	margin-top: -70px;
	padding: 0 0 20px 0;
}

.sobre-numeros-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 18px;
	width: 90%;
	max-width: 1000px;
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(14, 46, 80, 0.14);
	padding: 30px 24px;
}

.sobre-stat {
	text-align: center;
}

.sobre-stat-num {
	margin: 0 0 6px 0;
	padding: 0;
	color: #0E2E50;
	font-size: 1.3rem;
	font-weight: bold;
	letter-spacing: -0.5px;
}

.sobre-stat-label {
	margin: 0;
	padding: 0;
	color: #6b6b7a;
	font-size: 0.82rem;
	line-height: 145%;
}

#sobre-historia {
	display: flex;
	justify-content: center;
	background-color: #ffffff;
	padding: 50px 0 60px 0;
}

.sobre-historia-grid {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 90%;
	max-width: 1100px;
}

.sobre-historia-texto h2 {
	margin: 0 0 18px 0;
	padding: 0;
	color: #0E2E50;
	font-size: 1.7rem;
	letter-spacing: -1px;
}

.sobre-historia-texto p {
	margin: 0 0 16px 0;
	padding: 0;
	color: #6b6b7a;
	font-size: 0.98rem;
	line-height: 165%;
}

.sobre-historia-texto p:last-child {
	margin-bottom: 0;
}

.sobre-timeline {
	display: flex;
	flex-direction: column;
	background-color: #F8F6FB;
	border-radius: 16px;
	padding: 30px 26px;
}

.sobre-marco {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.sobre-marco-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #ffffff;
	color: #874470;
	flex-shrink: 0;
}

.sobre-marco-icone svg {
	width: 22px;
	height: 22px;
}

.sobre-marco-ano {
	margin: 6px 0 2px 0;
	padding: 0;
	color: #2EB4AD;
	font-weight: bold;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sobre-marco-titulo {
	margin: 0 0 6px 0;
	padding: 0;
	color: #0E2E50;
	font-weight: bold;
	font-size: 1rem;
}

.sobre-marco-texto p {
	margin: 0;
	padding: 0;
	color: #6b6b7a;
	font-size: 0.9rem;
	line-height: 155%;
}

.sobre-timeline-linha {
	width: 2px;
	height: 26px;
	margin: 2px 0 2px 22px;
	background: linear-gradient(180deg, #874470, #2EB4AD);
}

/*
#sobre-valores reaproveita este bloco de cabeçalho de seção
(.sobre-secao-cabecalho): kicker implícito no h2 + parágrafo de apoio, mesmo
espírito do .titulo genérico usado em index.html.
*/
.sobre-secao-cabecalho {
	width: 90%;
	max-width: 640px;
	margin: 0 auto 30px auto;
	text-align: center;
}

.sobre-secao-cabecalho h2 {
	margin: 0 0 8px 0;
	padding: 0;
	color: #0E2E50;
	font-size: 1.6rem;
	letter-spacing: -1px;
}

.sobre-secao-cabecalho p {
	margin: 0;
	padding: 0;
	color: #6b6b7a;
	font-size: 1rem;
	line-height: 155%;
}

#sobre-valores {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #F8F6FB;
	padding: 60px 0 70px 0;
}

.sobre-valores-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	width: 90%;
	max-width: 1100px;
}

.sobre-valor-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 10px;
	background-color: #ffffff;
	border-radius: 12px;
	padding: 26px 22px;
}

.sobre-valor-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(46, 180, 173, 0.12);
	color: #2EB4AD;
	flex-shrink: 0;
}

.sobre-valor-icone svg {
	width: 24px;
	height: 24px;
}

.sobre-valor-card h3 {
	margin: 0;
	padding: 0;
	font-size: 1.05rem;
	letter-spacing: -0.5px;
	color: #0E2E50;
}

.sobre-valor-card p {
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	line-height: 155%;
	color: #6b6b7a;
}

#sobre-exterior {
	display: flex;
	justify-content: center;
	background-color: #F8F6FB;
	padding: 0 0 60px 0;
}

.sobre-exterior-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	width: 90%;
	max-width: 800px;
	background-color: #ffffff;
	border: 1px solid #ADD8E6;
	border-radius: 16px;
	padding: 34px 26px;
}

.sobre-exterior-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(46, 180, 173, 0.12);
	color: #2EB4AD;
}

.sobre-exterior-icone svg {
	width: 24px;
	height: 24px;
}

.sobre-exterior-titulo {
	margin: 0 0 8px 0;
	padding: 0;
	color: #0E2E50;
	font-weight: bold;
	font-size: 1.1rem;
}

.sobre-exterior-texto p {
	margin: 0;
	padding: 0;
	color: #6b6b7a;
	font-size: 0.95rem;
	line-height: 155%;
}

.sobre-exterior-link {
	color: #2EB4AD;
	font-weight: bold;
	font-size: 0.95rem;
	text-decoration: underline;
}

#sobre-cta {
	display: flex;
	justify-content: center;
	background-color: #0E2E50;
	padding: 60px 0;
}

.sobre-cta-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	width: 90%;
	max-width: 560px;
}

.sobre-cta-inner h2 {
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-size: 1.6rem;
	letter-spacing: -1px;
}

.sobre-cta-inner p {
	margin: 0 0 6px 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 1rem;
	line-height: 155%;
}

.sobre-cta-secundario {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	text-decoration: underline;
}

@media screen and (min-width: 1000px) {
	#sobre-hero {
		padding: 80px 0 130px 0;
	}

	#sobre-hero h1 {
		font-size: 2.6rem;
	}

	.sobre-hero-sub {
		font-size: 1.15rem;
	}

	#sobre-numeros {
		margin-top: -85px;
	}

	.sobre-numeros-card {
		grid-template-columns: repeat(4, 1fr);
		padding: 36px 30px;
		/* column-gap 20px (em vez do 18px herdado da regra base) pra, com o
		   padding de 30px acima e o max-width:1000px do card, as 4 colunas
		   caírem em largura inteira (220px) — com 18px elas davam 221.5px,
		   fração que jogava cada linha divisória num ponto de subpixel
		   diferente e fazia uma parecer mais grossa/borrada que as outras */
		column-gap: 20px;
	}

	.sobre-stat {
		position: relative;
	}

	.sobre-stat:not(:first-child)::before {
		content: "";
		position: absolute;
		/* -10px = metade do column-gap de 20px acima, pra centralizar a
		   linha no meio do espaço entre colunas */
		left: -10px;
		top: 4px;
		bottom: 4px;
		width: 1px;
		background-color: #ADD8E6;
	}

	.sobre-stat-num {
		font-size: 1.5rem;
	}

	.sobre-historia-grid {
		flex-direction: row;
		align-items: center;
		gap: 60px;
	}

	.sobre-historia-texto {
		flex: 1.1;
	}

	.sobre-historia-texto h2 {
		font-size: 2rem;
	}

	.sobre-timeline {
		flex: 0.9;
	}

	.sobre-secao-cabecalho h2 {
		font-size: 2rem;
	}

	.sobre-valores-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.sobre-exterior-card {
		flex-direction: row;
		text-align: left;
		gap: 22px;
		padding: 30px 34px;
	}

	.sobre-exterior-texto {
		flex: 1;
	}

	.sobre-exterior-link {
		flex-shrink: 0;
	}

	.sobre-cta-inner h2 {
		font-size: 1.9rem;
	}
}

/*
PÁGINA BRASILEIROS NO EXTERIOR — REDESIGN (2026-08-28) -----------------------
Layout novo e próprio de brasileiros-no-exterior.html (#ext-hero,
#ext-confianca, #ext-processo, #ext-duvidas, #ext-cta), mesma paleta já
estabelecida no site (navy #0E2E50, verde-água #2EB4AD, lilás #F8F6FB,
gradiente roxo/azul-marinho do .cidade-hero) só que com classes próprias
escopadas com o prefixo "ext-" — não reaproveita .sobre-* (ver "PÁGINA SOBRE —
REDESIGN" acima) nem #sobre/.rs1/.rs2/.row-sobre, que continuam em uso por
como-investir-em-studios.html.
*/

#ext-hero {
	display: flex;
	justify-content: center;
	background: linear-gradient(135deg, #2D2D4E 0%, #6B3A5C 55%, #874470 100%);
	padding: 55px 0 100px 0;
}

.ext-hero-inner {
	width: 90%;
	max-width: 720px;
	text-align: center;
}

.ext-kicker {
	margin: 0 0 14px 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#ext-hero h1 {
	margin: 0 0 18px 0;
	padding: 0;
	color: #ffffff;
	font-size: 1.8rem;
	letter-spacing: -1px;
	line-height: 125%;
}

.ext-hero-sub {
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1rem;
	line-height: 165%;
}

/*
Cartão "flutuando" sobre a faixa do hero — mesma técnica do .sobre-numeros
(margin-top negativo, sem sair do fluxo normal). O padding-bottom generoso do
#ext-hero acima é o que abre espaço pra sobreposição.
*/
#ext-confianca {
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 3;
	margin-top: -70px;
	padding: 0 0 20px 0;
}

.ext-confianca-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 18px;
	width: 90%;
	max-width: 1000px;
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(14, 46, 80, 0.14);
	padding: 30px 24px;
}

.ext-stat {
	text-align: center;
}

.ext-stat-num {
	margin: 0 0 6px 0;
	padding: 0;
	color: #0E2E50;
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: -0.5px;
}

.ext-stat-label {
	margin: 0;
	padding: 0;
	color: #6b6b7a;
	font-size: 0.82rem;
	line-height: 145%;
}

.ext-secao-cabecalho {
	width: 90%;
	max-width: 640px;
	margin: 0 auto 30px auto;
	text-align: center;
}

.ext-secao-cabecalho h2 {
	margin: 0 0 8px 0;
	padding: 0;
	color: #0E2E50;
	font-size: 1.6rem;
	letter-spacing: -1px;
}

.ext-secao-cabecalho p {
	margin: 0;
	padding: 0;
	color: #6b6b7a;
	font-size: 1rem;
	line-height: 155%;
}

#ext-processo {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #ffffff;
	padding: 50px 0 60px 0;
}

.ext-timeline {
	display: flex;
	flex-direction: column;
	width: 90%;
	max-width: 760px;
	background-color: #F8F6FB;
	border-radius: 16px;
	padding: 30px 26px;
}

.ext-passo {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.ext-passo-numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #0E2E50;
	color: #ffffff;
	font-weight: bold;
	font-size: 1.05rem;
	flex-shrink: 0;
}

.ext-passo-titulo {
	margin: 6px 0 6px 0;
	padding: 0;
	color: #0E2E50;
	font-weight: bold;
	font-size: 1rem;
}

.ext-passo-texto p {
	margin: 0;
	padding: 0;
	color: #6b6b7a;
	font-size: 0.9rem;
	line-height: 155%;
}

.ext-timeline-linha {
	width: 2px;
	height: 26px;
	margin: 2px 0 2px 20px;
	background: linear-gradient(180deg, #0E2E50, #2EB4AD);
}

#ext-duvidas {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #F8F6FB;
	padding: 60px 0 70px 0;
}

.ext-duvidas-lista {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 90%;
	max-width: 760px;
}

.ext-faq-item {
	background-color: #ffffff;
	border-radius: 12px;
	padding: 18px 22px;
}

.ext-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: #0E2E50;
	font-weight: bold;
	font-size: 0.98rem;
	cursor: pointer;
	list-style: none;
}

.ext-faq-item summary::-webkit-details-marker {
	display: none;
}

.ext-faq-item summary::after {
	content: "+";
	flex-shrink: 0;
	color: #2EB4AD;
	font-size: 1.3rem;
	font-weight: bold;
}

.ext-faq-item[open] summary::after {
	content: "–";
}

.ext-faq-item p {
	margin: 12px 0 0 0;
	padding: 0;
	color: #6b6b7a;
	font-size: 0.92rem;
	line-height: 155%;
}

#ext-cta {
	display: flex;
	justify-content: center;
	background-color: #0E2E50;
	padding: 60px 0;
}

.ext-cta-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	width: 90%;
	max-width: 560px;
}

.ext-cta-inner h2 {
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-size: 1.6rem;
	letter-spacing: -1px;
}

.ext-cta-inner p {
	margin: 0 0 6px 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 1rem;
	line-height: 155%;
}

.ext-cta-secundario {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	text-decoration: underline;
}

@media screen and (min-width: 1000px) {
	#ext-hero {
		padding: 80px 0 130px 0;
	}

	#ext-hero h1 {
		font-size: 2.5rem;
	}

	.ext-hero-sub {
		font-size: 1.15rem;
	}

	#ext-confianca {
		margin-top: -85px;
	}

	.ext-confianca-card {
		grid-template-columns: repeat(4, 1fr);
		padding: 36px 30px;
		/* column-gap 20px (em vez do 18px herdado da regra base) pra, com o
		   padding de 30px acima e o max-width:1000px do card, as 4 colunas
		   caírem em largura inteira (220px) — com 18px elas davam 221.5px,
		   fração que jogava cada linha divisória num ponto de subpixel
		   diferente e fazia uma parecer mais grossa/borrada que as outras */
		column-gap: 20px;
	}

	.ext-stat {
		position: relative;
	}

	.ext-stat:not(:first-child)::before {
		content: "";
		position: absolute;
		/* -10px = metade do column-gap de 20px acima, pra centralizar a
		   linha no meio do espaço entre colunas */
		left: -10px;
		top: 4px;
		bottom: 4px;
		width: 1px;
		background-color: #ADD8E6;
	}

	.ext-stat-num {
		font-size: 1.4rem;
	}

	.ext-secao-cabecalho h2 {
		font-size: 2rem;
	}

	.ext-cta-inner h2 {
		font-size: 1.9rem;
	}
}

/*
PÁGINA COMO INVESTIR — REDESIGN (2026-08-28) --------------------------------
Reconstrução de como-investir-em-studios.html: o hero reaproveita .cidade-hero
(mesmo padrão de studios-em-*.html) e "processo" reaproveita o componente
#processo já usado na index, com o mesmo conteúdo. #investir-video é a seção
nova: recado em vídeo dos fundadores, reaproveitando a fachada clicável
.video/.video-facade das páginas de imóvel (ver .video mais acima, usado em
.d2 de studio-22m2-no-bothanic.html). O cartão (.investir-video-inner) flutua sobreposto
à faixa do hero — mesma técnica de #sobre-numeros/.sobre-numeros-card em
sobre.html: margin-top negativo na seção (sem sair do fluxo normal), puxando
o cartão pra cima até sobrar só ~30px entre o parágrafo do hero e o topo do
cartão (padding-bottom do .cidade-hero menos o margin-top negativo abaixo).
Sem título/.titulo aqui: só o vídeo mesmo, o texto de apoio já fica no hero.
Sem seção "vantagens": ficou mais enxuta, vantagens explicadas no vídeo.
Diferente do .sobre-numeros-card (cartão branco com padding ao redor do
conteúdo), aqui o "cartão" é só a sombra/raio de borda aplicados direto na
.video-facade — sem moldura branca no entorno do vídeo, ele mesmo flutua
sobre o hero. margin-bottom negativo no fim (mesma lógica do margin-top
negativo do topo, só que sem precisar de truque de fundo transparente: como
#investir-video continua com z-index:3, o vídeo sempre pinta por cima,
então o lilás do #processo, que vem logo depois em fluxo normal, só "sobe"
por trás dele) — sem isso, o respiro somado ao padding-top+.titulo do
#processo (120px, compartilhados com a index e por isso intocáveis aqui)
ficava grande demais até o título "Como funciona o processo de compra".
*/

#investir-video {
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 3;
	width: 100%;
	margin-top: -65px;
	margin-bottom: -50px;
}

.investir-video-inner {
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
}

.investir-video-inner .video {
	margin-top: 0px;
}

/* Miniatura provisória (ver TODO no HTML) enquanto o vídeo não é gravado:
   fundo navy + logo branco centralizado em vez de esticar/cortar a logo
   (object-fit:cover, herdado de .video .video-facade img) e evitar mostrar
   uma imagem cortada/distorcida como thumbnail. */
.investir-video-inner .video-facade {
	background-color: #0E2E50;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(14, 46, 80, 0.28);
}

.investir-video-inner .video-facade img {
	object-fit: contain;
	padding: 15%;
	box-sizing: border-box;
}

/* Mesmo ajuste do .cidade-hero no breakpoint desktop (padding-bottom sobe
   de 95px pra 115px — ver .cidade-hero acima): o margin-top negativo do
   cartão precisa acompanhar pra manter os ~30px de espaço abaixo do hero. */
@media screen and (min-width: 1000px) {
	#investir-video {
		margin-top: -85px;
	}
}