/*
Theme Name: The Boss Imóveis
Description: Tema claro (fundo, cabeçalho e rodapé brancos, com a logo escura para fundo claro) para imobiliária pequena. Vitrine sem buscador na página inicial e ficha de imóvel completa. Feito para o plugin The Boss Imóveis.
Author: Lupfy
Version: 1.0.0
Requires PHP: 8.0
Text Domain: the-boss
*/

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

:root {
	/* Fundo claro no site todo (pedido do cliente, 2026-07-30). Desde
	   2026-07-31 o cabeçalho e o rodapé também são claros (pedido do cliente),
	   com a logo escura para fundo claro (assets/logo.jpg). Só o lightbox
	   segue escuro — é palco de foto — e por isso REDECLARA os tokens
	   (--tb-texto, --tb-suave, --tb-linha…) no próprio seletor. */
	--tb-preto: #0a0a0a;
	--tb-fundo: #ffffff;
	--tb-superficie: #ffffff;
	--tb-superficie-2: #efefec;
	--tb-linha: #e4e4e0;
	--tb-texto: #1d1d1d;
	--tb-suave: #6b6b6b;

	/* As duas cores da logo. Só em detalhe — o protagonista é a foto.
	   Sobre BRANCO o ciano puro tem 1,9:1 de contraste e o laranja 3,2:1 —
	   nenhum serve para texto. Texto/link no fundo claro usa --tb-acento
	   (o mesmo ciano escurecido, 5,8:1) e --tb-laranja-texto (4,8:1); o par
	   original continua nos fundos escuros e nas superfícies cheias
	   (botão ciano/laranja com texto quase preto por cima). */
	--tb-ciano: #00d9ea;
	--tb-acento: #00707c;
	--tb-laranja: #f45a11;
	--tb-laranja-texto: #c2410c;

	--tb-raio: 10px;
	--tb-max: 1200px;
	--tb-fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--tb-fundo);
	color: var(--tb-texto);
	font-family: var(--tb-fonte);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--tb-acento);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3 {
	line-height: 1.2;
	margin: 0 0 .5em;
	font-weight: 700;
	letter-spacing: -0.01em;
}

:focus-visible {
	outline: 2px solid var(--tb-acento);
	outline-offset: 2px;
	border-radius: 4px;
}

.tb-pular {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--tb-ciano);
	color: #001014;
	padding: .75rem 1rem;
	font-weight: 700;
	z-index: 100;
}

.tb-pular:focus {
	left: 0;
}

/* -------------------------------------------------------------------------
 * Ícones (Lucide inline — robi_icone() no plugin)
 * ---------------------------------------------------------------------- */

/* Acompanham o texto: tamanho em em, cor herdada. */
.robi-icone {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	vertical-align: -0.2em;
}

/* Onde o ícone anda junto de texto, o alinhamento é do container. */
.robi-card__local,
.robi-card__specs li,
.tb-ficha__local-txt,
.tb-ficha__codigo,
.tb-diferenciais li,
.tb-migalha,
.tb-migalha a,
.tb-bloco__titulo,
.tb-cartao__creci,
.tb-rodape__contato a,
.tb-rodape__endereco,
.tb-rodape__horario,
.tb-aviso {
	display: flex;
	align-items: center;
	gap: .45rem;
}

/* Estes são centrados: sem justify-content o flex desfaz o text-align. */
.tb-cartao__creci,
.tb-rodape__contato a,
.tb-rodape__endereco,
.tb-rodape__horario {
	justify-content: center;
}

/* O aviso é texto de várias linhas: o ícone acompanha a primeira. */
.tb-aviso {
	align-items: flex-start;
}

.tb-aviso .robi-icone {
	margin-top: .15em;
}

.tb-aviso--ok .robi-icone {
	color: var(--tb-acento);
}

.tb-aviso--erro .robi-icone {
	color: var(--tb-laranja);
}

.tb-bloco__titulo .robi-icone {
	color: var(--tb-laranja);
}

.tb-migalha__sep {
	color: #b8b8b2;
	width: 1em;
	height: 1em;
}

/* Nos cards o ícone é apoio: fica apagado para o texto liderar. */
.robi-card__local .robi-icone,
.robi-card__specs .robi-icone,
.tb-ficha__local .robi-icone,
.tb-ficha__codigo .robi-icone {
	color: #6e6e6e;
}

.tb-cartao__creci .robi-icone {
	color: var(--tb-acento);
}

/* O SVG do WhatsApp é preenchido, não traçado: pesa mais que os Lucide
   no mesmo tamanho, então anda um pouco menor. */
.tb-icone-zap {
	width: 1.05em;
	height: 1.05em;
}

.tb-zap-flutua .robi-icone {
	width: 26px;
	height: 26px;
}

.robi-lightbox__fechar .robi-icone,
.robi-lightbox__btn .robi-icone {
	width: 22px;
	height: 22px;
	vertical-align: baseline;
}

/* -------------------------------------------------------------------------
 * Cabeçalho — logo à esquerda, menu à direita
 * ---------------------------------------------------------------------- */

/* Cabeçalho claro desde 2026-07-31 (pedido do cliente), com a logo escura
   para fundo claro (assets/logo.jpg). Herda os tokens claros do :root — a
   meta theme-color do functions.php acompanha esta cor de fundo. Atenção:
   o logo.jpg tem fundo branco chapado (é JPEG, sem alfa), então este
   background precisa continuar branco puro para a logo não virar um
   retângulo visível. */
