/* ==========================================================================
   PÁGINA INTERNA — Fase 03.1 · /avaliacao-de-imoveis
   Carrega DEPOIS de home.css e só acrescenta o que a homepage não tem.
   Nenhum token, cor, fonte, botão ou espaçamento novo: os componentes daqui
   são montados com o mesmo vocabulário — filete dourado, índice em mono,
   linha de 1px, medalhão. A página tem de parecer o mesmo site.
   ========================================================================== */

/* --- HERO da página interna — Fase 03.2 ------------------------------------
   Composição própria, não a da Home. Coluna de texto sobre navy sólido e a
   fotografia homologada em MOLDURA CONTIDA à direita, dentro da calha. Sem
   sangria, sem dissolução: é o que distingue a página de serviço da home, sem
   sair do sistema — a moldura usa o mesmo filete de 1px e o mesmo dourado. -- */
.hero--pg{ padding-bottom:34px; }
.hero--pg .hero__grid{ display:grid; gap:0; }
.hero--pg .hero__txt{ padding:30px 0 0; }
.hero--pg .hero__apoio{ max-width:48ch; }

.pgfoto{
  position:relative; margin:26px 0 0; order:3;
  border:1px solid var(--on-navy-line);
}
/* marca de canto: mesma assinatura gráfica da cota dourada do hero da Home */
.pgfoto::before{
  content:""; position:absolute; left:-1px; top:-1px; z-index:2;
  width:46px; height:2px; background:var(--gold);
}
.pgfoto img{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; object-position:52% 50%;
}
@media (min-width:1000px){
  .hero--pg{ min-height:auto; padding:0 0 46px; display:block; }
  .hero--pg .hero__grid{
    grid-template-columns:repeat(12,1fr); gap:0 40px; align-items:center;
    padding-top:56px;
  }
  .hero--pg .hero__txt{ grid-column:1 / span 6; padding:0; }
  .pgfoto{ grid-column:7 / span 6; margin:0; order:0; }
  .pgfoto img{ aspect-ratio:4/3; }
  .pgfoto::before{ width:64px; }
}
@media (min-width:1240px){
  .hero--pg .hero__txt{ grid-column:1 / span 6; }
  .pgfoto{ grid-column:7 / span 6; }
}

/* --- 02 · QUANDO UMA AVALIAÇÃO PODE AJUDAR ------------------------------
   Quatro situações. Cartão sóbrio com filete no topo, ícone da mesma família
   da seção 02 da home — é ali que o cliente se reconhece. ---------------- */
.sit{ display:grid; gap:14px; margin-top:26px; }
@media (min-width:640px){ .sit{ grid-template-columns:1fr 1fr; gap:16px; } }
@media (min-width:1100px){ .sit{ grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; } }
.sit__c{
  background:var(--white); border:1px solid var(--line); border-top:2px solid var(--gold);
  padding:22px 20px 24px;
}
.sit__i{ display:block; color:var(--gold); }
.sit__i svg{ display:block; width:34px; height:34px; }
.sit__t{ margin-top:16px; font-size:17px; line-height:1.26; color:var(--ink); }
.sit__d{ margin-top:8px; font-size:14px; line-height:1.55; color:var(--gray); }
@media (min-width:1100px){
  .sit__c{ padding:24px 22px 26px; }
  .sit__t{ font-size:17.5px; }
}

/* --- 04 · O QUE É ANALISADO ---------------------------------------------
   Coluna de texto à esquerda, itens em lista de linhas à direita. Mesma
   proporção da seção de Serviços da home. -------------------------------- */
.an__grid{ display:grid; gap:28px; }
@media (min-width:1100px){
  .an__grid{ grid-template-columns:minmax(276px,.92fr) minmax(0,2.6fr); gap:0 44px; align-items:start; }
  .an__h{ position:sticky; top:118px; }
}
.an{ border-top:1px solid var(--line); }
.an__i{ padding:20px 0; border-bottom:1px solid var(--line); }
.an__i h3{
  position:relative; padding-left:19px;
  font-family:var(--ff-sans); font-size:16px; font-weight:700; letter-spacing:0; color:var(--ink);
}
.an__i h3::before{
  content:""; position:absolute; left:0; top:11px; width:10px; height:1px; background:var(--gold);
}
.an__i p{ margin-top:7px; padding-left:19px; font-size:14.5px; line-height:1.6; color:var(--gray); max-width:56ch; }
@media (min-width:1100px){
  .an__i{ padding:22px 0; }
  .an__i h3{ font-size:16.5px; }
}

/* --- 05 · O QUE VOCÊ RECEBE ---------------------------------------------
   Três colunas com índice em mono, sem cartão: é um fecho de leitura, não
   uma grade de produtos. ------------------------------------------------- */
.rec{ display:grid; gap:22px; margin-top:26px; }
@media (min-width:820px){ .rec{ grid-template-columns:repeat(3,1fr); gap:34px; margin-top:34px; } }
/* D-014: o dourado não vira texto pequeno sobre fundo claro — dá 2,61:1 e
   reprova na AA. O índice muda de cor e o dourado permanece como filete. */
.rec__c{ position:relative; padding-top:18px; border-top:1px solid var(--line); }
.rec__c::before{
  content:""; position:absolute; left:0; top:-1px; width:26px; height:1px; background:var(--gold);
}
.rec__n{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.15em; color:var(--gray);
}
.rec__t{ margin-top:12px; font-size:17px; line-height:1.28; color:var(--ink); }
.rec__d{ margin-top:8px; font-size:14.5px; line-height:1.6; color:var(--gray); }

/* --- 07 · FAQ em acordeão ------------------------------------------------
   <details>/<summary>: abre por teclado sem uma linha de JS, funciona com JS
   desligado e é anunciado como botão expansível por leitor de tela. ------ */
.faq__grid{ display:grid; gap:26px; }
@media (min-width:1100px){
  .faq__grid{ grid-template-columns:minmax(276px,.92fr) minmax(0,2.6fr); gap:0 44px; align-items:start; }
  .faq__h{ position:sticky; top:118px; }
}
.faq{ border-top:1px solid var(--line); }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__p{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:18px 0; min-height:44px; cursor:pointer;
  font-family:var(--ff-sans); font-size:16px; font-weight:700; line-height:1.4; color:var(--ink);
  list-style:none;
}
.faq__p::-webkit-details-marker{ display:none; }
.faq__p:hover{ color:var(--navy); }
.faq__i summary:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }
.faq__s{
  flex:0 0 auto; width:16px; height:16px; margin-top:3px; color:var(--gold);
  transition:transform var(--t);
}
.faq__i[open] .faq__s{ transform:rotate(180deg); }
.faq__r{ padding:0 0 20px; }
.faq__r p{ font-size:14.5px; line-height:1.65; color:var(--gray); max-width:62ch; }
@media (min-width:1100px){ .faq__p{ font-size:16.5px; } .faq__r p{ font-size:15px; } }
@media (prefers-reduced-motion: reduce){ .faq__s{ transition:none; } }

/* --- 06 · credencial sem a lista de frentes -----------------------------
   Nesta página a frente já é o assunto da página inteira: repetir as três
   viraria ruído. O painel fica só com quem assina. ----------------------- */
.cnf__cred-r{ margin-bottom:2px; }