/* ==========================================================================
   NUNES DARK CLARITY — Fase 02.7
   Arquitetura A+ CLAREZA PREMIUM intacta (D-020, D-024, D-041): seis blocos,
   mesma ordem, mesma jornada, mesmo sistema de CTA progressivo.

   O que muda é a distribuição de claro e escuro (D-042):
     cabeçalho navy · hero navy · MIOLO CLARO · confiança navy · rodapé navy
   O escuro é moldura, não ambiente: os blocos 02, 03 e 04 não escurecem.

   Dourado (#C29A56) só como assinatura: filete, índice, microacento.
   Nenhuma transparência nova de dourado — apenas --gold, --gold-line e
   --gold-wash, de tokens.css (D-014, D-037).
   ========================================================================== */

.mono{
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray);
}
.mini{
  font-family:var(--ff-mono); font-size:10px; font-weight:400; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gray);
}

/* ============ CABEÇALHO — navy ============
   A marca entra pelo vetor flat técnico BRANCO, que é #FFFFFF puro sem fundo:
   assenta no navy sem nenhuma caixa. Nenhum filtro, recorte, recoloração ou
   alteração de proporção (D-004, D-016, D-035). */
.hd{
  position:sticky; top:0; z-index:70;
  background:var(--navy-marca);
  --calha: max(var(--pad), calc((100vw - var(--maxw))/2 + var(--pad)));
}
.hd::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,
    var(--on-navy-line) 0 var(--calha),
    var(--gold)         var(--calha) calc(var(--calha) + 92px),
    var(--on-navy-line) calc(var(--calha) + 92px));
  transition:opacity var(--t);
}
/* a faixa do cabeçalho e o hero têm tons vizinhos mas diferentes; esta camada
   dissolve a emenda entre os dois, para não sobrar um degrau horizontal. */
.hd::before{
  content:""; position:absolute; left:0; right:0; top:100%; height:26px; z-index:-1;
  background:linear-gradient(180deg, var(--navy-marca), rgba(1,17,37,0));
  pointer-events:none; transition:opacity var(--t);
}
/* Defeito objetivo corrigido na 03.3 V2: esse dissolvido existe para emendar a
   faixa da marca ao navy do hero. Quando o hero sai da tela ele continuava
   ligado e deixava uma mancha escura de 26px sobre a seção clara logo abaixo
   do cabeçalho. Some junto com o hero. */
.cta-hero-fora .hd::before{ opacity:0; }
.hd__in{ display:flex; align-items:center; gap:10px; min-height:64px; }
@media (min-width:900px){ .hd__in{ gap:18px; min-height:90px; } }
/* MARCA — assinatura premium homologada, Fase 02.11A.
   O ativo é PNG opaco, tinta ocupando 82,4% da largura e 44,0% da altura do
   canvas. Para a tinta ficar com a presença certa na faixa, a IMAGEM é
   renderizada alta — a altura visível da marca é 44% disso. Nenhum recorte,
   filtro, transform de cor ou novo canvas: só altura e alinhamento óptico,
   exatamente como D-049 já autorizava. */
.hd__marca{ flex:0 0 auto; display:block; }
.hd__marca img{ height:58px; width:auto; display:block; margin:-2px 0 0; }
@media (min-width:900px){ .hd__marca img{ height:88px; margin-top:-3px; } }

.hd__nav{ display:none; margin-left:auto; align-items:center; gap:32px; }
@media (min-width:900px){ .hd__nav{ display:flex; } }
.hd__nav a{
  position:relative; padding:8px 0; font-size:14px; color:var(--on-navy-soft);
  transition:color var(--t);
}
.hd__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right var(--t);
}
.hd__nav a:hover{ color:var(--white); } .hd__nav a:hover::after{ right:0; }

/* CTA do cabeçalho — Fase 02.11A.
   A referência aprovada traz o botão dourado de WhatsApp SEMPRE visível no
   topo, à direita. Ele não disputa com o CTA do hero: são o mesmo destino e
   o hero continua com o único CTA dominante do seu contexto (D-022). No
   celular ele sai, para o cabeçalho não ficar poluído — lá o CTA do hero
   aparece imediatamente abaixo e o persistente assume depois. */
.hd__cta{
  display:inline-flex; align-items:center; margin-left:auto;
  min-height:40px; padding:0 14px; font-size:12.5px; font-weight:700;
  white-space:nowrap;
}
.hd__cta{ word-spacing:normal; }
/* o rótulo completo já cabe em 380px: a referência mostra o botão do cabeçalho
   escrito por extenso também no celular. Abaixo disso entra o rótulo curto —
   nunca os dois. */
.hd__cta-l{ display:none; }
.hd__cta-s{ display:inline; }
@media (min-width:380px){
  .hd__cta-l{ display:inline; }
  .hd__cta-s{ display:none; }
}
@media (min-width:900px){
  .hd__cta{ margin-left:14px; min-height:44px; padding:0 20px; font-size:14px; }
}

.hd__btn{
  margin-left:auto; display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:0 2px 0 14px;
  font-size:12.5px; font-weight:400; letter-spacing:.04em; color:var(--on-navy-soft);
}
.hd__btn:hover{ color:var(--white); }
@media (min-width:900px){ .hd__btn{ display:none; } }
.hd__btn i{ display:block; width:20px; height:10px; position:relative; }
.hd__btn i::before,.hd__btn i::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:var(--white);
  transition:transform var(--t);
}
.hd__btn i::before{ top:0; } .hd__btn i::after{ bottom:0; }
.hd__btn[aria-expanded="true"] i::before{ transform:translateY(4.5px) rotate(45deg); }
.hd__btn[aria-expanded="true"] i::after{ transform:translateY(-4.5px) rotate(-45deg); }