.tb-topo {
	/* Respiro maior entre a marca, o menu e a linha (pedido do cliente,
	   2026-07-31 — e ampliado no mesmo dia: "dê mais alguns enters").
	   No celular encolhe — ver a media query de 700px. */
	padding: 2.75rem 0;
	border-bottom: 1px solid var(--tb-linha);
	background: var(--tb-fundo);
}

/* Empilhado e centrado em QUALQUER largura (pedido do cliente, 2026-07-31):
   logo em cima, menu embaixo — o formato que antes era só do celular. */
.tb-topo__interno {
	max-width: var(--tb-max);
	margin: 0 auto;
	padding: 0 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.25rem;
}

/* Vira h1 na home e p nas internas: zera a margem dos dois. */
.tb-topo__marca {
	margin: 0;
	font-size: inherit;
	line-height: 0;
}

.tb-topo__logo {
	display: inline-block;
	width: 200px;
}

.tb-topo__logo img {
	width: 100%;
	height: auto;
}

.tb-nav__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	/* Era 2.5rem com 3 itens; com as categorias (7 itens, 2026-09) o menu
	   precisou caber numa linha só no desktop. Abaixo de 1024px ele nem
	   tenta: vira hambúrguer (ver a media query no fim desta seção). */
	gap: 1.75rem;
}

.tb-nav__lista a {
	color: var(--tb-suave);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: .3rem;
	border-bottom: 2px solid transparent;
}

.tb-nav__lista a:hover,
.tb-nav__lista .current-menu-item a {
	color: var(--tb-texto);
	border-bottom-color: var(--tb-laranja);
}

/* -------------------------------------------------------------------------
 * Submenu do cabeçalho (categorias de imóveis, 2026-09)
 *
 * Desktop: dropdown por hover/focus-within — CSS puro, sem depender de JS.
 * Toque/teclado: o assets/nav.js injeta a setinha (.tb-nav__seta) que liga
 * .tb-nav__item--aberto no <li>. Os DOIS estados precisam abrir o menu.
 * ---------------------------------------------------------------------- */

.tb-nav__lista li {
	position: relative;
}

.tb-nav__lista .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	min-width: 220px;
	margin: 0;
	list-style: none;
	/* O respiro de cima cobre o vão entre o link e o cartão — sem ele o
	   hover "vaza" no caminho e o dropdown pisca. */
	padding: .85rem 0 0;
}

.tb-nav__lista .sub-menu::before {
	content: "";
	position: absolute;
	inset: .85rem 0 0;
	background: var(--tb-fundo);
	border: 1px solid var(--tb-linha);
	border-radius: var(--tb-raio);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
	z-index: -1;
}

.tb-nav__lista li:hover > .sub-menu,
.tb-nav__lista li:focus-within > .sub-menu,
.tb-nav__lista .tb-nav__item--aberto > .sub-menu {
	display: block;
}

.tb-nav__lista .sub-menu li {
	padding: 0 .35rem;
}

.tb-nav__lista .sub-menu li:first-child {
	padding-top: .35rem;
}

.tb-nav__lista .sub-menu li:last-child {
	padding-bottom: .35rem;
}

/* Item do dropdown lê como lista, não como abas: caixa normal, sem o fio
   laranja de baixo — o hover marca com fundo, padrão de menu. */
.tb-nav__lista .sub-menu a {
	display: block;
	padding: .55rem .85rem;
	border-bottom: 0;
	border-radius: calc(var(--tb-raio) - 4px);
	text-transform: none;
	letter-spacing: .02em;
	font-size: .85rem;
	white-space: nowrap;
}

.tb-nav__lista .sub-menu a:hover,
.tb-nav__lista .sub-menu .current-menu-item a {
	background: var(--tb-superficie);
	border-bottom: 0;
}

/* A setinha que o nav.js injeta ao lado do link-pai. */
.tb-nav__seta {
	background: none;
	border: 0;
	padding: 0 0 .3rem .3rem;
	cursor: pointer;
	color: var(--tb-suave);
	vertical-align: middle;
	line-height: 0;
}

.tb-nav__seta svg {
	transition: transform .15s ease;
}

.tb-nav__item--aberto > .tb-nav__seta svg {
	transform: rotate(180deg);
}

/* O hambúrguer. Fica escondido por padrão em qualquer largura: quem o exibe
   é a media query abaixo — e só sob .tb-nav--js, porque sem JS ninguém
   conseguiria abrir o menu de volta. */
