/* Recantos Condomínios de Chácaras · protótipo v2, rodada 3 (26 de Outubro de 2026)
   Régua: Benchmark/Nível Fazenda Boa Vista.md, seção (c), e a Revisão de design da rodada 2.
   Cores só do manual; contraste medido em Medidas.md. O que mudou em cada item: Correções da rodada 3.md.
   Rodada 4 (copy): sem o bloco "antes da visita" e sem a seção do registro; linha de fatos em três colunas; lazer
   em cinco grupos, com o book no fim; texto do registro em 12 px no pé da ficha (.rodape .legal). Copy da rodada 4.md.
   Rodada 5: os anos da faixa História em ipê (.linha-tempo .t-numero); colagem em 6 e 5 colunas (.colagem); texto legal
   do pé em 600 px (.rodape .legal); assinatura e direitos lado a lado no pé da ficha (.rodape .pe .assinaturas).
   Depois, a geometria (pedido da Jordana, "proporções" e "desalinhados"): toda foto de paisagem em moldura de paisagem
   (3:2, 16:9, 21:9; nenhuma 4:5), no máximo 25% da imagem cortada, e cada foto e bloco de texto numa linha de coluna,
   medido com ferramentas/auditar-geometria.js. Legenda num estilo só (.legenda), sem data. Correções da rodada 5.md.
   Sistema editorial (pedido da Jordana, "alinhamentos meio nada com nada"): fotos da mesma linha com o mesmo topo e a
   mesma altura; texto ao lado de foto com o topo na linha do topo da foto, nunca centrado na sobra; uma foto forte por
   bloco; legenda 12 px abaixo da foto, na borda esquerda dela; 144 px entre seções (88 no celular) e, dentro da seção,
   só 24, 48 ou 72.
   Rodada 6: fotos de Outubro; lista com a foto dentro da linha de 768 a 1.023 px (.lista li); quatro fotos no lazer
   (.lazer-fotos); galeria em 3:2; obra em 2 x 2 (.registro-foto); o mapa em vetor (mapa/mapa.css) no lugar do desenho
   com pinos, com o ritmo da casa por cima (.implantacao .mapa-*). Correções da rodada 6.md.
   Rodada 7: abertura da home empilhada no celular e no tablet em pé (.abertura); cabeçalho com o menu inteiro de 1.100 px
   para cima e que volta ao rolar para cima (.topo.fixo); destaque empilhado de 768 a 1.279 px; lazer na grade das fotos
   (.o-que-tem .grupos); faixa da visita com o endereço na linha do parágrafo (.visita). Correções da rodada 7.md.
   Rodada 8: lista dos condomínios com a linha inteira como caixa (.lista .linha), sem coluna à direita; nome sem link no
   rodapé (.rodape .col .item); área do corretor (.material). Depois da revisão independente: a lista com a altura da foto
   ao lado (.lista, de 1.024 px para cima), a galeria sem o espaço do fim, o item atual do menu e o botão "Copiar" com largura
   fixa. Correções da rodada 8.md. */

/* Títulos: Newsreader (Production Type, OFL), instâncias estáticas com tamanho óptico 72, em public/fontes.
   Autorizada pela Jordana em 26 de Outubro de 2026, 11h09, no lugar da Marcellus. */
@font-face { font-family: "Newsreader"; src: url("/fontes/newsreader-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fontes/newsreader-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fontes/newsreader-light-italico.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fontes/newsreader-regular-italico.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Recantos Texto"; src: url("/fontes/montserrat-variavel.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  /* Fonte dos títulos numa variável só: trocar aqui troca o site inteiro. */
  --fonte-titulo: "Newsreader", "Iowan Old Style", Georgia, serif;
  --peso-titulo: 300;
  --fonte-texto: "Recantos Texto", "Helvetica Neue", Arial, sans-serif;

  /* manual da marca, página 6 */
  --petroleo: #023441;   /* texto e faixa escura: WCAG 13,26 e APCA Lc 98,9 sobre #FEFEFE */
  --lago: #036773;       /* rótulo, link, legenda e campo: 6,52 e Lc 81,5 sobre #FEFEFE. Abaixo de 16 px, só com peso 500 ou mais */
  --ipe: #FAA631;        /* acento: anel do pino, faixa do pattern e, desde a rodada 5, os anos da faixa História (72 e 48 px)
                            sobre o petróleo, Lc 59 contra 45 pedidos de 36 px para cima. Texto em ipê só de 36 px para cima e só
                            sobre o petróleo; nunca fundo de texto (petróleo sobre ipê também dá Lc 59) */
  --terra: #F3660D;      /* só traço de alerta no cadastro, nunca texto */
  --nevoa: #C6D8DB;      /* texto de apoio no petróleo e fio: Lc 75,6 */
  --nevoa-clara: #E2EBEC; /* faixa clara: névoa com 50% de branco; petróleo por cima dá WCAG 11,04 e Lc 86,6 */
  --branco: #FEFEFE;
  --fio: rgba(2, 52, 65, .22);          /* fio decorativo entre linhas de lista */
  --fio-claro: rgba(254, 254, 254, .28);

  --margem: 120px;
  --calha: 24px;
  --conteudo: 1200px;
  --respiro: 144px;
  --slide: 760px;        /* largura de uma foto na galeria */
}
@media (max-width: 1279px) { :root { --margem: 64px; --respiro: 120px; } }
@media (max-width: 767px)  { :root { --margem: 20px; --calha: 16px; --respiro: 88px; --slide: 86vw; } }
/* rodada 8: de 768 a 887 px, a foto da galeria na largura útil; com 760 px ela passava da tela (56 px a 768, 4 px a 820) */
@media (min-width: 768px) and (max-width: 887px) { :root { --slide: calc(100vw - 2 * var(--margem)); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--branco); color: var(--petroleo);
  font-family: var(--fonte-texto); font-size: 16px; line-height: 28px; font-weight: 400;
  font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--petroleo); color: var(--branco); padding: 12px 16px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.pular:focus { top: 12px; }

/* ---------- grade ---------- */
.moldura { width: 100%; max-width: calc(var(--conteudo) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); }
@media (max-width: 767px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grade > * { grid-column: 1 / -1 !important; } }
.secao { padding: var(--respiro) 0; }
.secao + .secao.sem-topo { padding-top: 0; }

/* ---------- texto ----------
   Newsreader: 96 (letreiro), 72 (abertura e números), 48 (seção), 32 (manifesto, nome na lista, subtítulo) e 24.
   Peso 300 em tudo, menos no 24, que é 400. Montserrat: 16 (corpo), 14 (miúdo, legenda, ajuda, campo) e 12.
   Caixa alta só no rótulo (até três por página), no menu e no botão: 12 px, 600, espaço .16em. Nada abaixo de 12 px. */
.rotulo { display: block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lago); margin-bottom: 24px; text-wrap: balance; }
.t-abertura, .t-secao, .t-manifesto, .t-item, .t-numero, .t-sub, .letreiro, .assinatura { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); }
.t-abertura { font-size: 72px; line-height: 76px; letter-spacing: -.015em; max-width: 10.5ch; }
.t-secao { font-size: 48px; line-height: 54px; letter-spacing: -.01em; }
.t-manifesto { font-size: 32px; line-height: 44px; }
.t-manifesto em, .t-secao em, .t-abertura em, .letreiro em { font-family: var(--fonte-titulo); font-style: italic; font-weight: inherit; }
.t-item { font-size: 32px; line-height: 38px; }
.t-sub { font-size: 32px; line-height: 40px; }
.t-numero { font-size: 72px; line-height: 72px; font-variant-numeric: lining-nums; }
.letreiro { font-size: 96px; line-height: 96px; letter-spacing: -.02em; }
.t-abertura, .t-secao, .t-manifesto, .t-sub, .letreiro { text-wrap: balance; }
.corpo { max-width: 540px; text-wrap: pretty; }
.t-secao + .corpo { margin-top: 24px; }
.corpo + .corpo { margin-top: 16px; }
/* Legenda em lago, 14 px e peso 500 (Lc 81,5; o lago abaixo de 16 px pede 500). Na faixa clara e na escura, outra cor. */
.legenda { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--lago); margin-top: 12px; text-wrap: balance; }
.clara .legenda { color: var(--petroleo); }
.sobre-escuro .legenda, .escura .legenda { color: var(--branco); }
.sem-quebra { white-space: nowrap; }
@media (max-width: 767px) {
  body { line-height: 26px; }
  .rotulo { margin-bottom: 18px; }
  .t-abertura { font-size: 40px; line-height: 44px; }
  .t-secao { font-size: 32px; line-height: 38px; }
  /* no celular o 24 também é o degrau de peso 400 */
  .t-manifesto { font-size: 24px; line-height: 34px; font-weight: 400; }
  .t-item { font-size: 24px; line-height: 30px; font-weight: 400; }
  .t-sub { font-size: 24px; line-height: 32px; font-weight: 400; }
  .t-numero { font-size: 48px; line-height: 48px; }
  .letreiro { font-size: 54px; line-height: 56px; }
}