/* painel sobrepõe, não empurra — não trava a rolagem (defeito QA-03) */
.hd__panel{
  position:absolute; left:0; right:0; top:100%;
  background:var(--navy); border-top:1px solid var(--on-navy-line);
  box-shadow:0 18px 34px rgba(13,27,42,.34);
}
@media (min-width:900px){ .hd__panel{ display:none; } }
.hd__panel ul{ padding:6px 0 14px; }
.hd__panel a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:52px; font-size:16px; color:var(--on-navy);
  border-bottom:1px solid var(--on-navy-line);
}
.hd__panel li:last-child a{ border-bottom:0; color:var(--white); font-weight:700; }
.hd__panel a span{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.14em; color:var(--on-navy-soft); }

/* ============ SLOT DE IMAGEM ============
   Placeholder sem moldura e sem cantoneiras: a imagem pertence à composição,
   não a um cartão. Rótulo e código são interface por cima, nunca dentro da
   imagem (D-029). */
.slot{ position:relative; overflow:hidden; }
.slot .ph{ border-radius:0; }
.slot .ph::after{ display:none; }
.slot__rot{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:11px 14px;
  font-family:var(--ff-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
}
@media (max-width:519px){
  .slot__rot{ flex-direction:column; align-items:flex-start; gap:3px; }
}
@media (min-width:768px){ .slot__rot{ font-size:9.5px; padding:13px 16px; } }
.slot__rot b{ font-weight:400; }
/* D-014: sobre navy o dourado alcança contraste e serve como texto; sobre
   superfície clara não alcança, então o TEXTO muda de cor e o dourado
   permanece só como filete. O dourado oficial nunca se altera. */
.slot--navy .slot__rot{
  color:var(--on-navy-soft);
  background:linear-gradient(0deg, rgba(13,27,42,.86), rgba(13,27,42,0));
}
.slot--navy .slot__rot b{ color:var(--gold); }
.slot--claro .slot__rot{ color:var(--gray); }
.slot--claro .slot__rot b{ color:var(--ink); }
/* filete dourado de assinatura no pé do slot claro */
.slot--claro::after{
  content:""; position:absolute; left:0; bottom:0; width:56px; height:2px;
  background:var(--gold); z-index:3;
}

/* ============ 01 · HERO — navy, composição única ============
   Sem cartão isolado, sem divisão 50/50: o slot de M1 sangra até a borda
   direita e dissolve no navy por gradiente. Texto e imagem são a mesma peça. */
/* No celular a foto está ANTES no HTML (para o navegador começar a baixá-la
   cedo) mas precisa aparecer DEPOIS do CTA: o briefing manda CTA antes da
   imagem. `order` resolve sem duplicar marcação. */
.hero{
  position:relative; background:var(--navy); color:var(--on-navy); overflow:hidden;
  display:flex; flex-direction:column;
}
.hero__grid{ order:1; }
.hero__difs{ order:2; }
.hero__grid{ position:relative; z-index:2; display:grid; }
/* Fase 03.3 V2, item 3 — COMPACTAÇÃO DO HERO MOBILE.
   Meta geométrica do briefing em 390×844: CTA até ~340px e início visível da
   M1 até ~480px. A 03.2 punha a fotografia em 603px, com uma faixa navy longa
   antes dela. Os cortes abaixo são de ESPAÇAMENTO e de escala da microcópia —
   nenhum texto foi removido, nenhuma decisão de copy foi tocada. */
.hero__txt{ padding:14px 0 10px; }
/* a identificação cabe em uma linha: em duas ela sozinha empurrava a foto
   17px para baixo */
@media (max-width:767px){
  .hero .eyebrow{ font-size:9px; letter-spacing:.12em; gap:9px; }
  .hero .eyebrow::before{ width:18px; }
}
.hero .eyebrow{ color:var(--on-navy-soft); }
/* Escala da referência desktop: lá a primeira linha da headline ocupa ~36% da
   largura da tela. A 03.2 parava em 52px e ocupava 28%. O teto sobe para 62px
   e a rampa é 4,6vw, para a linha continuar cabendo na coluna a partir de
   1000px, onde o texto divide a tela com a fotografia. */
.hero h1{
  font-size:clamp(28px,4.6vw,62px); line-height:1.06; margin-top:11px;
  max-width:19ch; color:var(--white);
}
@media (max-width:767px){ .hero h1{ font-size:clamp(28px,6.6vw,34px); } }
/* headline em duas cores — o miolo em dourado, como na referência aprovada.
   O dourado aqui é título grande, não texto pequeno: 4,1:1 sobre o navy,
   acima do 3:1 exigido pela AA para texto grande. */
.h1__ouro{ color:var(--gold); }

.hero__apoio{
  margin-top:11px; font-size:15px; line-height:1.48;
  color:var(--on-navy-soft); max-width:46ch;
}
@media (min-width:768px){ .hero__apoio{ font-size:17px; margin-top:20px; } }
.hero__acoes{ margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
@media (min-width:768px){ .hero__acoes{ margin-top:24px; } }

/* CTA principal: dourado sólido sobre navy — o ponto mais forte da tela */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 28px;
  background:var(--gold); color:var(--navy);
  font-size:15px; font-weight:700; word-spacing:.08em;
  border:1px solid var(--gold); border-radius:var(--r);
  transition:box-shadow var(--t), transform var(--t);
}
.cta:hover{ box-shadow:inset 0 0 0 1px var(--navy), 0 8px 26px rgba(13,27,42,.34); }
/* "CTA dourado amplo", item 2 do briefing V2 — só a caixa cresce; o rótulo
   congelado "Quero avaliar meu imóvel" não foi tocado. */
@media (min-width:1000px){ .hero .cta{ min-height:60px; padding:0 36px; font-size:16px; } }
.cta:active{ transform:translateY(1px); }

/* DIFERENCIAIS — Fase 02.11A.
   Geometria da referência aprovada: filete acima, três itens em linha, cada um
   com ícone dourado de traço e duas linhas de texto, separados por filete
   vertical. Os TEXTOS são os do copy master, não os da referência — a
   hierarquia do pacote manda marca > copy > geometria. Não são links. */
/* Fase 03.3 V2, item 3 — no CELULAR os diferenciais passam a TRÊS COLUNAS
   compactas, como na referência mobile, no lugar dos três cartões empilhados.
   Sozinho, este bloco devolve ~100px de altura acima da fotografia: era ele
   que empurrava a M1 para além dos 600px. Os textos são os mesmos. */
.difs{
  margin-top:13px; padding-top:11px;
  border-top:1px solid var(--on-navy-line);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
}
.hero__difs{ padding-bottom:15px; }
.difs li{ display:flex; align-items:flex-start; gap:6px; padding:0 6px; }
.difs li:first-child{ padding-left:0; }
.difs li:last-child{ padding-right:0; }
.difs li + li{ border-left:1px solid var(--on-navy-line); }
.difs__i{ flex:0 0 auto; color:var(--gold); }
.difs__i svg{ display:block; width:17px; height:17px; }
.difs__t{ font-size:10px; line-height:1.32; color:var(--on-navy); }
/* no celular a coluna tem ~90px: a quebra sugerida pelo dado desperdiça linha,
   o texto flui melhor sozinho. Ela volta a valer a partir de 430px. */
.difs__q{ display:inline; }
@media (min-width:430px){
  .difs__t{ font-size:11.5px; } .difs__i svg{ width:19px; height:19px; }
  .difs__q{ display:block; }
}
@media (min-width:768px){ .difs__q{ display:inline; } }
@media (min-width:768px){
  .difs{ margin-top:30px; padding-top:22px; padding-bottom:56px; }
  .difs li{ padding:2px 16px 2px 18px; gap:9px; }
  .difs li:first-child{ padding-left:0; }
  .difs__i svg{ width:20px; height:20px; }
  .difs__t{ font-size:12.5px; }
}
@media (min-width:1240px){
  .difs li{ padding:2px 18px 2px 22px; }
  .difs__i svg{ width:22px; height:22px; }
  .difs__t{ font-size:13.5px; }
}

/* FRASE EMOCIONAL — Fase 03.2, item 3 do briefing canônico.
   Lora itálico: é a única família do sistema tipográfico homologado com desenho
   próximo do manuscrito da referência. Nenhuma fonte nova entrou (D-010/D-023).
   A sombra longa garante contraste sobre a fotografia, cuja luminância muda
   conforme o recorte e a largura. */
.hero__frase{
  position:absolute; right:var(--pad); bottom:14px; z-index:4;
  width:max-content; max-width:12ch; text-align:right;
  font-family:var(--ff-serif); font-style:italic; font-size:16px; line-height:1.3;
  color:var(--white);
  text-shadow:0 2px 16px rgba(13,27,42,.95), 0 1px 4px rgba(13,27,42,.9);
}
.hero__frase::after{
  content:""; position:absolute; right:0; bottom:-10px; width:44px; height:1px;
  background:var(--gold);
}
/* Defeito objetivo encontrado na 03.3 V2 pela medição de contraste POR PIXEL:
   a sombra longa bastava para o olho, mas sob os pontos mais claros da
   fotografia o texto branco media 1,3:1 — reprovado pela AA. Entra uma vela
   escura desfocada atrás da frase. Ela não é um cartão: é a mesma coisa que a
   referência sugere com o escurecimento da foto naquele canto, e some nas
   bordas. A frase, o itálico e a posição não mudaram. */
.hero__frase::before{
  content:""; position:absolute; inset:-18px -22px -20px -30px; z-index:-1;
  background:rgba(13,27,42,.78); filter:blur(15px); border-radius:50%;
  pointer-events:none;
}
@media (min-width:768px){ .hero__frase{ font-size:19px; bottom:22px; right:38px; } }
@media (min-width:1240px){ .hero__frase{ font-size:21px; bottom:28px; right:54px; } }

/* --- M1: fotografia aprovada --- */
/* mobile: a foto vem DEPOIS do texto e do CTA (regra do briefing), sangra de
   borda a borda e dissolve no navy pelo topo, sem aresta. */
.hero__media{
  position:relative; order:3; margin-top:10px;
  aspect-ratio:16/11; overflow:hidden;
}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:58% 46%;
  display:block;
}
/* véu: no mobile desce do topo; no desktop vem da esquerda */
.hero__veu{
  content:""; position:absolute; inset:0 0 auto 0; height:34%; z-index:2;
  background:linear-gradient(180deg, var(--navy) 2%, rgba(13,27,42,.34) 62%, rgba(13,27,42,0));
  pointer-events:none;
}

