/* =====================================================================
   base.css — reset, tipografia, grid, seções, fotos, foco, utilitários.
   Depende de tokens.css. Componentes ficam em componentes.css.

   REGRA (revisão 13/10): NADA começa escondido. Não existe CSS que dependa
   de JavaScript para mostrar conteúdo (sem opacity:0 / visibility:hidden /
   clip-path de partida). movimento.js só realça o que já está visível.
   ===================================================================== */

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-top: calc(var(--cabecalho-h) + 16px);
}
body {
  margin: 0;
  min-height: 100svh;
  overflow-x: clip;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--fio); margin: 0; }
dialog { padding: 0; border: 0; max-width: none; max-height: none; color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--marinho); color: var(--branco); }

/* ---------- Tipografia ---------- */
.display, .h1, .h2, .h3, h1, h2, h3 {
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-weight: 400;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.display { font-size: var(--t-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.022em; }
.h1, h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.018em; }
.h2, h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.012em; }
.h3, h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.005em; }
em, .italico { font-style: italic; }
.display em, .h1 em, .h2 em { font-weight: 400; }

p { text-wrap: pretty; }
.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: var(--medida);
}
.lead--serifa { font-family: var(--f-serifa); color: inherit; font-variant-numeric: oldstyle-nums proportional-nums; }
.prosa {
  font-family: var(--f-serifa);
  font-size: calc(var(--t-body) + .0625rem);
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums proportional-nums;
  max-width: var(--medida);
}
.prosa > * + * { margin-top: 1em; }
.prosa ul { list-style: none; }
.prosa li { position: relative; padding-left: 1.25em; }
.prosa li + li { margin-top: .35em; }
.prosa li::before { content: "–"; position: absolute; left: 0; color: var(--tinta-2); }

.pequeno { font-size: var(--t-small); line-height: 1.45; }
.secundario { color: var(--tinta-2); }
/* Rótulo curto em caixa-alta (código, "Venda"). Nunca para título. */
.rotulo {
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rotulo--laterita { color: var(--laterita); }
/* Sobretítulo de seção: diz o assunto em palavras, sem numeração. */
.sobretitulo {
  font-family: var(--f-sans);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--marinho);
  margin-bottom: var(--e-3);
}
.secao--noite .sobretitulo { color: var(--azul-claro); }

.num, .preco, .dado { font-family: var(--f-sans); font-variant-numeric: tabular-nums lining-nums; }
/* Na Schibsted, tabular-nums alarga ponto e vírgula; preço usa algarismos proporcionais. */
.preco, .valor { font-variant-numeric: lining-nums proportional-nums; }
.preco { font-size: var(--t-preco); font-weight: 600; line-height: 1.2; }
.dado { font-size: var(--t-dado); font-weight: 500; line-height: 1.1; }
.legenda {
  font-family: var(--f-serifa);
  font-style: italic;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--tinta-2);
}

/* Quebra intencional de título: o span externo é a máscara, o interno anima.
   Visível por padrão; movimento.js só desloca durante a animação. */
.linha { display: block; overflow: clip; overflow-clip-margin: .12em; padding-bottom: .06em; margin-bottom: -.06em; }
.linha > span { display: inline-block; }

/* ---------- Grid ---------- */
.grade {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margem);
  max-width: var(--largura-max);
  margin-inline: auto;
}
.grade > * { grid-column: 1 / -1; min-width: 0; }
.envoltorio { padding-inline: var(--margem); max-width: var(--largura-max); margin-inline: auto; }

/* Posição nas 12 colunas (desktop). Abaixo de 1024 px tudo ocupa a largura toda. */
@media (min-width: 1024px) {
  .c-1-4 { grid-column: 1 / 5; }  .c-1-5 { grid-column: 1 / 6; }  .c-1-6 { grid-column: 1 / 7; }
  .c-1-7 { grid-column: 1 / 8; }  .c-1-8 { grid-column: 1 / 9; }  .c-2-7 { grid-column: 2 / 8; }
  .c-2-8 { grid-column: 2 / 9; }  .c-2-11 { grid-column: 2 / 12; } .c-3-8 { grid-column: 3 / 9; }
  .c-1-3 { grid-column: 1 / 4; }  .c-4-12 { grid-column: 4 / 13; } .c-5-12 { grid-column: 5 / 13; }
  .c-6-12 { grid-column: 6 / 13; } .c-7-12 { grid-column: 7 / 13; } .c-8-12 { grid-column: 8 / 13; }
  .c-9-12 { grid-column: 9 / 13; }
}
/* Sangria: a foto vai até a borda da janela. */
.sangra-dir { margin-right: calc(-1 * var(--margem)); }
.sangra-esq { margin-left: calc(-1 * var(--margem)); }
@media (min-width: 1360px) {
  .sangra-dir { margin-right: calc((100vw - var(--largura-max)) / -2 - var(--margem)); }
  .sangra-esq { margin-left: calc((100vw - var(--largura-max)) / -2 - var(--margem)); }
}