/* ---------- botões e links ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px;
  border: 1px solid transparent; border-radius: 2px; text-decoration: none; cursor: pointer;
  font-family: var(--fonte-texto); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; background: none;
}
/* Botão cheio: petróleo com letra branca (Lc 102). Sobre foto e sobre o petróleo, inverte para branco com letra petróleo. */
.botao-cheio { background: var(--petroleo); color: var(--branco); border-color: var(--petroleo); }
.botao-cheio:hover { background: var(--lago); border-color: var(--lago); }
.abertura .botao-cheio, .escura .botao-cheio, .painel .botao-cheio { background: var(--branco); color: var(--petroleo); border-color: var(--branco); }
.abertura .botao-cheio:hover, .escura .botao-cheio:hover, .painel .botao-cheio:hover { background: var(--nevoa-clara); border-color: var(--nevoa-clara); }
.botao-contorno { border-color: var(--petroleo); color: var(--petroleo); }
.botao-contorno:hover { background: var(--petroleo); color: var(--branco); }
.botao-contorno-claro { border-color: var(--branco); color: var(--branco); }
.botao-contorno-claro:hover { background: var(--branco); color: var(--petroleo); }
.botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 48px; }
/* dois botões lado a lado ficam a 12 px; botão e link, a 28 px. Rodada 5: antes o segundo botão puxava -16 px e, quando
   descia de linha (a 1.280 px), ficava 16 px fora da coluna. */
.botoes .botao + .link { margin-left: 16px; }
/* Link de texto: 14 px, 500, caixa baixa, sublinhado. Mesmo desenho para <a> e <button>. */
.link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--fonte-texto); font-size: 14px; line-height: 22px; font-weight: 500; letter-spacing: 0; text-transform: none;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; color: var(--petroleo);
}
.link:hover { text-decoration-thickness: 2px; }
.escura .link { color: var(--branco); }
@media (max-width: 767px) { .botoes .botao { flex: 1 1 100%; } .botoes .botao + .link { margin-left: 0; } }