.tb-nav__burger {
	display: none;
	align-items: center;
	gap: .5rem;
	background: none;
	border: 1px solid var(--tb-linha);
	border-radius: var(--tb-raio);
	padding: .55rem 1.1rem;
	cursor: pointer;
	color: var(--tb-suave);
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tb-nav--aberta .tb-nav__burger {
	color: var(--tb-texto);
	border-color: var(--tb-laranja);
}

/* -------------------------------------------------------------------------
 * Menu no celular/tablet: hambúrguer + sanfona
 *
 * Com 7 itens, a barra que servia para 3 vira um paredão de linhas na tela
 * estreita. Abaixo de 1024px a lista se recolhe atrás do botão "Menu" e abre
 * empilhada; os submenus abrem pela setinha, em sanfona, dentro do fluxo.
 * Tudo escopado em .tb-nav--js: sem JS a lista continua sempre visível.
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.tb-nav--js .tb-nav__burger {
		display: inline-flex;
	}

	.tb-nav--js {
		width: 100%;
		text-align: center;
	}

	.tb-nav--js .tb-nav__lista {
		display: none;
	}

	.tb-nav--js.tb-nav--aberta .tb-nav__lista {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;
		margin-top: 1rem;
	}

	/* Item = linha inteira; o flex mantém link e setinha lado a lado e o
	   wrap manda o submenu (width 100%) para a linha de baixo. */
	.tb-nav--js .tb-nav__lista li {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	/* Alvo de toque confortável (44px) sem mudar o tamanho do texto. */
	.tb-nav--js .tb-nav__lista a {
		padding: .8rem .5rem;
		border-bottom: 0;
	}

	.tb-nav--js .tb-nav__seta {
		padding: .8rem .5rem;
	}

	/* Sanfona: o submenu entra no fluxo, sem cartão flutuante, e só abre
	   pela setinha — hover não existe no toque, e o focus do link não deve
	   despejar o submenu no meio da lista. */
	.tb-nav--js .tb-nav__lista .sub-menu {
		position: static;
		transform: none;
		min-width: 0;
		width: 100%;
		padding: 0 0 .5rem;
	}

	.tb-nav--js .tb-nav__lista .sub-menu::before {
		display: none;
	}

	.tb-nav--js .tb-nav__lista li:hover > .sub-menu,
	.tb-nav--js .tb-nav__lista li:focus-within > .sub-menu {
		display: none;
	}

	.tb-nav--js .tb-nav__lista .tb-nav__item--aberto > .sub-menu {
		display: block;
	}

	.tb-nav--js .tb-nav__lista .sub-menu a {
		white-space: normal;
		padding: .6rem .85rem;
		color: var(--tb-suave);
	}
}

.tb-conteudo {
	min-height: 60vh;
}

/* -------------------------------------------------------------------------
 * Vitrine (shortcode [imoveis_vitrine])
 * ---------------------------------------------------------------------- */

.tb-pagina {
	max-width: var(--tb-max);
	margin: 0 auto;
	padding: 3rem 1.25rem 4rem;
}

.tb-pagina__titulo {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* -------------------------------------------------------------------------
 * Página de texto (Sobre, Venda seu imóvel, Política…)
 *
 * Coluna de leitura estreita — linha de 1200px cansa e parece "jogada".
 * O primeiro parágrafo é a abertura: sobe de corpo e puxa o leitor; os
 * demais ganham entrelinha e respiro maiores que os da prosa comum.
 * ---------------------------------------------------------------------- */

.tb-pagina--texto {
	max-width: 46rem;
}

.tb-pagina--texto .tb-pagina__titulo {
	margin-bottom: 1.75rem;
}

/* O fio ciano→laranja da logo, o mesmo do hero, assina o título. */
.tb-pagina--texto .tb-pagina__titulo::after {
	content: "";
	display: block;
	width: 88px;
	height: 3px;
	margin-top: 1rem;
	background: linear-gradient(90deg, var(--tb-ciano) 0 50%, var(--tb-laranja) 50% 100%);
}

.tb-pagina--texto .tb-prosa {
	font-size: 1.05rem;
	line-height: 1.8;
}

.tb-pagina--texto .tb-prosa > * + * {
	margin-top: 1.25rem;
}

.tb-pagina--texto .tb-prosa > p:first-child {
	font-size: clamp(1.2rem, 2.5vw, 1.45rem);
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* O h1 da home, acima da grade. Centralizado como a logo, e com a mesma
   largura que o antigo hero tinha — linha longa demais cansa de ler.
   Vem DEPOIS da regra base de propósito: as duas têm a mesma especificidade
   (0,1,0), então quem decide é a ordem no arquivo. */
.tb-pagina__titulo--home {
	max-width: 42rem;
	margin: 0 auto 2.5rem;
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	line-height: 1.25;
	text-align: center;
}

.robi-hero {
	text-align: center;
	max-width: 42rem;
	margin: 0 auto 3rem;
}

.robi-hero__titulo {
	font-size: clamp(2rem, 6vw, 3.25rem);
	margin-bottom: .75rem;
}

/* O fio ciano→laranja da logo, repetido sob o título. */
.robi-hero__titulo::after {
	content: "";
	display: block;
	width: 88px;
	height: 3px;
	margin: 1.25rem auto 0;
	background: linear-gradient(90deg, var(--tb-ciano) 0 50%, var(--tb-laranja) 50% 100%);
}

.robi-hero__texto {
	color: var(--tb-suave);
	font-size: 1.05rem;
	margin: 0 0 .75rem;
}

.robi-hero__contagem {
	color: var(--tb-suave);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0;
}

.robi-vazio {
	text-align: center;
	color: var(--tb-suave);
	padding: 4rem 1rem;
	border: 1px dashed var(--tb-linha);
	border-radius: var(--tb-raio);
}

/* -------------------------------------------------------------------------
 * Seções da home ([imoveis grupo="..." titulo="..."])
 *
 * A home tem duas: "Seleção de Casas no Condomínio Jardins" e "Outros imóveis
 * disponíveis". O título segue o desenho dos .tb-bloco__titulo (fio + traço
 * laranja), só que maior — é título de seção da página, não de bloco da ficha.
 * Seção sem imóvel nem chega ao HTML (o shortcode devolve vazio).
 * ---------------------------------------------------------------------- */

.robi-secao + .robi-secao {
	margin-top: 4rem;
}

.robi-secao__titulo {
	position: relative;
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	padding-bottom: .65rem;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--tb-linha);
}

.robi-secao__titulo::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 44px;
	height: 2px;
	background: var(--tb-laranja);
}

/* Título + "Ver todos →" na mesma linha (atributo link do [imoveis]).
   O fio de baixo passa a viver no wrapper para o link sentar sobre ele. */
.robi-secao__topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	position: relative;
	border-bottom: 1px solid var(--tb-linha);
	margin-bottom: 1.5rem;
}

.robi-secao__topo .robi-secao__titulo {
	border-bottom: 0;
	margin-bottom: 0;
}