@media (min-width:1000px){
  /* Fase 02.11A — geometria da referência aprovada: coluna navy à esquerda,
     fotografia à direita avançando para o centro, sem aresta entre as duas. */
  /* coluna: o grid de texto e a faixa de diferenciais empilham e o conjunto
     fica centrado verticalmente; a fotografia continua absoluta por cima. */
  .hero{ min-height:min(74vh,640px); display:flex; flex-direction:column; justify-content:center; }
  .hero__difs{
    position:relative; z-index:3; padding-bottom:0;
    display:grid; grid-template-columns:repeat(12,1fr); gap:0 40px;
  }
  .hero__difs .difs{ grid-column:1 / span 7; margin-top:0; }
  .hero__grid{
    position:static; display:grid; grid-template-columns:repeat(12,1fr); gap:0 40px;
    align-items:center; width:100%;
  }
  .hero__txt{ grid-column:1 / span 6; padding:56px 0 0; position:relative; z-index:3; }
  /* a foto ancora no HERO, não na calha: chega de fato à borda da viewport e
     passa por baixo do cabeçalho, que é o que a referência mostra */
  .hero__media{
    position:absolute; inset:0 0 0 auto; order:0;
    margin:0; width:58vw; aspect-ratio:auto; z-index:1;
  }
  .hero__media img{ object-position:60% 42%; }
  .hero__veu{
    inset:0 auto 0 0; width:46%; height:100%;
    background:linear-gradient(90deg,
      var(--navy) 0 13%, rgba(13,27,42,.84) 40%, rgba(13,27,42,.28) 74%, rgba(13,27,42,0));
  }
  /* a aresta superior também dissolve, para o cabeçalho assentar na foto */
  .hero::before{
    content:""; position:absolute; inset:0 0 auto 0; height:92px; z-index:2;
    background:linear-gradient(180deg, rgba(13,27,42,.62), rgba(13,27,42,0));
    pointer-events:none;
  }
}
@media (min-width:1240px){ .hero__txt{ grid-column:1 / span 7; } .hero__difs .difs{ grid-column:1 / span 7; } }