/* ---------- foto ---------- */
.foto { position: relative; overflow: hidden; background: #DCE4E5; }
.foto picture { width: 100%; height: 100%; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.r-4-5 { aspect-ratio: 4 / 5; }
.r-3-2 { aspect-ratio: 3 / 2; }
.r-16-9 { aspect-ratio: 16 / 9; }
.r-21-9 { aspect-ratio: 21 / 9; }
.r-1-1 { aspect-ratio: 1 / 1; }   /* rodada 5: moldura que o montar.py escolhe para foto quase quadrada; em pé, .r-4-5 */
/* Rodada 5: no celular, as faixas em sangria passam a 3:2 (antes 4:5, que cortava 55% de uma foto 16:9). */
@media (max-width: 767px) { .r-21-9 { aspect-ratio: 3 / 2; } .r-16-9.alta-no-celular { aspect-ratio: 3 / 2; } }

/* ---------- cabeçalho: o mesmo nas duas páginas ----------
   Sobre a foto da home: branco, com camada preta só no topo da foto (medida quadro a quadro em
   ferramentas/medir_cabecalho.py: pior quadro, menu com WCAG 5,4 no pixel mais claro e Lc 83). Sobre o branco da ficha: petróleo. */
.topo { position: absolute; top: 0; left: 0; right: 0; z-index: 30; color: var(--petroleo); }
.topo.sobre-foto { color: var(--branco); }
.topo .moldura { display: flex; align-items: center; justify-content: space-between; height: 88px; gap: 32px; }
.marca { display: inline-flex; align-items: center; min-height: 44px; flex: 0 0 auto; }
.marca img { width: 254px; height: auto; }
.menu { display: flex; align-items: center; gap: 36px; }
.menu a:not(.botao) { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.menu a:not(.botao):hover, .menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }   /* rodada 8: a página atual fica sublinhada */
.menu .botao { min-height: 44px; padding: 0 22px; margin-left: 4px; }
.abrir-menu { display: none; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.abrir-menu svg { width: 22px; height: 22px; }
/* Rodada 4: o menu inteiro (assinatura de 254 px, quatro itens e "Agende sua visita") pede 1.124 px de conteúdo.
   Abaixo de 1.366 px ele passava da margem (a 1.101 px, 40 px para fora da tela), e por isso o ícone entra antes.
   Rodada 5: o botão passou a "Fale conosco", mais curto; o ponto de troca fica o mesmo.
   Rodada 7 (QA final da rodada 6, item 13): o menu inteiro de 1.100 px para cima. De 1.100 a 1.365 px, a mesma letra (12 px,
   600, caixa alta) com espaço de .1em entre as letras (era .16em), 20 px entre os itens (eram 36), 16 px dentro do botão
   (eram 22) e 24 px entre a assinatura e o menu (eram 32): o menu passa de 802 a 683 px e cabe nos 694 px que sobram a
   1.100 px. De 1.366 px para cima, sem mudança. */
@media (max-width: 1365px) {
  .topo .moldura { gap: 24px; }
  .menu { gap: 20px; }
  .menu a:not(.botao), .menu .botao { letter-spacing: .1em; }
  .menu .botao { padding: 0 16px; }
}
@media (max-width: 1099px) { .menu { display: none; } .abrir-menu { display: inline-flex; } }
/* Rodada 7: a home leva as duas assinaturas (montar.py, cabecalho()). A branca vale sobre o vídeo; a escura no claro: na
   abertura empilhada (celular e tablet em pé) e no cabeçalho que volta ao rolar para cima (.topo.fixo). */
.marca .logo-escuro { display: none; }
/* Cabeçalho que volta (rodada 7, QA final da rodada 6, item 13; v2.js). Depois que o cabeçalho sai da tela, ele vira fixo,
   no claro e com a assinatura escura: some ao descer e volta ao subir. No topo da página, volta a ser o de sempre. Os
   alvos seguem com 44 px. Com menos movimento, aparece e some sem deslizar. Petróleo sobre #FEFEFE: WCAG 13,26, Lc 98,9. */
.topo.fixo { position: fixed; background: var(--branco); color: var(--petroleo); box-shadow: 0 1px 0 var(--fio); transform: translateY(-100%); }
.topo.fixo.anima { transition: transform .3s ease; }
.topo.fixo.visivel { transform: none; }
.topo.fixo .logo-claro { display: none; }
.topo.fixo .logo-escuro { display: block; }
.topo.fixo .botao-contorno-claro { border-color: var(--petroleo); color: var(--petroleo); }
.topo.fixo .botao-contorno-claro:hover { background: var(--petroleo); color: var(--branco); }
@media (prefers-reduced-motion: reduce) { .topo.fixo.anima { transition: none; } }
@media (max-width: 767px) { .topo .moldura { height: 76px; gap: 12px; } .abrir-menu { justify-content: center; } }
@media (max-width: 399px) { .abrir-menu .rotulo-menu { display: none; } }
/* Rodada 5: no celular a assinatura passa a 196 px (antes 254, dois terços da tela, encostada no ícone do menu).
   Abaixo de 360 px, o botão "Acesse a área do corretor" passava 2 px da tela: menos respiro lateral. */
@media (max-width: 767px) { .topo .marca img, .painel-topo img { width: 196px; } }
@media (max-width: 359px) { .botao { padding: 0 16px; letter-spacing: .1em; } }   /* "Baixe o book em PDF · 3,4 MB" cabe em 280 px */

.painel { position: fixed; inset: 0; z-index: 60; background: var(--petroleo); color: var(--branco); display: flex; flex-direction: column; padding: 0 var(--margem) 32px; overflow-y: auto; }
.painel[hidden] { display: none; }
.painel-topo { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 12px; }
.painel-topo img { width: 254px; height: auto; }
.painel nav { margin-top: 32px; }
.painel nav a { display: block; font-family: var(--fonte-titulo); font-weight: 300; font-size: 32px; line-height: 40px; padding: 12px 0; text-decoration: none; border-bottom: 1px solid var(--fio-claro); }
.painel nav a[aria-current="page"] { font-style: italic; }   /* rodada 8: a página atual, no painel do celular */
.painel .painel-pe { margin-top: auto; padding-top: 40px; font-size: 14px; line-height: 22px; color: var(--branco); }
.painel .painel-pe .botao { margin-top: 20px; width: 100%; }

/* ---------- abertura da home ---------- */
.abertura { position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 960px; color: var(--branco); overflow: hidden; background: #2C4A45; }
.abertura .midia { position: absolute; inset: 0; }
.abertura .midia picture, .abertura .midia img, .abertura .midia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abertura video { opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.abertura video.rodando { opacity: 1; visibility: visible; transition: opacity .8s ease; }   /* rodada 5: escondido até tocar */
/* camadas neutras, sem cor da marca: no topo (atrás do cabeçalho) e no pé (atrás do título) */
.abertura .midia::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; z-index: 1;
  background: linear-gradient(rgba(0,0,0,.60) 0, rgba(0,0,0,.55) 72px, rgba(0,0,0,0) 220px);
}
.abertura .midia::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,.30) 28%, rgba(0,0,0,0) 56%);
}
.abertura .conteudo { position: absolute; left: 0; right: 0; bottom: 104px; z-index: 2; }
.abertura .botoes { margin-top: 48px; }
/* Rodada 5 (Jordana: no celular a abertura ficava "grande demais", um canto do píer de tela inteira): abaixo de 768 px
   a abertura mostra o lugar numa caixa 4:5 da largura, no máximo 72% da altura pequena da tela (72svh, com as barras
   do navegador à vista). O cabeçalho fica por cima, o título e o botão na parte de baixo, e a seção seguinte começa
   logo depois. No computador, tela inteira, de 640 a 960 px. */
/* Rodada 7 (QA final da rodada 6, item 1; a Jordana já tinha reprovado o zoom do celular): abaixo de 768 px e no tablet em
   pé (até 1.279 px), a abertura abre como a ficha. O cabeçalho fica no claro, com a assinatura escura; o título e o botão,
   centrados no claro; e a península (O66) entra embaixo, na largura da tela, em 3:2, com 84% da largura da foto à vista (a
   caixa 4:5 da rodada 6 mostrava 45%, e o 16:9 cortado pela altura no tablet em pé, de 40% a 48%). Sem vídeo e sem a
   legenda, que repetiria o nome do botão logo acima. A caixa tem a altura pequena da tela (100svh) menos o respiro da seção
   seguinte: o manifesto começa depois da primeira tela (a 390 x 844, o título começa a 190 px do topo).
   A mesma condição está em montar.py (EMPILHADA, que vai no data-empilhada da seção) e no v2.js. */
@media (max-width: 767px), (max-width: 1279px) and (orientation: portrait) {
  .abertura { display: flex; flex-direction: column; height: auto; min-height: calc(100vh - var(--respiro)); min-height: calc(100svh - var(--respiro)); max-height: none; background: var(--branco); color: var(--petroleo); }
  .legenda-abertura { display: none !important; }
  .abertura .conteudo { position: static; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: calc(88px + 48px) 0 72px; text-align: center; }
  .abertura .t-abertura { margin: 0 auto; }
  .abertura .botoes { justify-content: center; }
  .abertura .midia { position: relative; inset: auto; flex: 0 0 auto; width: 100%; aspect-ratio: 3 / 2; background: #DCE4E5; }
  .abertura .midia::before, .abertura .midia::after { display: none; }
  .abertura .midia img { object-position: var(--pos-empilhada, 50% 50%); }
  .abertura video { display: none; }
  .abertura .botao-cheio { background: var(--petroleo); color: var(--branco); border-color: var(--petroleo); }
  .abertura .botao-cheio:hover { background: var(--lago); border-color: var(--lago); }
  .topo.sobre-foto { color: var(--petroleo); }
  .topo.sobre-foto .logo-claro { display: none; }
  .topo.sobre-foto .logo-escuro { display: block; }
  .topo.sobre-foto .botao-contorno-claro { border-color: var(--petroleo); color: var(--petroleo); }
  .topo.sobre-foto .botao-contorno-claro:hover { background: var(--petroleo); color: var(--branco); }
}
@media (max-width: 767px) {
  .abertura .conteudo { padding: calc(76px + 48px) 0 56px; }
  .abertura .t-abertura { font-size: 48px; line-height: 52px; }   /* no claro, sozinho na tela: 48 px, como o letreiro pede presença */
  .abertura .botoes { margin-top: 32px; }
  .abertura .botoes .botao { flex: 1 1 100%; }
}
.legenda-abertura { display: flex; justify-content: flex-start; }
.legenda-abertura .legenda { margin-top: 12px; }

/* ---------- manifesto ---------- */
.manifesto { text-align: center; }
.manifesto .t-manifesto { max-width: 800px; margin: 0 auto; }
@media (max-width: 767px) { .manifesto { text-align: left; } }

/* ---------- lista dos condomínios, com a foto à direita (home e ficha) ---------- */
.empreendimentos .cabeca { grid-column: 1 / -1; margin-bottom: 48px; }   /* rodada 5: a 768 px, "Empreendimentos" (376 px) não cabia em 6 colunas */
.outros .cabeca { grid-column: 1 / span 8; margin-bottom: 48px; }
.lista { grid-column: 1 / span 4; border-top: 1px solid var(--fio); }   /* rodada 8: 4 colunas, a foto nas 6 a 12 (rodada 5: 5 e 7 a 12) */
/* Rodada 8: Lacus, Araras e Recanto da Serra ficam sem página e sem link. Toda linha tem a mesma forma, o nome em cima e uma
   linha de dado embaixo, sem coluna à direita: a 1.440 px, 130 px de altura nas quatro. Na linha do Quinta a caixa inteira é
   o link (a.linha) e "Saiba mais" vai na linha do dado, a 24 px da situação; nas outras, a mesma caixa sem link (div.linha).
   Antes, o "Saiba mais" ficava numa coluna à direita, que sobraria vazia em três das quatro linhas. */
.lista li { border-bottom: 1px solid var(--fio); }
.lista .linha { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo"; align-items: start; padding: 32px 0; color: inherit; text-decoration: none; }
.lista .titulo { grid-area: titulo; }
.lista .miniatura { grid-area: mini; display: none; }
.lista .nome { display: block; }
.lista .dado { display: block; font-size: 14px; line-height: 22px; margin-top: 6px; }
.lista .dado .fase { font-weight: 500; color: var(--lago); white-space: nowrap; }
/* "Saiba mais": o desenho do .link (14 px, 500, sublinhado) dentro da linha do dado */
.lista .mais { margin-left: 24px; font-weight: 500; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lista a.linha:hover .t-item { color: var(--lago); }
.lista a.linha:hover .mais { text-decoration-thickness: 2px; }
.lista a.linha:focus-visible { outline-offset: -2px; }
.lista-foto { grid-column: 6 / span 7; align-self: start; }
/* Rodada 8 (pedido do diretor): de 1.024 px para cima, o topo da foto no primeiro fio e a base no último. A lista estica até a
   altura da foto (a linha da grade é a da foto, que é maior que a lista com 12 px de respiro mínimo) e as linhas dividem essa
   altura por igual, com o texto no meio, e nunca menos de 20 px entre o fio e o texto. A foto é 3:2. A 1.440, o respiro fica
   perto de 24 px na home e de 43 px na ficha. Saiu o position: sticky, que não tem mais para onde correr.
   Na lista de quatro linhas (a home, .quatro-linhas; confirmação da rodada 8, decisão do diretor): até 1.179 px a foto fica
   dentro da linha, como de 768 a 1.023; de 1.180 a 1.365 a foto ao lado é 4:3, e de 1.366 em diante, 3:2 (em 3:2 a foto só
   alcança as quatro linhas com 20 px de respiro a partir de 1.360 px). */
@media (min-width: 1024px) {
  .grade > .lista { display: grid; grid-auto-rows: 1fr; align-self: stretch; }
  .lista li { display: grid; }
  .lista .linha { padding: 20px 0; align-content: center; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .lista.quatro-linhas { grid-column: 1 / -1; }
  .lista-foto.quatro-linhas { display: none; }
  .lista.quatro-linhas .linha { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: none; column-gap: var(--calha); padding: 32px 0; align-content: start; }
  .lista.quatro-linhas .miniatura { display: block; grid-column: 1 / span 6; grid-row: 1; }
  .lista.quatro-linhas .titulo { grid-column: 8 / span 5; grid-row: 1; }
}
@media (min-width: 1180px) and (max-width: 1365px) { .lista-foto.quatro-linhas .foto { aspect-ratio: 4 / 3; } }
.lista-foto .pilha { position: relative; }
/* rodada 6: a pilha só empilha de 1.024 px para cima. Com position: absolute dentro do display: none do celular, o Chrome
   baixava as fotos 2 a 4 da pilha (loading="lazy" não segurava), três arquivos que a tela não mostra */
@media (min-width: 1024px) { .lista-foto .pilha .foto + .foto { position: absolute; inset: 0; } }
.lista-foto .foto { opacity: 0; transition: opacity .45s ease; }
.lista-foto .foto.ativa { opacity: 1; }
/* rodada 5: a foto ao lado da lista vale de 1.024 px para cima (antes, 1.101); abaixo, a foto entra na linha. A 1.024 px
   a foto na linha tinha 896 px e pedia mais que os 1.600 px do arquivo do Quinta */
@media (max-width: 1023px) {
  .lista { grid-column: 1 / -1; }
  .lista-foto { display: none; }
  .lista .linha { grid-template-areas: "mini" "titulo"; }
  .lista .miniatura { display: block; margin-bottom: 24px; }
}
/* Rodada 6: de 768 a 1.023 px, a foto fica dentro da linha, nas colunas 1 a 6, e o nome e o "Saiba mais" nas 8 a 12, com o
   topo do nome na linha do topo da foto. Antes, a foto ocupava a largura útil inteira (até 895 px), o que pedia mais que os
   1.600 px da foto do Recanto da Serra (do Instagram, ampliada por IA, que não passa de 800 px CSS). */
@media (max-width: 1023px) and (min-width: 768px) {
  .lista .linha { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: none; column-gap: var(--calha); }
  .lista .miniatura { grid-column: 1 / span 6; grid-row: 1; margin-bottom: 0; }
  .lista .titulo { grid-column: 8 / span 5; grid-row: 1; }
}
@media (max-width: 767px) {
  .empreendimentos .cabeca, .outros .cabeca { margin-bottom: 32px; }
  .lista .linha { padding: 24px 0; }
}

/* ---------- faixa em sangria e colagem (Araras e Lacus) ---------- */
.sangria .foto { width: 100%; }
/* Rodada 5: par de fotos 3:2, seis colunas cada, mesmo topo e mesma altura, e uma legenda sob o par, na borda da
   primeira. Antes: 4:5 em 5 e 3 colunas, com 432 px vazios no meio e a da direita 160 px mais baixa. O recorte da foto
   do Araras é só o object-position. */
.colagem { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); margin-top: 72px; align-items: start; }
.colagem .c1 { grid-column: 1 / span 6; }
.colagem .c2 { grid-column: 7 / span 6; }
.colagem > .legenda { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .colagem { display: block; margin-top: 48px; }
  .colagem .c2 { margin-top: 24px; }
}

/* ---------- destaque do Quinta ---------- */
/* Rodada 5 (sistema editorial): uma foto forte, 3:2 nas colunas 1 a 7, e o texto nas 9 a 12, com o topo do rótulo na
   linha do topo da foto. A lista vai no texto, numa coluna. De 768 a 1.100 px, foto em 6 colunas e texto em 5. */
.destaque .principal { grid-column: 1 / span 7; }
.destaque .texto { grid-column: 9 / span 4; align-self: start; }
.itens { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--fio); margin-top: 48px; }
.itens li { padding: 12px 0; border-bottom: 1px solid var(--fio); font-size: 16px; line-height: 24px; }
/* Rodada 7 (QA final da rodada 6, item 6): de 768 a 1.279 px, a foto na largura útil inteira e o texto embaixo, a 48 px da
   legenda: rótulo, título, parágrafo e botões nas colunas 1 a 7 e a lista nas 8 a 12, com o topo na linha do rótulo. Lado a
   lado, a foto acabava antes do texto e deixava de 237 px (1.180) a 516 px (768) vazios embaixo dela. A última linha da
   grade (1fr) recebe a altura que a lista tem a mais, para os blocos da esquerda não se afastarem. */
@media (max-width: 1279px) and (min-width: 768px) {
  .destaque .principal { grid-column: 1 / -1; }
  .destaque .texto { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(4, auto) 1fr; column-gap: var(--calha); align-items: start; margin-top: 48px; }
  .destaque .texto > * { grid-column: 1 / span 7; }
  .destaque .texto .itens { grid-column: 8 / span 5; grid-row: 1 / -1; margin-top: 0; }
}
@media (max-width: 767px) { .destaque .texto { margin-top: 48px; } }

/* ---------- faixa petróleo ---------- */
.escura { background: var(--petroleo); color: var(--branco); position: relative; }
.escura .rotulo { color: var(--nevoa); } /* 12 px, 600: Lc 75,6 */
/* pattern do ipê: ladrilho inteiro de 48 px, só no rodapé */
.faixa-ipe { height: 48px; background: url("/img/pattern-ipe-lago.png") repeat-x 0 0 / 48px 48px; }
.escura > .faixa-ipe { position: absolute; top: 0; left: 0; right: 0; }
/* Rodada 5: quatro colunas a partir de 1.101 px, duas abaixo; os anos acompanham a largura (40 a 64 px) com algarismos
   de largura fixa, e cada célula guarda 24 px até a seguinte (a 820 px os quatro anos de 72 px se encostavam). */
.linha-tempo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--calha); margin-top: 72px; border-top: 1px solid var(--fio-claro); }
.linha-tempo li { padding-top: 24px; padding-right: 24px; min-width: 0; }
.linha-tempo .t-numero { display: block; color: var(--ipe); font-size: clamp(40px, 4.4vw, 64px); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }   /* 300: WCAG 6,73 e Lc 59 sobre o petróleo */
.linha-tempo .nome { font-family: var(--fonte-titulo); font-weight: 400; font-size: 24px; line-height: 32px; margin-top: 24px; text-wrap: balance; }
@media (max-width: 1100px) { .linha-tempo { grid-template-columns: 1fr 1fr; row-gap: 48px; } }
@media (max-width: 767px) { .linha-tempo { margin-top: 48px; } .linha-tempo li { padding-right: 12px; } .linha-tempo .nome { font-size: 20px; line-height: 28px; margin-top: 12px; } }

/* ---------- faixa clara ---------- */
.clara { background: var(--nevoa-clara); }
.clara .rotulo { color: var(--petroleo); }

/* ---------- corretores: faixa clara, espelhado, uma foto só ---------- */
.corretores .texto { grid-column: 1 / span 5; grid-row: 1; align-self: start; }   /* rodada 5: o topo do título na linha do topo da foto */
.corretores .foto-col { grid-column: 7 / span 6; grid-row: 1; }
@media (max-width: 1100px) and (min-width: 768px) { .corretores .texto { grid-column: 1 / span 6; } }   /* o botão (302 px) não cabia em 5 colunas */
@media (max-width: 767px) { .corretores .foto-col { grid-row: auto; margin-top: 48px; } }

/* ---------- cadastro ---------- */
.cadastro .cabeca { grid-column: 1 / span 6; }
.cadastro form { grid-column: 8 / span 5; }
.campo { display: block; margin-bottom: 48px; }
.campo span { display: block; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--lago); }
.campo input { display: block; width: 100%; height: 44px; border: 0; border-bottom: 1px solid var(--petroleo); border-radius: 0; background: transparent; padding: 0; font: inherit; font-size: 16px; color: var(--petroleo); }
.campo input:focus { outline: none; border-bottom-width: 2px; }
.campo .ajuda { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--petroleo); margin-top: 8px; }
.aceite { display: flex; gap: 14px; align-items: flex-start; min-height: 44px; font-size: 14px; line-height: 22px; cursor: pointer; text-wrap: pretty; }
.aceite span { text-wrap: balance; }
.aceite input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 20px; border: 1px solid var(--petroleo); border-radius: 0; background: var(--branco); cursor: pointer; display: grid; place-items: center; }
.aceite input::after { content: ""; width: 10px; height: 5px; border: solid var(--branco); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.aceite input:checked { background: var(--petroleo); }
.aceite input:checked::after { opacity: 1; }
.aceite input:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 3px; }
.erro { color: var(--petroleo); font-size: 14px; line-height: 22px; font-weight: 600; margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--terra); }
.cadastro .botoes { margin-top: 48px; }
.aviso { margin-top: 16px; font-size: 14px; line-height: 22px; }
.privacidade { margin-top: 24px; }
.privacidade summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 14px; line-height: 22px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; list-style: none; }
.privacidade summary::-webkit-details-marker { display: none; }
.privacidade p { font-size: 14px; line-height: 22px; margin-top: 12px; max-width: 540px; }
@media (max-width: 767px) { .cadastro form { margin-top: 48px; } }