.robi-secao__link {
	color: var(--tb-laranja-texto);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: .65rem;
	white-space: nowrap;
}

.robi-secao__link:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Card do imóvel (vitrine e relacionados)
 * ---------------------------------------------------------------------- */

.robi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.robi-card {
	background: var(--tb-superficie);
	border: 1px solid var(--tb-linha);
	border-radius: var(--tb-raio);
	overflow: hidden;
	/* Branco sobre branco: a borda desenha o limite e a sombra descola do fundo. */
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	transition: transform .2s ease, border-color .2s ease;
}

.robi-card:hover {
	transform: translateY(-4px);
	border-color: #c9c9c3;
}

.robi-card__link,
.robi-card__link:hover {
	text-decoration: none;
	color: inherit;
	display: block;
}

.robi-card__foto {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--tb-superficie-2);
	overflow: hidden;
}

.robi-card__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.robi-card:hover .robi-card__foto img {
	transform: scale(1.04);
}

.robi-card__sem-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #8a8a86;
	font-size: .85rem;
}

/* Vendido/reservado: a foto recua para não competir com quem está à venda. */
.robi-card--vendido .robi-card__foto img {
	filter: grayscale(1);
	opacity: .5;
}

.robi-selo {
	position: absolute;
	top: .75rem;
	left: .75rem;
	background: var(--tb-preto);
	/* O selo flutua sobre a FOTO, não sobre a página: segue chip escuro. */
	color: #f4f4f4;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .35rem .6rem;
	border-radius: 4px;
}

.robi-selo--reservado {
	background: var(--tb-laranja);
	color: #1a0600;
}

.robi-card__corpo {
	padding: 1.25rem;
}

.robi-card__tipo {
	margin: 0 0 .35rem;
	color: var(--tb-acento);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.robi-card__titulo {
	font-size: 1.15rem;
	margin: 0 0 .25rem;
}

.robi-card__local {
	margin: 0 0 .85rem;
	color: var(--tb-suave);
	font-size: .9rem;
}

.robi-card__preco {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
}

.robi-card__specs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
	margin: .85rem 0 0;
	padding: .85rem 0 0;
	border-top: 1px solid var(--tb-linha);
	color: var(--tb-suave);
	font-size: .85rem;
}

.robi-card__specs strong {
	color: var(--tb-texto);
}

/* -------------------------------------------------------------------------
 * Ficha do imóvel
 * ---------------------------------------------------------------------- */

.tb-imovel {
	max-width: var(--tb-max);
	margin: 0 auto;
	padding: 1.5rem 1.25rem 4rem;
}

.tb-migalha {
	display: flex;
	gap: .5rem;
	align-items: center;
	color: var(--tb-suave);
	font-size: .85rem;
	margin-bottom: 1.25rem;
}

.tb-migalha span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Galeria: palco grande + tira de miniaturas embaixo. */
.tb-galeria {
	margin-bottom: 2rem;
}

.tb-galeria__palco {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	background: var(--tb-superficie-2);
	border-radius: var(--tb-raio);
	overflow: hidden;
	cursor: zoom-in;
}

.tb-galeria__palco img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Pílula "ver em tela cheia": discreta, acende em ciano no hover. */
.tb-galeria__ampliar {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .7rem;
	border-radius: 999px;
	background: rgba(10, 10, 10, .78);
	backdrop-filter: blur(4px);
	color: #f4f4f4;
	font-size: .8rem;
	font-weight: 600;
	transition: background-color .15s ease, color .15s ease;
}

.tb-galeria__palco:hover .tb-galeria__ampliar {
	background: var(--tb-ciano);
	color: #001014;
}

/* Tira: rola na horizontal quando o imóvel tem muita foto. */
.tb-galeria__tira {
	display: flex;
	gap: .5rem;
	margin-top: .5rem;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: #c4c4c0 transparent;
	padding-bottom: .35rem;
}

/* A mãozinha só aparece quando há para onde rolar (classe posta pelo JS). */
.tb-galeria__tira.is-rolavel {
	cursor: grab;
}

.tb-galeria__tira.is-arrastando {
	cursor: grabbing;
	/* Sem isto, arrastar vai selecionando o que estiver pelo caminho. */
	user-select: none;
}

/* Arrastar em cima da foto dispara o arrasto nativo do navegador. O JS já
   barra o dragstart; isto cobre o resto e tira o cursor de texto. */
.tb-galeria__tira img {
	-webkit-user-drag: none;
	user-select: none;
}

.tb-galeria__tira::-webkit-scrollbar {
	height: 6px;
}

.tb-galeria__tira::-webkit-scrollbar-thumb {
	background: #c4c4c0;
	border-radius: 999px;
}

.tb-galeria__thumb {
	position: relative;
	flex: 0 0 88px;
	width: 88px;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--tb-superficie-2);
	cursor: pointer;
	opacity: .55;
	transition: opacity .15s ease;
}

.tb-galeria__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tb-galeria__thumb:hover {
	opacity: .85;
}

/* A ativa é a única em opacidade cheia, com o fio ciano marcando qual é. */
.tb-galeria__thumb.is-ativa {
	opacity: 1;
}

.tb-galeria__thumb.is-ativa::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--tb-ciano);
	border-radius: 6px;
}

/* -------------------------------------------------------------------------
 * Vídeo do imóvel — o bloco logo acima do "Sobre o imóvel"
 *
 * Fachada: poster do YouTube + play, e o <iframe> só nasce no clique (video.js).
 * A moldura já segura o 16/9, então a troca não dá salto de layout.
 * ---------------------------------------------------------------------- */