/* ============ HEADER + HERO: UMA COMPOSIÇÃO SÓ — Fase 03.3 V2, item 2 ============
   A referência desktop não tem faixa de cabeçalho: a fotografia chega ao topo
   da tela e o navy à esquerda sustenta a marca e a navegação. A 03.2 pintava a
   faixa inteira de #011125 e só então começava o hero — daí a leitura de "duas
   peças empilhadas".

   O que muda, e só no desktop:
   · o fundo do cabeçalho vira um gradiente HORIZONTAL — #011125 sólido sobre a
     marca e a navegação, dissolvendo até transparente antes da fotografia;
   · o filete inferior e o dissolvido vertical saem enquanto o hero está na
     tela: são eles que desenhavam a borda da faixa;
   · quando o hero sai (a classe `cta-hero-fora`, que já existe), o cabeçalho
     volta a ser sólido — sobre o miolo claro ele PRECISA ser opaco.
   A marca continua sobre #011125 chapado em qualquer estado: o retângulo do
   PNG opaco nunca reaparece. */
@media (min-width:900px){
  .hd{
    background:linear-gradient(90deg,
      var(--navy-marca) 0 34%,
      rgba(1,17,37,.97)  52%,
      rgba(1,17,37,.72)  68%,
      rgba(1,17,37,0)    88%);
  }
  .hd::after{ opacity:0; }
  /* O dissolvido vertical segue o MESMO perfil horizontal do fundo do
     cabeçalho. Cortá-lo em 52% deixava uma aresta vertical reta — invisível na
     Home, onde a fotografia cobre aquele ponto, mas visível na página de
     serviço, cujo hero é navy chapado. Com a máscara ele desaparece junto com
     o fundo, sem aresta nenhuma, e continua sem sujar o topo da fotografia. */
  .hd::before{
    -webkit-mask-image:linear-gradient(90deg, #000 0 34%, rgba(0,0,0,.55) 58%, transparent 84%);
            mask-image:linear-gradient(90deg, #000 0 34%, rgba(0,0,0,.55) 58%, transparent 84%);
  }
  /* hero fora da tela: cabeçalho opaco outra vez, com o filete de volta */
  .cta-hero-fora .hd{ background:var(--navy-marca); }
  .cta-hero-fora .hd::after{ opacity:1; }
}
@media (min-width:1000px){
  /* a fotografia sobe até o topo da tela: o hero recua a própria altura do
     cabeçalho e devolve o espaço no texto, para não crescer no total. */
  .hero{ margin-top:-90px; padding-top:90px; }
  /* véu do topo mais firme, agora que a navegação assenta sobre a foto */
  .hero::before{ height:118px; background:linear-gradient(180deg, rgba(13,27,42,.72), rgba(13,27,42,0)); }
  .hero__txt{ padding-top:34px; }
}

/* ============ MIOLO CLARO ============ */
.sec__h--filete{ position:relative; padding-left:20px; }
@media (min-width:768px){ .sec__h--filete{ padding-left:26px; } }
.sec__h--filete::before{
  content:""; position:absolute; left:0; top:4px; bottom:6px; width:2px; background:var(--line);
}
.sec__h--filete::after{
  content:""; position:absolute; left:0; top:4px; width:2px; height:34px; background:var(--gold);
}
.sec__h--filete .eyebrow::before{ display:none; }

/* ============ SERVIÇOS — três cards, Fase 02.11A ============
   Geometria da referência aprovada: coluna de texto à esquerda, três cards
   brancos à direita no desktop, empilhados no celular. Imagem no topo, ícone
   dourado em medalhão avançando sobre a imagem, título curto, descrição curta,
   "Saiba mais". Sem layout editorial alternado, sem parágrafo longo.
   As imagens são PLACEHOLDER: M4, M5 e M6 continuam CANDIDATAS (D-031), e
   nenhuma delas é apresentada como registro de trabalho realizado (D-028). */
.srv__grid{ display:grid; gap:28px; }
@media (min-width:1100px){
  /* A referência dá à coluna de texto ~30% da faixa útil, e é isso que permite
     o título fechar em DUAS linhas — "Soluções em Engenharia / para o seu
     imóvel". Com os 26% da 03.2 ele quebrava em três e perdia a cara do
     modelo aprovado. */
  .srv__grid{ grid-template-columns:minmax(300px,1.2fr) minmax(0,2.25fr); gap:0 40px; align-items:start; }
  .srv__h{ position:sticky; top:118px; }
  /* O corpo da Lora é mais largo que o serif do mockup: no mesmo tamanho a
     linha "Soluções em Engenharia" pede 434px onde a referência usa ~330. Como
     não se acrescenta família tipográfica para imitar o mockup (item 9, e
     D-010/D-023), quem cede é o CORPO — o que a referência governa aqui é a
     FORMA: título em duas linhas ao lado dos três cards. */
  .srv__h h2{ font-size:clamp(26px,2.2vw,30px); max-width:none; line-height:1.16; }
}
/* Fase 03.3 V2, item 6 — CARDS MAIS BAIXOS E ESCANEÁVEIS.
   No celular o visitante precisa perceber que existem TRÊS serviços sem uma
   rolagem longa; no desktop a referência mostra cards claramente mais baixos
   que os da 03.2. A faixa da imagem encurta, o miolo aperta, e nem o texto nem
   as imagens homologadas mudam. */
.srv{ display:grid; gap:13px; }
/* o teto de 17ch de `.sec__h h2` serve às seções de coluna larga; aqui ele
   forçava três linhas onde a referência fecha em duas. */
.srv__h h2{ max-width:none; }
@media (min-width:700px) and (max-width:1099px){ .srv{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .srv{ grid-template-columns:repeat(3,1fr); gap:20px; } }

.srv__c{
  background:var(--white); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.srv__media{ position:relative; aspect-ratio:16/6.2; overflow:hidden; background:var(--wash); }
@media (min-width:700px) and (max-width:1099px){ .srv__media{ aspect-ratio:16/8.5; } }
@media (min-width:1100px){ .srv__media{ aspect-ratio:16/7.5; } }
.srv__media .ph{ height:100%; }
/* Fase 02.12 — M4, M5 e M6 homologadas. `cover` com o quadro deslocado 2% para
   dentro: as três chegaram com uma faixa branca de geração na aresta esquerda
   (4 px em M4, até 25 px em M5 e M6) e o enquadramento a deixa fora, sem tocar
   no arquivo. Proporção preservada, sem filtro. */
.srv__media img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:52% 50%;
}
/* Fase 02.11C — o rótulo "IMAGEM CONCEITUAL IA · EM PRODUÇÃO" saiu da tela:
   é linguagem de desenvolvimento e o gate a trata como hard fail. O placeholder
   fica neutro, com o mesmo cinza do sistema, e o código do mestre permanece no
   data-attribute para a bateria de QA conferir o inventário. */
/* medalhão do ícone: avança sobre a borda inferior da imagem, como na
   referência. Fundo branco, filete claro, ícone em dourado. */
.srv__ico{
  position:absolute; left:16px; top:-23px; z-index:3;
  width:46px; height:46px; border-radius:50%;
  background:var(--white); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--gold);
}
.srv__ico svg{ display:block; width:22px; height:22px; }
.srv__b{ position:relative; padding:30px 16px 10px; display:flex; flex-direction:column; flex:1; }
.srv__t{ font-size:17px; line-height:1.22; color:var(--ink); }
.srv__d{ margin-top:6px; font-size:13px; line-height:1.45; color:var(--gray); }
.srv__l{ margin-top:auto; padding-top:8px; align-self:flex-start; }
/* Avaliação é o serviço-âncora: ganha o filete dourado no topo. Os outros dois
   continuam inteiramente legíveis — a prioridade é de ênfase, não de exclusão. */
/* O filete dourado do serviço-âncora entra por `box-shadow` interno, não por
   borda: como borda ele somava 2px à altura do primeiro cartão e desalinhava
   os três títulos, que a referência mostra na mesma linha. */
.srv__c--d{ box-shadow:inset 0 2px 0 var(--gold); }
@media (min-width:1100px){
  /* "Avaliação de Imóveis" tem de caber em UMA linha, como na referência:
     os três títulos alinham e o cartão fica escaneável. */
  /* dois dos três títulos cabem em uma linha e "Perícias de Engenharia" não:
     a caixa reserva as duas, e as descrições e os "Saiba mais" dos três cards
     ficam na mesma altura, como na referência. */
  .srv__t{ font-size:16.5px; min-height:2.44em; }
  .srv__b{ padding:34px 17px 14px; }
  .srv__d{ font-size:13.5px; }
}

/* ============ 02 · O QUE VOCÊ PRECISA RESOLVER? ============
   Linhas leves com índice dourado e microícone técnico. Sem cartão, sem
   miniatura: a seção existe para ser entendida em segundos.
   Desktop 2 × 3 — encurta a página sem perder clareza. */
@media (max-width:767px){
  #necessidades{ padding-top:34px; }
  #solucoes{ padding:34px 0 40px; }
}

.lista{ margin-top:26px; border-top:1px solid var(--line); }
@media (min-width:900px){
  .lista{
    margin-top:38px; display:grid; grid-template-columns:1fr 1fr;
    column-gap:44px; border-top:0;
  }
  .lista > :nth-child(-n+2){ border-top:1px solid var(--line); }
}
/* ÍNDICE VISUAL — Fase 02.7.2.
   A descrição saiu: repetia o título. Sobram três elementos por caminho —
   índice, ícone e título com a tradução técnica embaixo. O ícone cresce de
   28 para 44px e o título de 17,5 para 21px: a seção passa a ser varrida,
   não lida. */
.item{
  position:relative; display:grid;
  grid-template-columns:auto auto 1fr auto; align-items:center; gap:0 14px;
  width:100%; text-align:left;
  padding:18px 2px; border-bottom:1px solid var(--line);
  transition:padding-left var(--t), background var(--t);
}
@media (min-width:768px){ .item{ padding:22px 2px; gap:0 18px; } }
@media (min-width:900px){ .item:hover{ padding-left:12px; } }
.item:hover{ background:var(--gold-wash); }
.item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--gold); transform:scaleY(0); transform-origin:top;
  transition:transform var(--t);
}
.item:hover::before{ transform:scaleY(1); }