/* ---------- rodapé: um espaçamento só, de 26 px; colunas 7 a 9 e 10 a 12 ---------- */
.rodape { padding: calc(48px + 96px) 0 40px; }
.rodape .grade { row-gap: 48px; }
.rodape .marca img { width: 254px; }
.rodape .bloco-marca { grid-column: 1 / span 5; }
.rodape .assinatura { font-size: 24px; line-height: 32px; font-style: italic; font-weight: 400; margin-top: 24px; max-width: 420px; text-wrap: balance; }
.rodape .col { font-size: 14px; line-height: 26px; }
.rodape .col:nth-of-type(2) { grid-column: 7 / span 3; }
.rodape .col:nth-of-type(3) { grid-column: 10 / span 3; }
.rodape .col h2 { font-size: 14px; line-height: 26px; font-weight: 600; color: var(--nevoa); margin-bottom: 8px; }
.rodape .col p { color: var(--branco); }
.rodape .col p + ul { margin-top: 26px; }
.rodape .col a, .rodape .col .item { display: inline-block; text-decoration: none; }
/* rodada 8: .item é o nome sem link (Lacus, Araras e Recanto da Serra), em névoa e 500, como texto e não como link:
   Lc 75,6 sobre o petróleo, que passa a 14 px com peso 500 (pede 75) */