.tb-video {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-bottom: 2rem;
	border-radius: var(--tb-raio);
	overflow: hidden;
	background: var(--tb-superficie-2);
}

.tb-video__acao {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/* `cover` de propósito: a hqdefault do YouTube é 4:3, e o corte para 16:9 aqui
   é justamente o que tira a tarja preta dela e entrega o mesmo quadro que o
   player vai mostrar (ver tb_youtube_poster). */
.tb-video__acao img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tb-video__play {
	position: absolute;
	inset: 0;
	width: 4.25rem;
	height: 4.25rem;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(10, 10, 10, .72);
	backdrop-filter: blur(4px);
	color: #f4f4f4;
	font-size: 1.75rem;
	/* O clique é do link que o envolve; sem isto o alvo do hover dança. */
	pointer-events: none;
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.tb-video__acao:hover .tb-video__play,
.tb-video__acao:focus-visible .tb-video__play {
	background: var(--tb-ciano);
	color: #001014;
	transform: scale(1.06);
}

.tb-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Tocando, o poster e o play já saíram do DOM (o JS troca o miolo pelo iframe);
   o fundo preto evita um lampejo claro enquanto o player carrega. */
.tb-video.is-tocando {
	background: #000;
}

.tb-selo {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: var(--tb-preto);
	/* Sobre a foto/vídeo, não sobre a página: chip escuro sempre. */
	color: #f4f4f4;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .4rem .7rem;
	border-radius: 4px;
}

.tb-selo--reservado {
	background: var(--tb-laranja);
	color: #1a0600;
}

.tb-imovel__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 3rem;
	align-items: start;
}

.tb-ficha__tipo {
	margin: 0 0 .4rem;
	color: var(--tb-acento);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tb-ficha__titulo {
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	margin-bottom: .4rem;
}

.tb-ficha__local {
	margin: 0;
	color: var(--tb-suave);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}

.tb-ficha__codigo {
	border: 1px solid var(--tb-linha);
	border-radius: 999px;
	padding: .1rem .6rem;
	font-size: .75rem;
	letter-spacing: .06em;
}

/* Resumo em números: quartos, suítes, vagas, área. */
.tb-specs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 1px;
	margin: 2rem 0;
	padding: 0;
	background: var(--tb-linha);
	border: 1px solid var(--tb-linha);
	border-radius: var(--tb-raio);
	overflow: hidden;
}

.tb-specs li {
	background: var(--tb-superficie);
	padding: 1.15rem .75rem;
	text-align: center;
}

/* Aqui o ícone é o protagonista da célula, não um enfeite ao lado do texto. */
.tb-specs__icone {
	width: 24px;
	height: 24px;
	margin: 0 auto .5rem;
	display: block;
	color: var(--tb-acento);
	vertical-align: baseline;
}

.tb-specs__valor {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.tb-specs__label {
	display: block;
	margin-top: .2rem;
	color: var(--tb-suave);
	font-size: .78rem;
}

.tb-bloco {
	margin: 2.5rem 0;
}

.tb-bloco__titulo,
.tb-secao__titulo {
	font-size: 1.25rem;
	padding-bottom: .6rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--tb-linha);
	position: relative;
}

.tb-bloco__titulo::after,
.tb-secao__titulo::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 44px;
	height: 2px;
	background: var(--tb-laranja);
}

.tb-prosa {
	color: var(--tb-texto);
}

.tb-prosa > * + * {
	margin-top: 1rem;
}

/* Link em meio a texto corrido precisa do sublinhado para se distinguir —
   mas o card não é texto (ele é o link inteiro, e sublinhá-lo risca o card
   todo), nem o botão [tb_zap] (que já se distingue pelo fundo cheio). Os
   :not() encadeados são de propósito — a forma com lista, :not(a, b), o
   Safari só pegou tarde. */
.tb-prosa a:not(.robi-card__link):not(.tb-botao) {
	text-decoration: underline;
}

.tb-diferenciais {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: .6rem 1.5rem;
}

.tb-diferenciais li {
	color: var(--tb-texto);
}

.tb-diferenciais .robi-icone {
	color: var(--tb-acento);
}

/* O .tb-video saiu daqui em 2026-07-15 junto com o bloco "Vídeo" da ficha: o
   vídeo virou o primeiro item da galeria e é estilizado lá em cima. */
.tb-mapa iframe {
	width: 100%;
	height: 340px;
	border: 0;
	border-radius: var(--tb-raio);
	display: block;
	/* O embed do Maps já é claro — no tema claro ele entra como vem. (O filtro
	   invert/hue-rotate que o escurecia saiu junto com o fundo preto.) */
}

.tb-mapa__nota {
	margin: .75rem 0 0;
	color: var(--tb-suave);
	font-size: .85rem;
}

/* -------------------------------------------------------------------------
 * Lateral: preço, contato, formulário
 * ---------------------------------------------------------------------- */