.item__n{
  display:inline-grid; place-items:center; min-width:32px; height:23px; padding:0 7px;
  background:var(--gold); color:var(--navy);
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em;
}
.item__ico{ display:block; width:38px; height:38px; color:var(--navy); flex:0 0 auto; }
.item__ico svg{ width:38px; height:38px; }
@media (min-width:768px){
  .item__ico,.item__ico svg{ width:44px; height:44px; }
}
.item__b{ min-width:0; }
.item__t{ display:block; font-size:18px; font-weight:700; color:var(--navy); line-height:1.28; letter-spacing:-.008em; }
@media (min-width:768px){ .item__t{ font-size:21px; } }
.item__tec{
  display:block; margin-top:6px;
  font-family:var(--ff-mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray);
}
.item__a{
  align-self:center; flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--line); color:var(--navy);
  transition:background var(--t), border-color var(--t), color var(--t);
}
.item__a svg{ width:14px; height:14px; }
.item:hover .item__a{ background:var(--navy); border-color:var(--navy); color:var(--white); }

/* ---- painel de Avaliação Imobiliária (dentro do bloco 02) ---- */
.painel{
  margin-top:20px; border:1px solid var(--line); border-top:2px solid var(--gold);
  border-radius:var(--r); background:var(--white);
}
@media (min-width:768px){ .painel{ margin-top:26px; } }
.painel[hidden]{ display:none; }
.painel__topo{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
@media (min-width:768px){ .painel__topo{ padding:16px 26px; } }
.painel__fechar{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 4px 0 12px;
  font-size:13px; color:var(--gray);
}
.painel__fechar:hover{ color:var(--navy); }
.painel__fechar svg{ width:13px; height:13px; }
.painel__corpo{ display:grid; gap:20px; padding:18px 16px 22px; }
@media (min-width:768px){ .painel__corpo{ padding:26px 26px 30px; gap:26px; } }
@media (min-width:900px){
  .painel__corpo{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; }
}
.aval__t{ font-size:clamp(20px,3.2vw,28px); line-height:1.18; }
.aval__t:focus,.aval__t:focus-visible{ outline:none; }
.aval__d{ margin-top:11px; font-size:14.5px; line-height:1.6; color:var(--ink); max-width:48ch; }
@media (min-width:768px){ .aval__d{ font-size:15px; } }
.aval__intro .mini{ display:block; margin-top:18px; }
@media (min-width:768px){ .aval__intro .mini{ margin-top:24px; } }
.aval__fin{ margin-top:10px; display:grid; gap:6px; }
@media (min-width:520px){ .aval__fin{ grid-template-columns:1fr 1fr; gap:7px 22px; } }
.aval__fin li{
  position:relative; padding-left:16px; font-size:14px; line-height:1.45; color:var(--ink);
}
.aval__fin li::before{
  content:""; position:absolute; left:0; top:9px; width:8px; height:1px; background:var(--gold);
}
.passos{ margin-top:10px; }
.passos li{
  display:grid; grid-template-columns:auto 1fr; gap:0 13px;
  padding:11px 0; border-top:1px solid var(--line-soft);
}
.passos li:first-child{ border-top:0; padding-top:2px; }
.passos__n{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; color:var(--gray); padding-top:2px;
}
.passos__t{ display:block; font-size:14.5px; font-weight:700; color:var(--navy); line-height:1.35; }
.aval__cta{ margin-top:18px; }

/* ---- orientador (dentro do bloco 02) ---- */
.ori{
  margin-top:20px; border:1px solid var(--line); border-top:2px solid var(--gold);
  border-radius:var(--r); background:var(--white);
}
@media (min-width:768px){ .ori{ margin-top:26px; } }
.ori[hidden]{ display:none; }
.ori__topo{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
@media (min-width:768px){ .ori__topo{ padding:16px 26px; } }
.ori__fechar{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 4px 0 12px;
  font-size:13px; color:var(--gray);
}
.ori__fechar:hover{ color:var(--navy); }
.ori__fechar svg{ width:13px; height:13px; }
.ori__painel{ padding:18px 16px 22px; }
@media (min-width:768px){ .ori__painel{ padding:26px 26px 30px; } }

.ori__passos{ display:flex; gap:10px; margin-bottom:18px; }
.ori__passos li{ flex:1; }
.ori__passos i{ display:block; height:2px; background:var(--line); }
.ori__passos li[data-on] i{ background:var(--gold); }
.ori__passos span{
  display:block; margin-top:8px; font-family:var(--ff-mono); font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gray);
}
.ori__passos li[data-on] span{ color:var(--navy); }

[data-tela] h3:focus, [data-tela] h3:focus-visible{ outline:none; }
.ori__q{ font-size:clamp(18px,2.6vw,22px); font-weight:700; letter-spacing:-.005em; line-height:1.3; max-width:30ch; }
.ori__hint{ margin-top:8px; font-size:14px; color:var(--gray); max-width:54ch; }
.ori__opts{ display:grid; gap:8px; margin-top:18px; }
@media (min-width:640px){ .ori__opts{ grid-template-columns:1fr 1fr; gap:10px; } }
@media (min-width:1000px){ .ori__opts--3{ grid-template-columns:repeat(3,1fr); } }
.opt{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  min-height:58px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--white);
  transition:border-color var(--t), background var(--t);
}
.opt:hover{ border-color:var(--navy); background:var(--gold-wash); }
.opt__n{ font-family:var(--ff-mono); font-size:10px; color:var(--gray); letter-spacing:.1em; flex:0 0 auto; }
.opt__t{ flex:1; font-size:15px; font-weight:700; color:var(--navy); line-height:1.3; }
.opt__d{ display:block; font-size:12.5px; font-weight:400; color:var(--gray); margin-top:3px; line-height:1.45; }
.opt__a{ flex:0 0 auto; width:14px; height:14px; color:var(--navy); opacity:.55; transition:transform var(--t), opacity var(--t); }
.opt:hover .opt__a{ transform:translateX(3px); opacity:1; }