.rodape .col .item { color: var(--nevoa); font-weight: 500; }
.rodape .col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rodape .pe { align-items: center; margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--fio-claro); font-size: 12px; line-height: 18px; color: var(--branco); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rodape .pe a { color: inherit; }
.rodape .pe .assinaturas { display: flex; flex-wrap: wrap; gap: 0 24px; }
/* Texto jurídico do book, só na ficha: letra miúda depois dos links, como nas incorporadoras que mostram o registro.
   Branco 12/400 sobre petróleo: WCAG 13,26 e Lc 102. Rodada 5: 600 px, perto de 80 caracteres por linha (antes 880). */
.rodape .legal { margin-top: 20px; max-width: 600px; font-size: 12px; line-height: 18px; color: var(--branco); text-wrap: pretty; }
/* rodada 5: de 768 a 1.100 px, assinatura e Contato lado a lado em 6 + 6, e Empreendimentos embaixo de Contato
   (antes, três colunas de 141 px, com o endereço quebrado em sete linhas) */
@media (max-width: 1100px) and (min-width: 768px) {
  .rodape .bloco-marca { grid-column: 1 / span 6; }
  .rodape .col:nth-of-type(2) { grid-column: 7 / span 6; }
  .rodape .col:nth-of-type(3) { grid-column: 7 / span 6; }
}
@media (max-width: 767px) {
  .rodape { padding-top: calc(48px + 64px); }
  .rodape .col:nth-of-type(2), .rodape .col:nth-of-type(3) { grid-column: 1 / -1; }
  .rodape .col a, .rodape .col .item, .rodape .pe a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .rodape .col p + ul { margin-top: 8px; }
}