.tb-lateral {
	position: sticky;
	top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.tb-cartao {
	background: var(--tb-superficie);
	border: 1px solid var(--tb-linha);
	border-radius: var(--tb-raio);
	padding: 1.5rem;
}

.tb-cartao__rotulo {
	margin: 0;
	color: var(--tb-suave);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tb-cartao__preco {
	margin: .25rem 0 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
}

.tb-cartao__preco--fora {
	font-size: 1.35rem;
	color: var(--tb-suave);
}

.tb-cartao__reservado {
	display: inline-block;
	margin: .6rem 0 0;
	background: var(--tb-laranja);
	color: #1a0600;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .25rem .55rem;
	border-radius: 4px;
}

.tb-cartao__aviso {
	margin: .75rem 0 0;
	color: var(--tb-suave);
	font-size: .9rem;
}

.tb-cartao__creci {
	margin: 1rem 0 0;
	text-align: center;
	color: var(--tb-suave);
	font-size: .75rem;
	letter-spacing: .08em;
}

.tb-valores {
	margin: 1.25rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--tb-linha);
	display: grid;
	gap: .5rem;
}

.tb-valores div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.tb-valores dt {
	color: var(--tb-suave);
	font-size: .9rem;
}

.tb-valores dd {
	margin: 0;
	font-weight: 600;
}

.tb-valores small {
	color: var(--tb-suave);
	font-weight: 400;
}

/* "Não informado" não pode competir com um valor de verdade. */
.tb-valores__vazio {
	color: #6e6e6e;
	font-weight: 400;
	font-size: .85rem;
}


/* Corretor: foto de quem cadastrou o imóvel (vem do perfil do usuário). */
.tb-corretor {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--tb-linha);
}

.tb-corretor__foto {
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--tb-superficie-2);
	/* O fio ciano cerca a foto sem empurrar o layout. */
	box-shadow: 0 0 0 2px var(--tb-ciano);
}

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

.tb-corretor__dados {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tb-corretor__nome {
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.25;
}

.tb-corretor__cargo {
	color: var(--tb-suave);
	font-size: .78rem;
	line-height: 1.3;
}

/* Botões */
.tb-botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	margin-top: 1rem;
	padding: .85rem 1rem;
	border: 0;
	border-radius: 6px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, background-color .15s ease;
}

.tb-botao:hover {
	text-decoration: none;
	filter: brightness(1.1);
}

/* Texto quase preto sobre o ciano/laranja: contraste alto e visual da marca. */
.tb-botao--zap {
	background: var(--tb-ciano);
	color: #001014;
}

.tb-botao--cta {
	background: var(--tb-laranja);
	color: #1a0600;
}

.tb-botao--vazado {
	background: transparent;
	color: var(--tb-texto);
	border: 1px solid var(--tb-linha);
}

/* Botão no meio de texto ([tb_zap]): o .tb-botao nasceu para a lateral da
   ficha, onde ocupa a largura toda — aqui ele encolhe para o conteúdo.
   Vem DEPOIS da regra base de propósito: mesma especificidade, decide a ordem. */
.tb-botao--inline {
	display: inline-flex;
	width: auto;
	padding: .85rem 1.75rem;
	margin-top: 0;
}

/* Respiro extra antes do CTA, para ele fechar a página sem colar no texto. */
.tb-prosa .tb-cta {
	margin-top: 2rem;
}

.tb-botao--vazado:hover {
	border-color: var(--tb-suave);
}

/* Formulário */
.tb-form__titulo {
	font-size: 1.1rem;
	margin-bottom: 1rem;
}

.tb-campo {
	margin: 0 0 .9rem;
}

.tb-campo label {
	display: block;
	margin-bottom: .3rem;
	font-size: .85rem;
	font-weight: 600;
}

.tb-campo label span {
	color: var(--tb-suave);
	font-weight: 400;
}

.tb-campo input,
.tb-campo textarea {
	width: 100%;
	padding: .7rem .8rem;
	background: var(--tb-fundo);
	border: 1px solid var(--tb-linha);
	border-radius: 6px;
	color: var(--tb-texto);
	font-family: inherit;
	font-size: .95rem;
	resize: vertical;
}

.tb-campo input:focus,
.tb-campo textarea:focus {
	outline: none;
	border-color: var(--tb-acento);
}

.tb-campo [aria-invalid="true"] {
	border-color: var(--tb-laranja);
}

.tb-campo__erro {
	display: block;
	margin-top: .3rem;
	color: var(--tb-laranja-texto);
	font-size: .8rem;
}

/* Aceite da política: checkbox à esquerda, alinhado à 1ª linha do texto.
   Precisa vir DEPOIS de .tb-campo label/input: "--aceite" é modificador BEM,
   ou seja uma classe só — mesma especificidade (0,1,1), então quem decide é a
   ordem. Antes daquelas regras, o label voltava a display:block e o checkbox
   esticava para width:100%. */
.tb-campo--aceite {
	margin-top: 1rem;
}

.tb-campo--aceite label {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	margin-bottom: 0;
	font-weight: 400;
	font-size: .82rem;
	color: var(--tb-suave);
	line-height: 1.45;
	cursor: pointer;
}

.tb-campo--aceite input {
	width: auto;
	flex: none;
	margin-top: .15em;
	accent-color: var(--tb-acento);
}

/* Honeypot: fora da tela, mas não display:none — robô ignora display:none. */
.tb-toca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tb-aviso {
	margin: 0 0 1rem;
	padding: .85rem 1rem;
	border-radius: 6px;
	font-size: .9rem;
	border: 1px solid;
}

.tb-aviso--ok {
	border-color: var(--tb-acento);
	background: rgba(0, 217, 234, .08);
	color: var(--tb-texto);
}

.tb-aviso--erro {
	border-color: var(--tb-laranja);
	background: rgba(244, 90, 17, .08);
	color: var(--tb-texto);
}

.tb-form__alt {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--tb-linha);
	color: var(--tb-suave);
	font-size: .85rem;
	text-align: center;
}

.tb-relacionados {
	margin-top: 4rem;
}

/* -------------------------------------------------------------------------
 * Lightbox (markup e JS vêm do plugin)
 * ---------------------------------------------------------------------- */

/* O lightbox é overlay preto em qualquer tema — tokens escuros de volta. */
.robi-lightbox {
	--tb-texto: #f4f4f4;
	--tb-suave: #9b9b9b;
	--tb-linha: #272727;
	display: none;
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(0, 0, 0, .94);
	align-items: center;
	justify-content: center;
	padding: 3.5rem 1rem;
}