.ori__nav{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; }
.ori__back{ display:inline-flex; align-items:center; gap:9px; min-height:44px; font-size:14px; color:var(--gray); }
.ori__back:hover{ color:var(--navy); }

.ori__res{ display:grid; gap:22px; }
@media (min-width:860px){ .ori__res{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:42px; align-items:start; } }
.ori__resT{ font-size:clamp(20px,3vw,26px); font-weight:700; letter-spacing:-.008em; line-height:1.22; margin-top:10px; }
.ori__resD{ margin-top:12px; font-size:15px; line-height:1.6; color:var(--ink); max-width:46ch; }
.ori__resN{ margin-top:12px; font-size:12.5px; line-height:1.55; color:var(--gray); max-width:52ch; }
.ori__resBox{ border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; background:var(--wash); }
.ori__resBox h4{ font-family:var(--ff-mono); font-size:10px; font-weight:400; letter-spacing:.15em; text-transform:uppercase; color:var(--gray); margin-bottom:12px; }
.ori__resBox li{ position:relative; padding-left:18px; font-size:14px; line-height:1.5; color:var(--ink); margin-bottom:8px; }
.ori__resBox li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:1px; background:var(--gold); }
.ori__resActs{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; }

/* ============ 03 · COMO FUNCIONA — sequência, sem imagem ============
   Números, microícones e tipografia. Uma linha de percurso liga as quatro
   etapas; o nó dourado marca o início de cada uma. */
