/* =====================================================================
   institucional.css — ANUNCIAR (anunciar.html), CONTATO (contato.html)
   e 404 (404.html). Carregado depois de tokens, base e componentes
   (não depende de paginas.css). Prefixos: .inst- (comum às três),
   .an- (anunciar), .ct- (contato), .e404- (404).

   Revisão 13/10: escala contida (h1 = --t-display, 36 → 64 px), seções com
   --secao, sobretítulo em palavras (sem numeração editorial) e NADA
   escondido à espera de JS. Sem sombra difusa, sem gradiente de interface.
   ===================================================================== */

/* ---------- Comum ---------- */
.inst fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.inst legend { padding: 0; }
.inst q { quotes: "“" "”"; }

/* Capa: texto à esquerda, foto ou painel à direita */
.inst-capa { padding-block: clamp(24px, 3.5vw, 56px) var(--secao); }
.inst-capa__grade { row-gap: var(--e-10); align-items: center; }
.inst-capa__texto { min-width: 0; }
.inst-capa__titulo { max-width: 16ch; }
.inst-capa__titulo em { color: var(--marinho); }
.inst-capa__lead { margin-top: var(--e-4); max-width: 52ch; }
.inst-capa__acoes { margin-top: var(--e-6); }
.inst-capa__atalho { margin-top: var(--e-3); }
.inst-capa__atalho .link { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; }

.inst-capa__figura {
  margin: 0; border-radius: var(--raio-painel);
  aspect-ratio: 4 / 3;
}
.inst-capa__figura > img { object-position: 50% 55%; }
@media (min-width: 1024px) {
  .inst-capa__texto { grid-column: 1 / 8; padding-right: var(--e-6); }
  .inst-capa__figura {
    grid-column: 8 / 13; aspect-ratio: auto;
    height: clamp(460px, calc(100svh - var(--cabecalho-h) - 112px), 640px);
  }
}

/* Legenda sobre a foto: faixa marinho translúcida só embaixo (contraste AA garantido pelo véu) */
.inst-legenda { position: absolute; inset: auto 0 0 0; z-index: 1; }
.inst-legenda__link {
  display: grid; gap: 2px; padding: 12px 16px;
  background: var(--veu); color: var(--branco);
}
.inst-legenda__link .rotulo { color: var(--noite-2); font-size: .8125rem; }
.inst-legenda__texto { font-family: var(--f-serifa); font-size: 1.0625rem; line-height: 1.35; font-variant-numeric: lining-nums; }
.inst-legenda__ver { font-size: var(--t-small); font-weight: 600; color: var(--azul-claro); }
.inst-legenda__link:hover .inst-legenda__ver { text-decoration: underline; text-underline-offset: .2em; }
.inst-legenda__link:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: -3px; }
@media (min-width: 640px) {
  .inst-legenda__link { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--e-4); padding: 14px 20px; }
  .inst-legenda__link .rotulo { grid-column: 1 / -1; }
}

/* Números calculados do acervo (capa do anunciar) */
.inst-numeros {
  margin-top: var(--e-8); padding-top: var(--e-4); border-top: 1px solid var(--fio);
  display: grid; gap: var(--e-3) var(--gutter);
}
.inst-numero { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: baseline; column-gap: var(--e-3); }
.inst-numero dd { grid-row: 1; grid-column: 1; margin: 0; font-family: var(--f-sans); font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--marinho); font-variant-numeric: lining-nums tabular-nums; }
.inst-numero dt { grid-row: 1; grid-column: 2; font-size: var(--t-small); line-height: 1.4; color: var(--tinta-2); }
@media (min-width: 640px) {
  .inst-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inst-numero { grid-template-columns: none; row-gap: var(--e-1); align-content: start; }
  .inst-numero dd { grid-row: 1; grid-column: 1; font-size: var(--t-dado); font-weight: 500; }
  .inst-numero dt { grid-row: 2; grid-column: 1; }
}

/* Botão que parece link (copiar) */
.inst-copiar {
  display: inline-flex; align-items: center; min-height: var(--alvo); padding-inline: 0; /* alinhado à margem do texto acima */
  font-family: var(--f-sans); font-weight: 600; font-size: .9375rem; color: var(--marinho);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
  text-decoration-color: var(--fio-forte);
  transition: text-decoration-color var(--d-link) linear;
}
.inst-copiar:hover { text-decoration-color: currentColor; }
.inst-aviso { min-height: 1.45em; font-size: var(--t-small); color: var(--tinta-2); }
.inst-aviso:empty { min-height: 0; }