.robi-lightbox--ativo {
	display: flex;
}

.robi-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
}

.robi-lightbox__fechar,
.robi-lightbox__btn {
	position: absolute;
	background: rgba(255, 255, 255, .08);
	border: 1px solid var(--tb-linha);
	color: var(--tb-texto);
	cursor: pointer;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 1.5rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease;
}

.robi-lightbox__fechar:hover,
.robi-lightbox__btn:hover {
	background: rgba(255, 255, 255, .18);
}

.robi-lightbox__fechar {
	top: 1rem;
	right: 1rem;
}

.robi-lightbox__btn--prev {
	left: 1rem;
}

.robi-lightbox__btn--next {
	right: 1rem;
}

.robi-lightbox__contador {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	color: var(--tb-suave);
	font-size: .85rem;
	letter-spacing: .08em;
}

/* -------------------------------------------------------------------------
 * Rodapé
 * ---------------------------------------------------------------------- */

/* Rodapé claro desde 2026-07-31, junto com o cabeçalho (pedido do cliente).
   Herda os tokens claros do :root — os links usam o --tb-acento escurecido,
   que é o que rende sobre branco. Mesmo aviso do .tb-topo: o logo.jpg tem
   fundo branco chapado, o background daqui precisa ser branco puro. */
.tb-rodape {
	border-top: 1px solid var(--tb-linha);
	background: var(--tb-fundo);
	padding: 3rem 1.25rem;
	text-align: center;
}

.tb-rodape__interno {
	max-width: var(--tb-max);
	margin: 0 auto;
}

.tb-rodape__logo {
	width: 200px;
	/* Respiro maior entre a marca e os blocos (pedido do cliente, 2026-07-31). */
	margin: 0 auto 3rem;
}

/* Três blocos sob a marca (pedido do cliente, 2026-07-31): Contato,
   Atendimento e Institucional. Empilham numa coluna até 980px. */
.tb-rodape__blocos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	align-items: start;
	max-width: 900px;
	margin: 0 auto;
}

.tb-rodape__titulo {
	margin: 0 0 .9rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tb-rodape__contato {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
}

.tb-rodape__endereco,
.tb-rodape__horario {
	margin: 0 0 .5rem;
	color: var(--tb-suave);
	font-size: .85rem;
}

.tb-rodape__endereco .robi-icone,
.tb-rodape__horario .robi-icone {
	color: #6e6e6e;
}

/* Razão social, CRECI e marca no INPI — o texto mora no footer.php. */
.tb-rodape__inst {
	margin: 0 0 .5rem;
	color: var(--tb-suave);
	font-size: .85rem;
}

/* A palavra INPI da linha do © é a logo do instituto (pedido do cliente,
   2026-07-31): corre inline com o texto, na altura da linha. O JPEG tem fundo
   branco chapado — mesmo aviso da logo da marca: só funciona sobre branco. */
.tb-inpi {
	display: inline-block;
	height: 1.1em;
	width: auto;
	vertical-align: -0.25em;
}

/* "no" + logo quebram de linha juntos; separados, a logo vira órfã. */
.tb-inpi-par {
	white-space: nowrap;
}

.tb-rodape__nota {
	margin: 2.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--tb-linha);
	color: #6e6e6e;
	font-size: .78rem;
}

@media (max-width: 980px) {
	.tb-rodape__blocos {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
}

/* Botão flutuante de WhatsApp */
.tb-zap-flutua {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 80;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--tb-ciano);
	color: #001014;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
	transition: transform .15s ease;
}

.tb-zap-flutua:hover {
	transform: scale(1.07);
	text-decoration: none;
}