.fluxo{ position:relative; margin-top:28px; display:grid; gap:0; }
@media (min-width:980px){
  .fluxo{ grid-template-columns:repeat(4,1fr); gap:0 34px; margin-top:46px; }
}
.etapa{ position:relative; padding:18px 0 18px 30px; }
@media (min-width:980px){ .etapa{ padding:26px 0 0 0; } }
/* trilho: vertical no mobile, horizontal no desktop */
.etapa::before{
  content:""; position:absolute; left:5px; top:0; bottom:0; width:1px; background:var(--line);
}
.etapa:first-child::before{ top:12px; }
.etapa:last-child::before{ bottom:auto; height:12px; }
@media (min-width:980px){
  .etapa::before{ left:0; right:-34px; top:5px; bottom:auto; width:auto; height:1px; }
  .etapa:first-child::before{ left:0; top:5px; }
  .etapa:last-child::before{ right:0; height:1px; }
}
/* nó dourado */
.etapa::after{
  content:""; position:absolute; left:0; top:12px; width:11px; height:11px;
  border:1px solid var(--gold); background:var(--white);
}
@media (min-width:980px){ .etapa::after{ top:0; } }
.etapa__ico{
  display:block; width:26px; height:26px; color:var(--navy); margin-bottom:10px;
}
.etapa__ico svg{ width:26px; height:26px; }
.etapa__n{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em; color:var(--gray); }
.etapa__t{ font-size:19px; font-weight:700; letter-spacing:-.008em; line-height:1.25; margin-top:6px; }
@media (min-width:980px){ .etapa__t{ font-size:21px; } }

/* ============ 04 · SOLUÇÕES TÉCNICAS ============ */
.sol{ margin-top:24px; }
@media (min-width:900px){ .sol{ margin-top:8px; } }
.sol__row{ display:grid; gap:16px; padding:26px 0; border-top:1px solid var(--line); }
.sol__row:first-child{ margin-top:22px; }
@media (min-width:900px){
  .sol__row{ grid-template-columns:repeat(12,1fr); gap:0 44px; padding:54px 0; align-items:center; }
  .sol__row:first-child{ margin-top:38px; }
  .sol__row--a .sol__media{ grid-column:1 / span 7; }
  .sol__row--a .sol__txt  { grid-column:9 / span 4; }
  .sol__row--b .sol__media{ grid-column:7 / span 6; order:2; }
  .sol__row--b .sol__txt  { grid-column:1 / span 5; order:1; }
  .sol__row--c .sol__media{ grid-column:1 / span 5; }
  .sol__row--c .sol__txt  { grid-column:7 / span 5; }
}
/* proporções nativas das fichas: M4 16:9 desktop e 16:10 mobile ·
   M5 3:2 nas duas · M6 4:5 vertical nas duas */