/* Passos como LINHA DO TEMPO (sem círculos numerados de template).
   Celular e tablet: lista vertical com fio à esquerda e marcador de 8 px.
   Desktop: fio horizontal de 1 px no topo, marcadores de 8 px e rótulo
   "PASSO 1" em sans 13 px maiúsculo. Texto do passo em 15 px, até 2 linhas. */
.inst-passos { position: relative; display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); padding-left: 24px; }
.inst-passos::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: var(--fio-forte); }
.inst-passo { position: relative; display: grid; gap: var(--e-1); align-content: start; }
.inst-passo::before {
  content: ""; position: absolute; left: -24px; top: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--marinho); box-shadow: 0 0 0 3px var(--papel-2);
}
.inst-passo__rotulo { font-family: var(--f-sans); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: var(--marinho); }
.inst-passo__titulo { font-size: var(--t-h3); margin-top: 2px; }
.inst-passo__texto { font-size: .9375rem; line-height: 1.5; color: var(--tinta-2); max-width: 34ch; }
@media (min-width: 1024px) {
  .inst-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); padding-left: 0; padding-top: 28px; }
  .inst-passos::before { left: 0; right: 0; top: 3px; bottom: auto; width: auto; height: 1px; }
  .inst-passo::before { left: 0; top: -28px; }
}

/* Índice com pontilhado e contagem (bairros, categorias) */
.inst-indice { border-top: 1px solid var(--fio-forte); }
.inst-indice li { border-bottom: 1px solid var(--fio); break-inside: avoid; }
.inst-indice a {
  display: flex; align-items: baseline; gap: var(--e-3);
  min-height: var(--alvo); padding-block: 12px;
}
.inst-indice__nome {
  font-family: var(--f-serifa); font-size: 1.125rem; line-height: 1.3; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: transparent; transition: text-decoration-color var(--d-link) linear;
}
.inst-indice__cidade { color: var(--tinta-2); }
.inst-indice a:hover .inst-indice__nome, .inst-indice a:focus-visible .inst-indice__nome { text-decoration-color: currentColor; }
.inst-indice__pontos { flex: 1 1 1rem; min-width: .75rem; border-bottom: 1px dotted var(--fio-forte); transform: translateY(-.3em); }
.inst-indice__conta { flex: none; font-family: var(--f-sans); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--marinho); }
.secao--noite .inst-indice { border-top-color: rgba(255, 255, 255, .45); }
.secao--noite .inst-indice__pontos { border-bottom-color: rgba(255, 255, 255, .35); }
.secao--noite .inst-indice__conta { color: var(--azul-claro); }
/* Em colunas (bairros): cada item leva o fio de cima e de baixo se sobrepõe (margin -1px), então toda coluna começa com fio */
.inst-indice--colunas { column-gap: var(--gutter); border-top: 0; padding-top: 1px; }
.inst-indice--colunas li { border-top: 1px solid var(--fio); margin-top: -1px; }
@media (min-width: 640px) { .inst-indice--colunas { columns: 2; } }
@media (min-width: 1024px) { .inst-indice--colunas { columns: 3; } }

/* =====================================================================
   ANUNCIAR
   ===================================================================== */
/* Como o imóvel aparece no site */
.an-exemplo__grade { row-gap: var(--e-10); align-items: start; }
.an-exemplo__lead { margin-top: var(--e-3); color: var(--tinta-2); max-width: 44ch; }
.an-exemplo__cartao { margin: var(--e-8) 0 0; max-width: 30rem; }
.an-exemplo__cartao .legenda { margin-top: var(--e-3); }
.an-itens { border-top: 1px solid var(--fio-forte); }
.an-item { display: grid; gap: var(--e-1); padding-block: var(--e-5); border-bottom: 1px solid var(--fio); }
.an-item__titulo { font-family: var(--f-sans); font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.an-item p { color: var(--tinta-2); max-width: 54ch; }
.an-mensagem {
  margin-top: var(--e-3); padding: var(--e-3) var(--e-4);
  border-left: 2px solid var(--marinho); background: var(--superficie);
  font-family: var(--f-serifa); font-style: italic; font-size: 1.0625rem; line-height: 1.45;
  overflow-wrap: anywhere;
}
@media (min-width: 640px) and (max-width: 1023px) {
  .an-exemplo__cartao { max-width: 26rem; }
}
@media (min-width: 1024px) {
  .an-exemplo__texto { grid-column: 1 / 6; position: sticky; top: calc(var(--cabecalho-h) + var(--e-6)); }
  .an-exemplo__notas { grid-column: 7 / 13; }
  .an-itens { margin-top: calc(var(--e-1) * -1); }
}

/* Construtoras */
.an-construtoras__grade { row-gap: var(--e-6); align-items: end; }
.an-construtoras__texto h2 { max-width: 22ch; }
.an-construtoras__acao { display: grid; gap: var(--e-5); justify-items: start; }
.an-construtoras__lead { color: var(--tinta-2); max-width: 52ch; }
.an-construtoras__lead q { font-family: var(--f-serifa); font-style: italic; color: var(--tinta); }
@media (min-width: 1024px) {
  .an-construtoras__texto { grid-column: 1 / 7; }
  .an-construtoras__acao { grid-column: 8 / 13; }
}

/* Monte a mensagem (marinho) */
.an-montar__grade { row-gap: var(--e-10); align-items: start; }
.an-montar__apoio { margin-top: var(--e-4); color: var(--noite-2); max-width: 40ch; }
.an-montar__tel { margin-top: var(--e-3); }
.an-montar__painel { display: grid; gap: var(--e-6); min-width: 0; }
.an-montar__semjs { justify-items: start; gap: var(--e-3); }
.an-grupo { display: grid; gap: var(--e-2); }
.an-grupo__rotulo { font-family: var(--f-sans); font-size: var(--t-small); font-weight: 600; color: var(--branco); margin-bottom: var(--e-1); }
/* Chips sobre marinho: contorno claro; marcado = branco com texto marinho.
   São <label> com <input type="radio"> visualmente oculto: o foco aparece no rótulo. */
.chip--radio { cursor: pointer; position: relative; }
.an-montar .chip { background: transparent; color: var(--branco); border-color: rgba(255, 255, 255, .4); }
.an-montar .chip:hover { border-color: var(--branco); }
.an-montar .chip:has(input:checked) { background: var(--branco); border-color: var(--branco); color: var(--marinho); }
.an-montar .chip:has(input:focus-visible) { outline: 2px solid var(--azul-claro); outline-offset: 3px; }
.an-previa { display: grid; gap: var(--e-4); justify-items: start; padding-top: var(--e-5); border-top: 1px solid var(--fio-noite); }
.an-previa__texto {
  margin: 0; padding-left: var(--e-4); border-left: 2px solid var(--azul-claro);
  font-family: var(--f-serifa); font-style: italic; font-size: var(--t-lead); line-height: 1.4;
  max-width: 44ch; overflow-wrap: anywhere;
}
.an-previa__nota { font-size: var(--t-small); color: var(--noite-2); max-width: 52ch; }
@media (min-width: 1024px) {
  .an-montar__intro { grid-column: 1 / 6; }
  .an-montar__painel { grid-column: 7 / 13; }
}

/* =====================================================================
   CONTATO
   ===================================================================== */
.ct-capa__grade { align-items: start; }
.ct-fone { margin-top: var(--e-8); padding-top: var(--e-5); border-top: 1px solid var(--fio); }
.ct-fone__rotulo { font-size: var(--t-small); font-weight: 600; color: var(--tinta-2); }
.ct-fone__numero {
  display: inline-block; margin-top: var(--e-1);
  font-family: var(--f-serifa); font-weight: 400;
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em;
  font-variant-numeric: lining-nums proportional-nums; white-space: nowrap; color: var(--marinho);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em;
  text-decoration-color: transparent; transition: text-decoration-color var(--d-link) linear;
}
.ct-fone__numero:hover { text-decoration-color: currentColor; }
.ct-fone__acoes { margin-top: var(--e-5); }
.ct-fone .inst-aviso { margin-top: var(--e-2); }

/* Painel "Outros canais" ao lado do telefone */
.ct-canais {
  background: var(--superficie); border: 1px solid var(--fio); border-radius: var(--raio-painel);
  padding: var(--e-5) var(--e-5) var(--e-3);
}
.ct-canais__titulo { font-family: var(--f-sans); font-size: var(--t-small); font-weight: 600; letter-spacing: 0; color: var(--tinta-2); }
.ct-canal { padding-block: var(--e-4); border-bottom: 1px solid var(--fio); }
.ct-canal:last-child { border-bottom: 0; }
.ct-canal dt { font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.ct-canal dd { margin: var(--e-1) 0 0; display: grid; justify-items: start; }
.ct-canal__valor { font-family: var(--f-serifa); font-size: 1.25rem; line-height: 1.35; overflow-wrap: anywhere; }
.ct-canal__links { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); margin-top: var(--e-1); }
.ct-canal__links .link-seta { font-size: .9375rem; }
@media (min-width: 640px) { .ct-canais { padding: var(--e-6) var(--e-8) var(--e-4); } }
@media (min-width: 1024px) {
  .ct-capa .inst-capa__texto { grid-column: 1 / 8; }
  .ct-canais { grid-column: 8 / 13; margin-top: var(--e-2); }
}

/* Assuntos do WhatsApp */
.ct-assuntos { border-top: 1px solid var(--fio-forte); }
.ct-assuntos > li { border-bottom: 1px solid var(--fio); }
.ct-assunto {
  display: grid; gap: var(--e-1);
  padding-block: var(--e-5);
}
.ct-assunto__titulo {
  font-family: var(--f-serifa); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.2; letter-spacing: -0.01em;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
  text-decoration-color: transparent; transition: text-decoration-color var(--d-link) linear;
}
.ct-assunto__msg { font-family: var(--f-serifa); font-style: italic; font-size: var(--t-small); line-height: 1.45; color: var(--tinta-2); max-width: 52ch; }
.ct-assunto__acao { margin-top: var(--e-1); font-size: var(--t-small); font-weight: 600; color: var(--marinho); white-space: nowrap; }
.ct-assunto:hover .ct-assunto__titulo, .ct-assunto:focus-visible .ct-assunto__titulo { text-decoration-color: currentColor; }
.ct-assunto:hover .ct-assunto__acao { text-decoration: underline; text-underline-offset: .2em; }
.ct-assuntos__nota { margin-top: var(--e-6); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-3); color: var(--tinta-2); }
@media (min-width: 1024px) {
  .ct-assunto {
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto;
    column-gap: var(--gutter); align-items: baseline; padding-block: var(--e-6);
  }
  .ct-assunto__acao { margin-top: 0; justify-self: end; }
}

/* O acervo de hoje (faixa CLARA: o rodapé logo abaixo é o único plano escuro) */
.ct-acervo { border-top: 1px solid var(--fio); }
.ct-acervo__grade { row-gap: var(--e-10); align-items: start; }
.ct-acervo__dados { margin-block: var(--e-4) var(--e-6); color: var(--tinta-2); max-width: 44ch; }
@media (min-width: 1024px) {
  .ct-acervo__texto { grid-column: 1 / 6; }
  .ct-acervo__lista { grid-column: 7 / 13; }
}

/* =====================================================================
   404
   ===================================================================== */
.e404__grade { row-gap: var(--e-10); align-items: start; }
.e404__antigo {
  margin-top: var(--e-5); padding: var(--e-2) 0 var(--e-2) var(--e-4);
  border-left: 2px solid var(--laterita); max-width: 56ch;
}
.e404__antigo .rotulo { display: block; margin-bottom: var(--e-1); color: var(--laterita); }
.e404__busca { margin-top: var(--e-6); display: grid; gap: 6px; max-width: 36rem; }
.e404__linha { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
.e404__linha .campo__entrada { flex: 1 1 14rem; }
.e404__linha .botao { flex: 0 0 auto; }
@media (max-width: 479px) { .e404__linha .botao { flex: 1 1 100%; } }
.e404__saidas-titulo { font-family: var(--f-sans); font-size: var(--t-small); font-weight: 600; letter-spacing: 0; color: var(--tinta-2); margin-bottom: var(--e-2); }
.e404__saidas ul { border-top: 1px solid var(--fio-forte); }
.e404__saidas li { border-bottom: 1px solid var(--fio); }
.e404__saidas a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4);
  min-height: var(--alvo); padding-block: 14px;
}
.e404__saida {
  font-family: var(--f-serifa); font-size: 1.1875rem; line-height: 1.25;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: transparent; transition: text-decoration-color var(--d-link) linear;
}
.e404__saidas a:hover .e404__saida, .e404__saidas a:focus-visible .e404__saida { text-decoration-color: currentColor; }
.e404__conta { flex: none; font-size: var(--t-small); font-weight: 600; color: var(--marinho); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .e404__texto { grid-column: 1 / 8; }
  .e404__saidas { grid-column: 9 / 13; margin-top: var(--e-8); }
}

/* Celular: a lista de bairros vira etiquetas que correm em linha (32 bairros em ~12 linhas, não 32) */
@media (max-width: 639px) {
  .inst-indice--colunas { display: flex; flex-wrap: wrap; gap: var(--e-2); padding-top: 0; }
  .inst-indice--colunas li { margin: 0; border: 1px solid var(--fio-forte); border-radius: 999px; background: var(--superficie); }
  .inst-indice--colunas a { min-height: 40px; padding: 0 14px; gap: var(--e-2); align-items: center; }
  .inst-indice--colunas .inst-indice__nome { font-family: var(--f-sans); font-size: .875rem; line-height: 1.25; }
  .inst-indice--colunas .inst-indice__pontos { display: none; }
  .inst-indice--colunas .inst-indice__conta { font-size: .8125rem; }
}
/* No celular mostramos os 14 bairros com mais imóveis; a lista completa aparece a partir de 640 px
   e todos os imóveis estão a um toque em "Ver todos os imóveis". */
@media (max-width: 639px) {
  .inst-indice--colunas li:nth-child(n+15) { display: none; }
}