/* ---------- WhatsApp flutuante (aparece depois da abertura) ---------- */
.whats { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--petroleo); color: var(--branco);
  display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(254, 254, 254, .55), 0 6px 20px rgba(2, 52, 65, .28); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.whats.visivel { opacity: 1; transform: none; pointer-events: auto; }
.whats svg { width: 28px; height: 28px; }
@media (max-width: 767px) { .whats { right: 16px; bottom: 16px; } }

/* ---------- entrada na rolagem (só com JS e sem pedido de menos movimento) ---------- */
.js [data-entra] { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.js [data-entra].entrou { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-entra] { opacity: 1; transform: none; transition: none; }
  .abertura video { display: none; }
  * { scroll-behavior: auto !important; }
}

/* =================== ficha =================== */
.ficha-abertura { padding: calc(88px + 88px) 0 72px; text-align: center; }
.ficha-abertura .simbolo { width: 64px; height: auto; margin: 0 auto 32px; }
.ficha-abertura .linha { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lago); margin-top: 28px; }
.ficha-abertura .botoes { justify-content: center; }
@media (max-width: 767px) {
  .ficha-abertura { padding: calc(76px + 48px) 0 56px; }
  .ficha-abertura .simbolo { width: 52px; margin-bottom: 24px; }
  .ficha-abertura .linha { margin-top: 20px; }
  .ficha-abertura .botoes { margin-top: 32px; gap: 8px; }
}

.secao-fatos { padding: 72px 0 0; }
.fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));   /* rodada 5: sem "Localização", duas de 6 colunas */ column-gap: var(--calha); border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }
.fatos > div { padding: 28px 24px 28px 0; }
.fatos dt { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--lago); }
.fatos dd { font-family: var(--fonte-titulo); font-weight: 400; font-size: 24px; line-height: 32px; margin-top: 8px; text-wrap: balance; }
/* Rodada 5: "Três píeres e rampa para barcos" (338 px) não cabe numa linha abaixo de 1.366 px; ali ele quebra em duas. */
@media (min-width: 1366px) { .fatos dd { white-space: nowrap; } }
@media (max-width: 767px) {
  .secao-fatos { padding-top: 48px; }
  /* Rodada 5: um dado por linha. Com "Três píeres e rampa para barcos", a meia coluna dava 3 linhas a 390 px e 5 a 320. */
  .fatos { grid-template-columns: 1fr; row-gap: 0; }
  .fatos > div { padding: 16px 12px 16px 0; }
  .fatos > div + div { border-top: 1px solid var(--fio); }
  .fatos dd { margin-top: 4px; }
}

.lugar .texto { grid-column: 1 / span 5; align-self: start; }   /* rodada 5: foto 3:2 sem legenda; o topo do texto na linha do topo dela */
.lugar .foto-col { grid-column: 7 / span 6; }
@media (max-width: 767px) { .lugar .foto-col { margin-top: 48px; } }

.implantacao .cabeca { grid-column: 1 / span 6; margin-bottom: 48px; }
/* Rodada 6: o mapa em vetor (mapa/mapa.css, carregado antes deste arquivo) entra sem mudança no componente. Aqui, só o ritmo
   da casa (dentro da seção, 24, 48 ou 72) e a legenda com o topo na linha do topo do desenho (no componente, 8 px abaixo). */
.implantacao .mapa-legenda { padding-top: 0; }
.implantacao .mapa-zoom { margin-top: 24px; gap: 12px; }   /* 12 px entre os botões e a dica, o vão mínimo da casa (auditar-transbordo.js) */
.implantacao .mapa-legenda .mapa-dica { margin-top: 24px; }
@media (max-width: 1100px) { .implantacao .mapa-legenda { margin-top: 48px; } }
@media (max-width: 767px) { .implantacao .mapa-legenda button { gap: 12px; } }   /* no componente, 10 px entre a amostra e o nome */
/* Rodada 6: o desenho e os pinos da implantação saíram (.planta, .janela, .desenho, .pino, .nome-agua, .norte,
   .planta-legenda, .superficies, .amostra, .zoom). O mapa em vetor tem o próprio estilo, em mapa/mapa.css. */

/* Rodada 7 (QA final da rodada 6, item 4): os grupos na mesma grade das fotos de cima, quatro colunas de 1.024 px para cima
   e duas abaixo, com a mesma calha. Cada coluna começa na borda de uma foto. "Família" e "Infraestrutura" dividem a quarta
   coluna (montar.py), com 48 px entre os dois. */
.o-que-tem .grupos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--calha); row-gap: 48px; margin-top: 72px; align-items: start; }
.o-que-tem .grupo + .grupo { margin-top: 48px; }
@media (max-width: 1023px) { .o-que-tem .grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Rodada 6: quatro fotos 3:2 acima das listas, três colunas cada (mesmo topo, mesma altura), 48 px abaixo do título e
   72 acima dos grupos. Abaixo de 1.024 px, duas por linha. */
.lazer-fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--calha); row-gap: 48px; margin-top: 48px; align-items: start; }
@media (max-width: 1023px) { .lazer-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .lazer-fotos { row-gap: 24px; } }
/* rodada 5: os cinco grupos em 3, 3, 2, 2 e 2 colunas da grade de 12; rodada 7: na grade das fotos (acima) */
.o-que-tem .botoes { margin-top: 48px; }
.o-que-tem h3 { font-family: var(--fonte-titulo); font-size: 24px; line-height: 32px; font-weight: 400; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--fio); }
.o-que-tem li { padding: 6px 0; font-size: 16px; line-height: 24px; }
@media (max-width: 767px) { .o-que-tem .grupos { margin-top: 48px; row-gap: 48px; } .o-que-tem h3 { font-size: 20px; line-height: 28px; } .o-que-tem li { padding: 4px 0; } .o-que-tem .botoes { margin-top: 48px; } }