.sol__row--a .sol__ph{ aspect-ratio:16/10; }
.sol__row--b .sol__ph{ aspect-ratio:3/2; }
.sol__row--c .sol__ph{ aspect-ratio:4/5; }
@media (min-width:900px){ .sol__row--a .sol__ph{ aspect-ratio:16/9; } }
.sol__n{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em; color:var(--gray); }
.sol__t{ font-size:clamp(25px,4.4vw,38px); line-height:1.1; margin-top:6px; }
.sol__d{ font-size:15px; line-height:1.55; color:var(--gray); margin-top:10px; max-width:40ch; }
.sol__l{ margin-top:12px; }

/* ============ 05 · RESPONSABILIDADE E CONFIANÇA — navy ============ */
.cnf__grid{ display:grid; gap:30px; }
@media (min-width:960px){ .cnf__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:70px; align-items:center; } }
.cnf h2{ font-size:clamp(26px,4.6vw,40px); line-height:1.14; margin-top:14px; max-width:16ch; }
.cnf__lead{ margin-top:16px; max-width:44ch; }
.cnf__pts{ margin-top:26px; }
.cnf__pt{ padding:18px 0; border-top:1px solid var(--on-navy-line); }
.cnf__pt:last-child{ border-bottom:1px solid var(--on-navy-line); }
.cnf__pt h3{ font-family:var(--ff-sans); font-size:15.5px; font-weight:700; letter-spacing:0; color:var(--white); }
.cnf__pt p{ margin-top:6px; font-size:14px; line-height:1.55; color:var(--on-navy-soft); max-width:46ch; }
.cnf__pt p:empty{ display:none; }
/* PAINEL DE CREDENCIAL — Fase 02.11C, no lugar da imagem conceitual.
   Só o que está confirmado: o nome da empresa e as três frentes. Nenhum campo
   de RT, CREA, região ou tempo de atuação enquanto pendentes (D-018, D-019). */
.cnf__cred{
  border:1px solid var(--on-navy-line); border-top:2px solid var(--gold);
  padding:26px 24px 24px;
}
.cnf__cred-t{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--on-navy-soft);
}
.cnf__cred-e{
  margin-top:12px; font-family:var(--ff-serif); font-size:24px;
  letter-spacing:-.022em; color:var(--white); text-wrap:balance;
}
.cnf__cred-c{ margin-top:6px; font-size:14.5px; color:var(--on-navy); }
.cnf__cred-r{
  margin-top:10px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em;
  color:var(--gold);
  /* o número de registro não quebra em duas linhas: partido ele lê como erro */
  white-space:nowrap;
}
.cnf__cred-l{ margin-top:20px; border-top:1px solid var(--on-navy-line); }
.cnf__cred-l li{
  position:relative; padding:12px 0 12px 19px;
  border-bottom:1px solid var(--on-navy-line);
  font-size:14.5px; color:var(--on-navy);
}
.cnf__cred-l li::before{
  content:""; position:absolute; left:0; top:20px; width:10px; height:1px; background:var(--gold);
}
@media (min-width:960px){ .cnf__cred{ padding:30px 28px 28px; } .cnf__cred-e{ font-size:28px; } }

/* ============ 06 · CTA FINAL — claro ============ */
.fim{ text-align:center; }
.fim h2{ font-size:clamp(27px,5vw,44px); line-height:1.12; margin:14px auto 0; max-width:19ch; }
.fim .lead{ margin:16px auto 0; max-width:48ch; }
.fim__b{ margin-top:28px; }

/* ============ RODAPÉ — navy ============ */
/* credencial compacta do rodapé — Fase 02.12 */
.ft__rt{
  margin-top:24px; padding-top:16px; border-top:1px solid var(--on-navy-line);
  font-size:13px; line-height:1.6; color:var(--on-navy-soft);
}
.ft__rt + .ft__ia{ margin-top:10px; padding-top:0; border-top:0; }
.ft__ia{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--on-navy-line);
  font-size:12px; line-height:1.55; color:var(--on-navy-soft); max-width:60ch;
}
.ft__ia + .ft__base{ margin-top:14px; border-top:0; padding-top:0; }


/* ============ BENEFÍCIOS OBJETIVOS — Fase 02.11A ============
   Faixa clara com quatro itens, ícone de linha em dourado e texto em duas
   linhas — geometria da referência aprovada. Fecha o miolo claro antes do CTA
   final. "Atendimento na sua região" NÃO está no ar: o copy master só o
   autoriza depois que a região estiver confirmada, e ela segue pendente. */
.ben{ padding:26px 0 30px; border-top:1px solid var(--line); }
.ben__l{ display:grid; gap:18px 28px; }
.ben__l li{ display:flex; align-items:flex-start; gap:12px; }
.ben__i{ flex:0 0 auto; color:var(--gold); }
.ben__i svg{ display:block; width:24px; height:24px; }
.ben__l li > span:last-child{ font-size:14px; line-height:1.38; color:var(--ink); }
@media (min-width:700px){ .ben__l{ grid-template-columns:repeat(3,1fr); gap:0 26px; } }
/* Fase 03.3 V2, item 7: são TRÊS benefícios confirmados — "Atendimento na sua
   região" continua fora porque a região é dado pendente e não se inventa. A
   ausência do quarto não autoriza mexer na geometria: os três se distribuem em
   partes iguais na faixa, em vez de deixarem uma coluna vazia. */
@media (min-width:1000px){
  .ben{ padding:32px 0 36px; }
  .ben__l{ grid-template-columns:repeat(3,1fr); gap:0 40px; }
}