/* ---------- Seções ---------- */
.secao { padding-block: var(--secao); }
.secao--compacta { padding-block: calc(var(--secao) * .75); }
.secao--papel-2 { background: var(--papel-2); }
.secao--noite {
  background: var(--noite);
  color: var(--branco);
  --fio: var(--fio-noite);
  --tinta-2: var(--noite-2);
}
.secao--noite ::selection { background: var(--azul-claro); color: var(--noite); }
/* Faixa clara azulada (contato da home): destaca sem escurecer. Fica antes do
   rodapé, que é o único plano escuro no fim da página (nunca duas escuras seguidas). */
.secao--nevoa { background: var(--azul-nevoa); --tinta-2: #45506A; }

/* Cabeça de seção: sobretítulo + título (+ texto) à esquerda, link à direita,
   na linha de base do último texto. Mesma regra em todas as seções.
   Celular: o link sai da cabeça e vira botão de largura total no FIM da lista
   (.secao__mais), para não somar uma linha entre o título e os cartões. */
.cabeca {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--e-4) var(--e-6);
  margin-bottom: var(--e-6);
}
.cabeca__texto { max-width: 46rem; }
.cabeca__texto > p:not(.sobretitulo) { margin-top: var(--e-3); color: var(--tinta-2); max-width: var(--medida); }
.cabeca__acao { flex: none; min-height: 0; line-height: 1.3; padding-bottom: .2em; }
.secao__mais { margin-top: var(--e-6); }
@media (max-width: 639px) {
  .cabeca--com-mais .cabeca__acao { display: none; }
}
@media (min-width: 640px) {
  .cabeca { margin-bottom: clamp(32px, 2.8vw, 40px); }
  .secao__mais { display: none; }
}

/* ---------- Fotos ----------
   Toda moldura .foto tem fundo papel-2 com o SÍMBOLO da marca ao centro:
   se a foto falhar (onerror → .img-falhou), o cartão continua com cara de
   cartão, nunca um retângulo vazio. */
.foto {
  position: relative; overflow: hidden;
  background: var(--papel-2) url("../marca/simbolo.svg") center / clamp(32px, 22%, 72px) no-repeat;
}
.foto > img, .foto > picture > img { width: 100%; height: 100%; object-fit: cover; }
.foto > img.img-falhou, img.img-falhou { visibility: hidden; }
.foto--4-3 { aspect-ratio: 4 / 3; }
.foto--4-5 { aspect-ratio: 4 / 5; }
.foto--3-4 { aspect-ratio: 3 / 4; }
.foto--1-1 { aspect-ratio: 1 / 1; }
.foto--16-9 { aspect-ratio: 16 / 9; }
.secao--noite .foto { background-color: #0C2557; background-image: url("../marca/simbolo-branco.svg"); }
/* Parallax: a imagem tem 116% da moldura (só com movimento ativo, ≥ 768 px) */
.parallax--ativo > img { height: 116%; position: absolute; inset: -8% 0 auto 0; }

/* ---------- Foco visível ---------- */
:focus-visible { outline: 2px solid var(--marinho); outline-offset: 3px; }
.secao--noite :focus-visible, .rodape :focus-visible { outline-color: var(--azul-claro); }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Utilitários ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sem-quebra { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; }
.respiro { margin-top: var(--respiro-titulo); }
.alinha-dir { text-align: right; }

/* ---------- Pular para o conteúdo ---------- */
.pular {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--marinho); color: var(--branco);
  padding: 12px 16px; font-weight: 600; border-radius: var(--raio-controle);
}
.pular:focus { top: 12px; }

/* ---------- Transições entre páginas (DIRECAO §7h) ---------- */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 380ms; animation-timing-function: var(--ease-estado); }
::view-transition-old(foto-imovel), ::view-transition-new(foto-imovel) { height: 100%; object-fit: cover; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: min(var(--d-micro), 150ms) !important;
  }
}

/* ---------- Lenis 1.1.13 (regras de lenis.css, aqui para não bloquear a
   renderização com mais um CSS externo; só valem quando o movimento.js liga o Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }