/* =====================================================================
   paginas.css — seções da HOME (index.html).
   Revisão 13/10: proporção contida, busca em primeiro plano, nada de
   numeração editorial; todo conteúdo visível sem JS.
   Polimento 13/10 (crítica): primeira dobra mais curta (capa com foto de
   no máximo 600 px e atalhos numa linha), categorias como índice sem foto
   (três grades de foto seguidas deixavam o ritmo monótono), Casa Leal com
   texto que acompanha as fotos, faixa de contato clara antes do rodapé
   escuro (nunca duas seções escuras seguidas).
   Utilitários comuns ficam em base.css e componentes.css.
   ===================================================================== */

/* Subgrade herdada da v1 (algumas páginas usam). */
.subgrade { display: grid; grid-template-columns: subgrid; }

/* ---------- Capa ---------- */
.capa { padding-block: var(--e-6) 0; }
.capa__grade { row-gap: var(--e-8); align-items: center; }
.capa__titulo { max-width: 17ch; }
.capa__titulo em { color: var(--marinho); }
.capa__lead { margin-top: var(--e-4); max-width: 44ch; }
.capa__busca { margin-top: var(--e-6); }

/* Atalhos "Mais procurados": rótulo numa linha, chips numa linha só.
   Celular: a linha corre na horizontal (sem quebrar em 3 linhas). */
.capa__atalhos { margin-top: var(--e-4); }
.capa__atalhos-rotulo { display: block; margin-bottom: var(--e-2); font-size: .8125rem; font-weight: 500; color: var(--tinta-2); }
.capa__atalhos .chips { gap: var(--e-2); }
.capa__atalhos .chip { margin-block: 0; white-space: nowrap; }
@media (max-width: 639px) {
  .capa__atalhos .chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); scroll-padding-inline: var(--margem);
  }
  .capa__atalhos .chips::-webkit-scrollbar { display: none; }
  .capa__atalhos .chips > li { flex: none; scroll-snap-align: start; }
}
@media (hover: hover) and (pointer: fine) {
  .capa__atalhos .chip { min-height: 36px; padding-inline: 14px; }
}

/* Foto da capa: a marca d'água do site antigo fica no centro das fotos; o
   enquadramento puxa a foto para baixo (object-position 50% 85%) para a marca
   cair na parede lisa, longe do meio da composição.
   [a confirmar com a Pulse: fotos sem marca d'água para o site novo] */
.capa__figura { position: relative; margin: 0; overflow: hidden; border-radius: var(--raio-painel); aspect-ratio: 4 / 3; background: var(--papel-2) url("../marca/simbolo.svg") center / 64px no-repeat; }
.capa__figura > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 85%; }
.capa__legenda { position: absolute; inset: auto 0 0 0; }
.capa__legenda-link {
  display: grid; gap: 2px; padding: 12px 16px;
  background: var(--veu); color: var(--branco);
}
.capa__legenda-link .rotulo { color: var(--noite-2); font-size: .8125rem; }
.capa__legenda-texto { font-family: var(--f-serifa); font-size: 1.0625rem; line-height: 1.35; }
.capa__ver { font-size: var(--t-small); font-weight: 600; color: var(--azul-claro); }
.capa__legenda-link:hover .capa__ver, .capa__legenda-link:focus-visible .capa__ver { text-decoration: underline; text-underline-offset: .2em; }
.capa__legenda-link:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: -3px; }

@media (min-width: 640px) {
  .capa__legenda-link { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--e-4); padding: 14px 20px; }
  .capa__legenda-link .rotulo { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .capa__texto { grid-column: 1 / 7; }
  .capa__figura {
    grid-column: 7 / 13; aspect-ratio: auto;
    height: clamp(440px, calc(100svh - var(--cabecalho-h) - 120px), 600px);
  }
}
@media (min-width: 1280px) {
  .capa__texto { padding-right: var(--e-4); }
}

.busca [data-campo-preco][aria-disabled="true"] { opacity: .5; }

/* A primeira seção depois da capa começa mais perto (a dobra mostra os destaques). */
.capa + .secao { padding-top: clamp(40px, 4vw, 64px); }

/* ---------- Destaques ---------- */
.destaques__lista { row-gap: var(--e-10); }

/* ---------- Categorias: índice compacto, sem foto ----------
   Nome em Newsreader 20 px, fio pontilhado e contagem à direita; 56 px por
   linha. Duas colunas no desktop, uma no celular. */
.categorias { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gutter); border-top: 1px solid var(--fio-forte); }
@media (min-width: 768px) {
  .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); border-top: 0; }
  /* cada coluna começa com o fio forte */
  .categorias > li:nth-child(-n+2) { border-top: 1px solid var(--fio-forte); }
}
.categorias > li { border-bottom: 1px solid var(--fio); min-width: 0; }
.categoria {
  display: flex; align-items: baseline; gap: var(--e-3);
  min-height: 56px; padding-block: 14px; color: var(--tinta);
}
.categoria__nome {
  font-family: var(--f-serifa); font-size: clamp(1.0625rem, 1rem + .45vw, 1.25rem); line-height: 1.3; text-wrap: pretty; min-width: 0;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: transparent;
  transition: text-decoration-color var(--d-link) linear;
}
.categoria__pontos { flex: 1 1 1rem; min-width: .75rem; border-bottom: 1px dotted var(--fio-forte); transform: translateY(-.3em); }
.categoria__conta { flex: none; font-family: var(--f-sans); font-size: 1rem; font-weight: 600; color: var(--marinho); font-variant-numeric: tabular-nums lining-nums; }
.categoria:hover .categoria__nome, .categoria:focus-visible .categoria__nome { text-decoration-color: currentColor; }
.categoria:focus-visible { outline-offset: 2px; }

/* ---------- Casa Leal (noite) ----------
   Texto acompanha as fotos na rolagem (sticky); fotos em pé (as originais são
   960×1280) num 2×2 a 4:5; legendas legíveis (15 px, #C9D3E8 = 11,4:1). */
.leal__grade { row-gap: var(--e-8); align-items: start; }
.leal__lead { margin-top: var(--e-4); color: var(--noite-2); max-width: 46ch; }
.leal__dados { display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-8); margin-block: var(--e-6); padding-block: var(--e-4); border-block: 1px solid var(--fio-noite); }
.leal__dados dt { font-size: var(--t-small); color: var(--noite-2); }
.leal__dados dd { font-family: var(--f-sans); font-size: var(--t-preco); font-weight: 600; font-variant-numeric: lining-nums proportional-nums; }
.leal .botoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.leal .botoes .botao { min-height: 48px; }
.leal__fotos { display: grid; gap: var(--e-6) var(--gutter); }
/* Celular: trilho horizontal (componentes.css). A grade 2×2 só a partir de 640 px,
   senão ela vence o grid-auto-flow do .trilho e espreme as duas primeiras fotos. */
@media (min-width: 640px) { .leal__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.leal__foto .foto { border-radius: var(--raio-controle); aspect-ratio: 4 / 5; }
.leal__foto figcaption {
  margin-top: var(--e-2); font-family: var(--f-serifa); font-style: italic;
  font-size: .9375rem; line-height: 1.5; color: #C9D3E8;
}
@media (min-width: 1024px) {
  .leal__texto { grid-column: 1 / 6; position: sticky; top: calc(var(--cabecalho-h) + 32px); align-self: start; }
  .leal__fotos { grid-column: 6 / 13; }
}

/* ---------- Quem somos ---------- */
.sobre__grade { row-gap: var(--e-8); align-items: center; }
.sobre__prosa { margin-top: var(--e-4); display: grid; gap: var(--e-3); max-width: var(--medida); color: var(--tinta-2); }
.sobre__texto .link-seta { margin-top: var(--e-4); }
.sobre__citacao { border-left: 2px solid var(--marinho); padding-left: clamp(20px, 2.5vw, 36px); }
.sobre__citacao blockquote p {
  font-family: var(--f-serifa); font-style: italic; font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.3; letter-spacing: -0.01em;
  text-wrap: balance;
}
.sobre__citacao figcaption { margin-top: var(--e-4); display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-small); color: var(--tinta-2); }
.marca__simbolo-mini { width: 22px; height: 22px; flex: none; background: url("../marca/simbolo-app.svg") center / contain no-repeat; border-radius: 4px; }
@media (min-width: 1024px) {
  .sobre__texto { grid-column: 1 / 7; }
  .sobre__citacao { grid-column: 8 / 13; }
}

/* ---------- Construtoras ---------- */
.gestao { padding-block: calc(var(--secao) * .75); }
.gestao__grade { row-gap: var(--e-8); align-items: start; }
.gestao__lead { margin-block: var(--e-4) var(--e-6); color: var(--tinta-2); max-width: var(--medida); }
.gestao__etapas-titulo { font-family: var(--f-sans); font-size: var(--t-small); font-weight: 600; color: var(--tinta-2); margin-bottom: var(--e-2); letter-spacing: 0; }
.gestao__etapas { border-top: 1px solid var(--fio-forte); }
.gestao__etapas li {
  padding-block: 16px; border-bottom: 1px solid var(--fio);
  font-family: var(--f-serifa); font-size: 1.25rem; line-height: 1.3;
}
@media (min-width: 1024px) {
  .gestao__texto { grid-column: 1 / 7; }
  .gestao__etapas-bloco { grid-column: 8 / 13; }
}

/* ---------- Faixa de contato (clara, antes do rodapé escuro) ----------
   Uma faixa só: texto à esquerda (1–6), ações à direita (7–12) na linha de
   base. WhatsApp é o primário; ligar é secundário; e-mail vira link de texto. */
.contato-faixa { padding-block: calc(var(--secao) * .75); }
.contato-faixa__grade { row-gap: var(--e-6); align-items: end; }
.contato-faixa__nota { margin-top: var(--e-3); color: var(--tinta-2); max-width: 46ch; }
.contato-faixa__acoes { display: grid; gap: var(--e-4); align-self: end; min-width: 0; }
.contato-faixa__botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.contato-faixa__botoes .botao { min-height: 52px; padding-inline: 28px; }
.contato-faixa__endereco { font-size: var(--t-small); line-height: 1.6; color: var(--tinta-2); }
.contato-faixa__endereco .link { color: var(--marinho); font-weight: 600; }
@media (max-width: 479px) {
  .contato-faixa__botoes .botao { flex: 1 1 100%; }
}
@media (min-width: 1024px) {
  .contato-faixa__texto { grid-column: 1 / 7; }
  .contato-faixa__acoes { grid-column: 7 / 13; justify-items: end; text-align: right; }
  .contato-faixa__botoes { justify-content: flex-end; }
}