.tb-paginacao {
	margin-top: 2.5rem;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Barra fixa do celular (só na ficha do imóvel)
 * ---------------------------------------------------------------------- */

/* No desktop a lateral fica ao lado do conteúdo e o preço já está à vista;
   a barra só existe no empilhado. Ver a media query lá embaixo. */
.tb-barra {
	display: none;
}

@media (max-width: 980px) {
	.tb-barra {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 85;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: .7rem 1rem;
		/* respeita a faixa do gesto no iPhone */
		padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .96);
		backdrop-filter: blur(8px);
		border-top: 1px solid var(--tb-linha);
	}

	.tb-barra__valor {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.tb-barra__rotulo {
		color: var(--tb-suave);
		font-size: .68rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		line-height: 1.2;
	}

	.tb-barra__preco {
		font-size: 1.2rem;
		line-height: 1.2;
		white-space: nowrap;
	}

	.tb-barra__preco--fora {
		color: var(--tb-suave);
		font-size: 1rem;
	}

	.tb-barra__acao {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .45rem;
		flex: none;
		/* 44px: alvo de toque confortável */
		min-height: 44px;
		padding: 0 1.1rem;
		border-radius: 6px;
		background: var(--tb-ciano);
		color: #001014;
		font-weight: 700;
		font-size: .95rem;
		text-decoration: none;
	}

	.tb-barra__acao:hover {
		text-decoration: none;
	}

	/* Com a barra, o botão flutuante viraria um segundo WhatsApp em cima do
	   primeiro — e era ele que tapava o texto da descrição. */
	.single-imovel .tb-zap-flutua {
		display: none;
	}

	/* Espaço para a barra não cobrir o fim da página. */
	.single-imovel .tb-rodape {
		padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
	}
}

/* -------------------------------------------------------------------------
 * Telas menores
 * ---------------------------------------------------------------------- */

@media (max-width: 980px) {
	/* minmax(0,...) e não 1fr: item de grid nasce com min-width:auto, ou seja
	   "não encolho abaixo do meu conteúdo". A tira de miniaturas é larga (13
	   fotos = 980px), então com 1fr a coluna esticava, estourava a tela e o
	   Chrome afastava o zoom da página toda. O desktop já usava minmax(0,1fr);
	   aqui tinha ficado 1fr e só apareceu quando o imóvel ganhou 13 fotos. */
	.tb-imovel__grade {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	/* Empilhado, a lateral grudada atrapalha mais do que ajuda. */
	.tb-lateral {
		position: static;
	}
}

@media (max-width: 700px) {
	/* Mais alto que o 16/9 do desktop de propósito: numa tela estreita o
	   16/9 vira uma tarja fina e a foto não mostra nada do imóvel. */
	.tb-galeria__palco {
		aspect-ratio: 3 / 2;
	}

	/* Rótulos em maiúscula leem maior do que medem, mas 11px no celular é
	   apertado demais para quem já não enxerga bem de perto. */
	.robi-card__tipo,
	.tb-ficha__tipo,
	.tb-barra__rotulo {
		font-size: .75rem;
	}

	/* Alvos de toque: com 26px de altura, o dedo erra. 44px é o mínimo
	   confortável — o texto continua do mesmo tamanho, cresce só a área. */
	.tb-rodape__contato a,
	.tb-migalha a {
		min-height: 44px;
	}

	/* Com os 44px de altura o gap base viraria espaço demais. */
	.tb-rodape__contato {
		gap: 0;
	}

	.tb-galeria__thumb {
		flex-basis: 68px;
		width: 68px;
	}

	.tb-galeria__ampliar-txt {
		display: none;
	}

	/* O respiro do desktop viraria um paredão na tela pequena: encolhe. */
	.tb-topo {
		padding: 1.75rem 0;
	}

	/* O gutter acompanha o 1rem das páginas nesta faixa. O empilhado em si
	   vale em toda largura — ver a regra base do .tb-topo__interno. */
	.tb-topo__interno {
		padding: 0 1rem;
		gap: 1.5rem;
	}

	/* Gap menor para "Venda seu imóvel" não quebrar de linha à toa. */
	.tb-nav__lista {
		gap: 1.5rem;
	}

	.tb-pagina,
	.tb-imovel {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.tb-cartao__preco {
		font-size: 1.75rem;
	}

	/* Espaço para o botão flutuante não cobrir o rodapé. */
	.tb-rodape {
		padding-bottom: 5.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Revelar ao rolar
 *
 * Tudo aqui pende de `.tb-anima` no <html>, posta pelo script embutido no
 * <head> (functions.php) e acesa pelo assets/revela.js. Sem JS, com o JS
 * quebrado ou com "reduzir movimento" ligado a classe não entra, estas regras
 * não existem e o conteúdo nasce visível. **Nunca esconda nada fora do
 * `.tb-anima`** — seria trocar o site por um efeito.
 *
 * A lista de alvos está repetida no assets/revela.js. Mexeu aqui, mexe lá.
 *
 * Duas escolhas que parecem detalhe e não são:
 *
 * - **`animation`, não `transition`.** O .robi-card já gasta o `transition`
 *   dele no hover (transform + border-color), e `transition` é uma propriedade
 *   só: quem escrevesse por último apagaria o outro, e o hover do card passaria
 *   a dar solavanco. Animação é canal separado, então os dois convivem.
 * - **`translate`, não `transform`.** Mesma história, agora com o transform do
 *   hover. São propriedades distintas e o navegador compõe as duas — dá para
 *   subir o card na entrada e ainda levantá-lo no hover.
 * ---------------------------------------------------------------------- */

@keyframes tb-revelar {
	from {
		opacity: 0;
		translate: 0 16px;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

/*
 * `:where()` zera a especificidade da lista, deixando a regra valendo só o
 * `.tb-anima` (0,1,0). É de propósito: assim o `.is-visivel` abaixo, que é
 * (0,2,0), ganha sem precisar de !important. Com `:is()` a lista valeria
 * (0,2,0) pelo `.robi-grid > .robi-card`, a regra inteira iria a (0,3,0) e o
 * `.is-visivel` perderia — o conteúdo nunca apareceria.
 */
.tb-anima :where(
	.robi-grid > .robi-card,
	.tb-ficha__topo,
	.tb-specs,
	.tb-bloco,
	.tb-relacionados > .tb-secao__titulo
) {
	opacity: 0;
}

.tb-anima .is-visivel {
	/* `both` para o degrau do animation-delay já nascer apagado, e para o fim
	   da animação segurar o opacity 1 contra a regra acima. */
	animation: tb-revelar .5s ease both;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}

	/*
	 * O `animation: none !important` acima mata a tb-revelar — e sem ela o
	 * `opacity: 0` do bloco anterior não teria quem o desfizesse: os alvos
	 * ficariam invisíveis para sempre.
	 *
	 * Na carga normal isso não acontece (o script do <head> nem põe a
	 * `.tb-anima` quando "reduzir movimento" está ligado), mas acontece para
	 * quem liga a opção com a página já aberta: a media query passa a valer na
	 * hora, o script não roda de novo e o site sumiria. Daí este resgate.
	 */
	.tb-anima :where(
		.robi-grid > .robi-card,
		.tb-ficha__topo,
		.tb-specs,
		.tb-bloco,
		.tb-relacionados > .tb-secao__titulo
	) {
		opacity: 1 !important;
	}

	.robi-card:hover {
		transform: none;
	}

	.robi-card:hover .robi-card__foto img {
		transform: none;
	}
}