.galeria .cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.controles { display: flex; align-items: center; gap: 12px; }
.controles button { width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--petroleo); }
.controles button:disabled { cursor: default; }
.controles button:disabled svg { opacity: .3; }
.controles svg { width: 24px; height: 24px; }
.contador { font-size: 14px; line-height: 22px; font-weight: 500; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
:root { --borda: max(var(--margem), calc((100vw - var(--conteudo)) / 2)); }   /* rodada 5: onde a moldura começa, também acima de 1.440 px */
.trilho { display: flex; gap: var(--calha); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--borda); padding: 0 var(--borda); scrollbar-width: none; cursor: grab; }
.trilho::-webkit-scrollbar { display: none; }
.trilho.arrastando { cursor: grabbing; scroll-snap-type: none; }
.trilho figure { flex: 0 0 auto; width: var(--slide); scroll-snap-align: start; }
.trilho .foto { aspect-ratio: 3 / 2; }   /* rodada 6: 3:2 em toda largura (antes 16:9 e, no celular, 4:3) */
.trilho img { -webkit-user-drag: none; user-select: none; }
/* Rodada 8 (revisão independente, bloqueio 1): saiu o espaço do fim do trilho (.fim-trilho). Em 7 / 7 ele deixava um vão
   branco do tamanho de uma foto à direita; agora a última foto termina na margem direita (o padding do trilho), e o v2.js
   fecha o contador pela posição dela. */
@media (max-width: 767px) {
  .galeria .cabeca { margin-bottom: 24px; }
  .galeria .cabeca > div { min-width: 0; max-width: 100%; }
  .galeria .controles { margin-left: -12px; }
}

.andamento .t-secao { max-width: 588px; }
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--calha); margin-top: 72px; }
.numeros > div { display: flex; flex-direction: column; }
.numeros .valor { order: -1; font-family: var(--fonte-titulo); font-weight: 300; font-size: 72px; line-height: 72px; font-variant-numeric: lining-nums; padding-bottom: 20px; border-bottom: 1px solid var(--fio); }
.numeros dt { font-size: 16px; line-height: 24px; font-weight: 600; margin-top: 20px; text-wrap: pretty; }   /* rodada 7: sem "ruas" sozinha na última linha */
.numeros .detalhe { font-size: 14px; line-height: 22px; margin-top: 4px; max-width: 240px; text-wrap: pretty; }
.andamento .fonte { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--lago); margin-top: 48px; }
/* fotos de obra: sem data e com a mesma legenda do resto do site (.legenda). Rodada 6: quatro, em 2 x 2, seis colunas
   cada, todas 3:2, com 48 px entre as linhas (24 no celular, onde a grade fica a mesma) */
.registro-foto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--calha); row-gap: 48px; margin-top: 72px; align-items: start; }
/* rodada 5: abaixo de 1.101 px, duas colunas (a 768 px, "100%" em 72 px tinha 186 px numa coluna de 142) */
@media (max-width: 1100px) { .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }
@media (max-width: 767px) {
  .numeros { margin-top: 48px; }
  .numeros dt { font-size: 14px; line-height: 22px; hyphens: manual; }   /* rodada 7: era auto, e saía "cascalha-mento" */
  .numeros .valor { font-size: 48px; line-height: 48px; padding-bottom: 14px; }
  .numeros dt { margin-top: 14px; }
  .registro-foto { margin-top: 48px; row-gap: 24px; }
}

/* Rodada 7 (QA final da rodada 6, item 5): o título na primeira linha da grade; o parágrafo e o endereço na segunda, com o
   mesmo topo. "Escritório" leva a entrelinha de 26 px do endereço, e o topo das letras cai na mesma altura do parágrafo
   (16/28) ao lado. Antes o endereço descia até a base do bloco, e "Escritório" ficava 10 px acima do parágrafo. */
/* Rodada 8: área do corretor (corretores.html). Quatro blocos em 2 x 2, seis colunas cada (a calha da grade entre os dois),
   com o título de 24 px sobre o fio, como os grupos do lazer da ficha; no celular, um embaixo do outro. A faixa de contato
   usa o desenho da faixa da visita (.visita). */
.area-corretor .linha { text-wrap: balance; }   /* a 390 px, "CADASTRO" ficava sozinho na segunda linha */
.material .blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--calha); row-gap: 72px; margin-top: 72px; align-items: start; }
.material h3 { font-family: var(--fonte-titulo); font-size: 24px; line-height: 32px; font-weight: 400; padding-bottom: 12px; border-bottom: 1px solid var(--fio); }
.material .corpo { margin-top: 24px; }
.material .botoes { margin-top: 24px; }
/* rodada 8: "Copiar" com largura fixa: os dois rótulos na mesma célula da grade, um escondido (v2.js troca qual) */
.copiar { display: inline-grid; place-items: center; }
.copiar > span { grid-area: 1 / 1; }
.copiar .rotulo-copiado, .copiar.copiado .rotulo-copiar { visibility: hidden; }
.copiar.copiado .rotulo-copiado { visibility: visible; }
@media (max-width: 767px) {
  .material .blocos { grid-template-columns: 1fr; row-gap: 48px; margin-top: 48px; }
  .material h3 { font-size: 20px; line-height: 28px; }
}

.visita .t-secao { grid-column: 1 / span 7; grid-row: 1; }
.visita .cabeca { grid-column: 1 / span 7; grid-row: 2; margin-top: 24px; }
.visita .lado { grid-column: 9 / span 4; grid-row: 2; align-self: start; margin-top: 24px; font-size: 16px; line-height: 26px; color: var(--branco); }
.visita .lado strong { display: block; color: var(--nevoa); font-weight: 600; font-size: 14px; line-height: 26px; margin-bottom: 4px; }
@media (max-width: 1100px) { .visita .t-secao, .visita .cabeca, .visita .lado { grid-column: 1 / -1; } .visita .lado { grid-row: 3; margin-top: 48px; } }

/* publicação (montar.py): campo-isca do cadastro fora da tela e botão desligado enquanto envia */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.botao:disabled { opacity: .6; cursor: progress; }