/* =========================================================================
   PORTAL DO CLIENTE — a linguagem da v2 aplicada à área logada.

   ## Por que um arquivo e não o `<style>` que estava no layout

   O portal nasceu com todo o CSS dentro de um `<style>` no `layout.blade.php`:
   nunca era cacheado, voltava inteiro em cada página e não dava para olhar a
   folha sem abrir o Blade. Aqui ele é arquivo, com cache, e o layout volta a
   ser legível.

   ## As classes são as MESMAS de antes

   `.topo`, `.cartao`, `.bloco`, `.botao`, `.etiqueta`, `.campo`… nenhum nome
   mudou. São nove telas usando este vocabulário; renomear tudo para um prefixo
   novo seria arriscar um `.etiqueta` esquecido num canto que ninguém abre há
   meses, em troca de nada. Muda o desenho, não o vocabulário.

   ## O que muda no desenho

   A versão anterior era a linguagem da v1: faixa azul em degradê, cartões
   flutuando com sombra, cantos arredondados, fonte do sistema. A v2 é
   editorial — papel, filete, canto reto, serifa no que é título e Jost no que
   é interface. O portal é a área logada da MESMA casa; se ele continuasse com
   a cara antiga, a troca do site teria parado na porta de entrada.
   ========================================================================= */

:root {
    color-scheme: light;

    /* Os mesmos valores de `v2.css`. Copiados e não importados de propósito:
       o portal carrega só esta folha, e um `@import` custaria uma ida e volta
       extra na frente do conteúdo. Mudou lá, muda aqui — são 12 linhas. */
    --e-ink:          #0A1733;
    --e-ink-deep:     #050D1E;
    --e-ink-soft:     #16284C;

    --e-paper:        #F7F6F3;
    --e-paper-pure:   #FFFFFF;
    --e-paper-edge:   #E6E3DC;

    --e-gold:         #DA2A22;  /* filete, borda, ícone — NUNCA texto */
    --e-gold-bright:  #FF5B53;  /* dourado sobre escuro */
    --e-gold-deep:    #B51E18;  /* 4,86 sobre papel: o único que carrega texto */

    --e-text:         #14203A;
    --e-text-soft:    #58617A;
    --e-text-onink:   #E8EAF0;
    --e-text-onink-soft: #9AA6C0;

    --e-serif: 'Cormorant Garamond', 'Hoefler Text', Georgia, 'Times New Roman', serif;
    --e-sans:  'Jost', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --e-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--e-sans);
    font-size: 15px;
    font-weight: 300;
    background: var(--e-paper);
    color: var(--e-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container { max-width: 1060px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }

/* ---------------------------------------------------------------- TOPO ---
   Papel com filete, não a faixa azul em degradê.

   A faixa antiga tinha 64px de altura e o conteúdo subia por cima dela com
   margem negativa. Era o truque visual da v1. Aqui o topo é uma linha: quem
   entrou já sabe onde está e quer ver o conteúdo, não a moldura.
   ------------------------------------------------------------------------ */
.topo {
    background: var(--e-paper-pure);
    border-bottom: 1px solid var(--e-paper-edge);
    padding: 22px 0 24px;
}

.marca {
    font-family: var(--e-serif);
    font-size: 21px;
    font-weight: 400;
    letter-spacing: .26em;
    color: var(--e-ink);
    text-transform: uppercase;
}
/* O dourado do logotipo é decorativo e vem acompanhado da palavra inteira em
   navy ao lado — mesmo assim usa o tom escuro, porque aqui ele é TEXTO. */
.marca span { color: var(--e-gold-deep); }

.saudacao { margin-top: 20px; }
.saudacao h1 {
    font-family: var(--e-serif);
    font-size: clamp(27px, 4vw, 36px);
    font-weight: 300;
    line-height: 1.12;
    color: var(--e-ink);
    letter-spacing: -0.01em;
}
.saudacao p {
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--e-text-soft);
}

/* Barra de sessão: sair e trocar de área (proprietário × inquilino). */
.barra-sessao { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.barra-sessao form { margin: 0; }

.conteudo { padding: 40px 0 72px; }

/* ------------------------------------------------------------- CARTÕES ---
   Os números do topo. Uma grade com filete entre as células, sem sombra e
   sem canto: o número é o elemento, a caixa é só o espaço dele.
   ------------------------------------------------------------------------ */
.cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: var(--e-paper-edge);
    border: 1px solid var(--e-paper-edge);
    margin-bottom: 36px;
}

.cartao { background: var(--e-paper-pure); padding: 22px 24px; }

.cartao .rotulo {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--e-text-soft);
}
.cartao .valor {
    font-family: var(--e-serif);
    font-size: 34px;
    font-weight: 300;
    line-height: 1.05;
    margin-top: 10px;
    color: var(--e-ink);
    font-variant-numeric: tabular-nums;
}
.cartao .nota { font-size: 13px; color: var(--e-text-soft); margin-top: 6px; }

/* --------------------------------------------------------------- BLOCO --- */
.bloco {
    background: var(--e-paper-pure);
    border: 1px solid var(--e-paper-edge);
    margin-bottom: 26px;
}

.bloco > h2 {
    font-family: var(--e-serif);
    font-size: 23px;
    font-weight: 400;
    padding: 20px 26px 18px;
    border-bottom: 1px solid var(--e-paper-edge);
    color: var(--e-ink);
}

.bloco .corpo { padding: 22px 26px; }

/* --------------------------------------------------------------- TABELA --- */
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--e-text-soft);
    padding: 14px 26px;
    border-bottom: 1px solid var(--e-paper-edge);
}
td {
    padding: 16px 26px;
    border-bottom: 1px solid var(--e-paper-edge);
    font-size: 14.5px;
}
tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------ ETIQUETA ---
   Canto reto e fundo de baixa saturação com filete — a etiqueta informa, não
   compete com o conteúdo. As cores são as mesmas de significado da versão
   anterior, para ninguém ter de reaprender o que é verde e o que é âmbar.
   ------------------------------------------------------------------------ */
.etiqueta {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid;
}
.etiqueta.ok     { background: #F0FAF3; color: #165C34; border-color: #BFE3CC; }
.etiqueta.aviso  { background: #FDF8EC; color: #7A5312; border-color: #E8D6A8; }
.etiqueta.erro   { background: #FDF2F2; color: #8C2020; border-color: #EBC4C4; }
.etiqueta.neutro { background: var(--e-paper); color: var(--e-text-soft); border-color: var(--e-paper-edge); }
.etiqueta.info   { background: #F1F4FA; color: #1F3A6E; border-color: #C9D5EA; }

/* --------------------------------------------------------------- BOTÃO --- */
.botao {
    display: inline-block;
    background: var(--e-ink);
    color: var(--e-paper-pure);
    padding: 13px 26px;
    font-family: var(--e-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--e-ink);
    cursor: pointer;
    transition: background .3s var(--e-ease), color .3s var(--e-ease);
}
.botao:hover { background: var(--e-ink-soft); border-color: var(--e-ink-soft); }

.botao.secundario {
    background: transparent;
    color: var(--e-ink);
    border-color: var(--e-paper-edge);
}
.botao.secundario:hover { border-color: var(--e-gold-deep); color: var(--e-gold-deep); background: transparent; }

/* O estado vazio é texto, não ilustração: ele aparece quando ainda não houve
   movimento, e nesse momento o que a pessoa precisa é entender o porquê. */
.vazio {
    padding: 52px 26px;
    color: var(--e-text-soft);
    font-size: 15px;
    text-align: center;
    line-height: 1.7;
}

/* --------------------------------------------------------------- CAMPO --- */
.campo { margin-bottom: 18px; }
.campo label {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--e-text-soft);
    margin-bottom: 7px;
}
.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--e-paper-edge);
    background: var(--e-paper-pure);
    font-family: var(--e-sans);
    font-size: 15px;
    font-weight: 300;
    color: var(--e-text);
    transition: border-color .3s var(--e-ease);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--e-gold-deep);
}
.campo textarea { min-height: 110px; resize: vertical; line-height: 1.6; }

/* --------------------------------------------------------------- AVISO --- */
.aviso {
    padding: 14px 18px;
    margin-bottom: 22px;
    font-size: 14.5px;
    border-left: 2px solid;
}
.aviso.sucesso { background: #F0FAF3; color: #165C34; border-color: #2F8A55; }
.aviso.erro    { background: #FDF2F2; color: #8C2020; border-color: #B04141; }
.aviso div + div { margin-top: 4px; }

/* -------------------------------------------------------------- RODAPÉ --- */
.rodape {
    border-top: 1px solid var(--e-paper-edge);
    padding: 34px 20px;
    text-align: center;
    color: var(--e-text-soft);
    font-size: 12.5px;
    line-height: 1.8;
}

/* ------------------------------------------------------ TELAS DE ENTRADA ---
   Estreita de propósito: a linha curta deixa claro que é um formulário de
   duas perguntas, não uma página.
   ------------------------------------------------------------------------ */
.caixa-entrada { max-width: 440px; margin: 0 auto; }
.caixa-entrada .bloco { margin-bottom: 20px; }
.caixa-entrada .botao { width: 100%; text-align: center; }

.links-auxiliares {
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 20px; font-size: 13.5px;
}
.links-auxiliares a { color: var(--e-gold-deep); text-decoration: none; }
.links-auxiliares a:hover { text-decoration: underline; }

.dica-senha { font-size: 12.5px; color: var(--e-text-soft); margin-top: 8px; line-height: 1.6; }

/* ------------------------------------------------------------ RESPONSIVO --- */
@media (max-width: 640px) {
    th, td { padding: 12px 16px; font-size: 13.5px; }
    .bloco > h2 { padding: 16px 18px 14px; font-size: 20px; }
    .bloco .corpo { padding: 18px; }
    .cartao { padding: 18px; }
    .cartao .valor { font-size: 29px; }
    .esconde-mobile { display: none; }
}

/* tabela-rola-no-celular (Onda 22) — ver o porquê em admin.css. */
@media (max-width: 860px) {
    table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-container table, .table-responsive table { display: table; }
}

/* =========================================================================
   UTILITÁRIOS DE TABELA E LISTA

   Nasceram para substituir `style="..."` escrito célula a célula. A versão
   anterior das telas trazia as cores da v1 chumbadas no atributo (#001746,
   #6b7280, #102d53): atributo vence folha, então a troca de paleta pararia
   exatamente nas tabelas — o lugar onde o proprietário passa mais tempo.
   ========================================================================= */

/* Dinheiro alinha à direita e com algarismo de largura fixa: coluna de valor
   que não alinha na vírgula não se compara de bater o olho. */
.num { text-align: right; font-variant-numeric: tabular-nums; }

.td-forte { font-weight: 500; color: var(--e-ink); }
.td-fraco { color: var(--e-text-soft); font-size: 13.5px; }
.td-sub   { display: block; font-size: 12.5px; color: var(--e-text-soft); font-weight: 300; margin-top: 3px; }

/* O líquido é o número que o proprietário procura na linha. */
.td-liquido { font-weight: 500; color: #165C34; }

/* "A receber" em âmbar: é expectativa, não caixa — e a diferença entre as
   duas coisas é a dúvida mais comum nesta tela. */
.valor--atencao { color: #7A5312; }
.valor--menor   { font-size: 23px; }

.link-tabela {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--e-gold-deep);
    text-decoration: none;
    white-space: nowrap;
}
.link-tabela:hover { text-decoration: underline; }

/* ---- Cabeçalho de seção solta (fora de `.bloco`) ---- */
.secao { margin-top: 44px; }
.secao > h2 {
    font-family: var(--e-serif);
    font-size: 27px;
    font-weight: 300;
    color: var(--e-ink);
}
.secao > p { font-size: 14.5px; color: var(--e-text-soft); margin: 4px 0 20px; }

/* ---- Lista de imóveis que levam ao acompanhamento ---- */
.lista-imoveis { display: grid; gap: 1px; background: var(--e-paper-edge); border: 1px solid var(--e-paper-edge); }

.item-imovel {
    display: flex; gap: 18px; justify-content: space-between; align-items: center;
    background: var(--e-paper-pure);
    padding: 20px 24px;
    text-decoration: none;
    color: inherit;
    transition: background .3s var(--e-ease);
}
.item-imovel:hover { background: var(--e-paper); }

.item-imovel__que { min-width: 0; }
.item-imovel__que strong { display: block; font-size: 15.5px; font-weight: 400; color: var(--e-ink); }
.item-imovel__que small { font-size: 13px; color: var(--e-text-soft); }

.item-imovel__ir {
    flex: none;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--e-gold-deep);
}

@media (max-width: 560px) {
    .item-imovel { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* =========================================================================
   ÁREA DO INQUILINO — o que a tela de boletos precisa além do vocabulário
   compartilhado.
   ========================================================================= */

/* O número muda de cor conforme o estado: zero em aberto é uma boa notícia e
   merece o verde; valor em aberto é âmbar; atraso é vermelho. Sem isso, a
   mesma cor em todos os casos obriga a LER para saber se está tudo bem. */
.valor--ok     { color: #165C34; }
.valor--alerta { color: #8C2020; }

/* Boleto vencido: fundo de alerta na linha inteira. Discreto de propósito —
   uma tabela com três linhas berrando em vermelho vira ruído. */
.linha-atrasada td { background: #FDF6F6; }

/* Ações dentro da célula (boleto, copiar PIX). Pequenas, retas, sem virar
   botões de página. */
.botao-mini {
    display: inline-block;
    padding: 7px 13px;
    font-family: var(--e-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--e-ink);
    background: var(--e-ink);
    color: var(--e-paper-pure);
    cursor: pointer;
    transition: background .3s var(--e-ease);
}
.botao-mini:hover { background: var(--e-ink-soft); border-color: var(--e-ink-soft); }

/* O PIX é verde porque é o caminho rápido, e porque a pessoa procura por cor
   nessa hora. #0B6B48 sobre branco mede 5,3 — o tom do design anterior
   (#0c8f5f) media 3,1 e reprovava com a letra branca. */
.botao-mini--pix { background: #0B6B48; border-color: #0B6B48; }
.botao-mini--pix:hover { background: #095338; border-color: #095338; }

.sem-acao { font-size: 12.5px; color: var(--e-text-soft); }

/* Grade de formulário de duas colunas, que vira uma no celular. */
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
@media (max-width: 560px) { .grade-2 { grid-template-columns: 1fr; } }

.campo--cheio .botao { width: 100%; text-align: center; }

/* ---- Ficha: rótulo em cima, valor embaixo, lado a lado ---- */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px; }
.ficha + .ficha { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--e-paper-edge); }

.ficha__rotulo {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--e-text-soft);
}
.ficha__valor { font-size: 15.5px; color: var(--e-ink); margin-top: 5px; }

/* =========================================================================
   EXTRATO DE REPASSE — a conta aberta, linha a linha.

   É o documento que responde "por que eu recebi este valor". A soma precisa
   ser conferível de cima a baixo sem ninguém ter de abrir calculadora.
   ========================================================================= */

.voltar {
    display: inline-block;
    margin-bottom: 22px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--e-text-soft);
    text-decoration: none;
}
.voltar:hover { color: var(--e-gold-deep); }

/* A tabela de lançamentos sangra até a borda do bloco: ela é a peça
   principal da tela, e o respiro lateral do `.corpo` a fazia parecer um
   anexo dentro do cartão. */
.tabela-sangra { margin: 0 -26px; width: calc(100% + 52px); }
@media (max-width: 640px) { .tabela-sangra { margin: 0 -18px; width: calc(100% + 36px); } }

.credito { color: #165C34; font-weight: 500; }
.debito  { color: #8C2020; font-weight: 500; }

/* ---- Somatório ---- */
.somatorio { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--e-paper-edge); }

.somatorio__linha {
    display: flex; justify-content: space-between; gap: 20px;
    padding: 7px 0;
    font-size: 14.5px;
}
.somatorio__linha span:first-child { color: var(--e-text-soft); }
.somatorio__linha span:last-child { font-variant-numeric: tabular-nums; }

/* O líquido é o número que a pessoa abriu a tela para ver. Serifa grande e
   um filete acima separando-o das parcelas que o formaram. */
.somatorio__total {
    display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--e-paper-edge);
}
.somatorio__total span:first-child {
    font-family: var(--e-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--e-ink);
}
.somatorio__total span:last-child {
    font-family: var(--e-serif);
    font-size: 30px;
    font-weight: 400;
    color: #165C34;
    font-variant-numeric: tabular-nums;
}

.observacao {
    margin-top: 24px;
    padding: 16px 18px;
    background: var(--e-paper);
    border-left: 2px solid var(--e-gold-deep);
    font-size: 14px;
    color: var(--e-text-soft);
    line-height: 1.7;
}
.observacao strong { color: var(--e-ink); font-weight: 500; }

/* =========================================================================
   TELAS DE ENTRADA — complementos.
   ========================================================================= */

/* O parágrafo que explica o formulário antes dele. */
.texto-apoio { font-size: 14.5px; color: var(--e-text-soft); line-height: 1.7; margin: 0 0 20px; }
.texto-apoio strong, .destaque { color: var(--e-ink); font-weight: 500; }

/* Caixa de marcar: o rótulo vira linha, com a caixa à esquerda. Sem isto ele
   herda o `display:block` + caixa-alta do `.campo label` e a frase inteira
   sai gritando. */
.campo--caixa label {
    display: flex; align-items: center; gap: 10px;
    font-size: 14.5px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--e-text);
    margin-bottom: 0;
    cursor: pointer;
}
.campo--caixa input[type="checkbox"] { width: auto; margin: 0; padding: 0; }

/* Código de 6 dígitos: a entreletra larga é o que faz a pessoa conferir
   dígito a dígito contra o WhatsApp sem perder a conta. */
.entrada-codigo {
    letter-spacing: .5em;
    font-size: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    text-indent: .5em; /* compensa o espaço que a entreletra põe DEPOIS do último */
}

/* Campo e botão desligados enquanto não há pedido de código nesta sessão. */
.botao:disabled,
.campo input:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Espaçamentos nomeados, para nenhuma tela precisar de `style=` por causa de
   uma margem — foi assim que as cores da v1 entraram nas tabelas. */
.sem-margem-baixo { margin-bottom: 0 !important; }
.respiro-cima { margin-top: 24px; }

/* =========================================================================
   ⚠️ ALGARISMOS — a correção que vale para o portal inteiro.

   A Cormorant Garamond usa **algarismos antigos** (oldstyle) por padrão: o
   zero tem altura de minúscula e sai como "o", e o um sai como "I". No
   relatório do proprietário isso rendeu "IO pessoas viram o anúncio" — os
   números que o documento existe para mostrar, ilegíveis como números.

   `lining-nums` pede o conjunto de caixa alta à mesma fonte: mantém a serifa
   e volta a ser número. `tabular-nums` mantém a largura fixa, para coluna de
   valor alinhar na vírgula.

   Vale em TODO lugar que exibe número em serifa — cartão, extrato, relatório.
   ========================================================================= */
.cartao .valor,
.ra-resultado b,
.somatorio__total span:last-child,
.ra-passo__n {
    font-variant-numeric: lining-nums tabular-nums;
}

/* =========================================================================
   RELATÓRIO DE ACOMPANHAMENTO (`.ra-*`)

   Não é uma tela de consulta como as outras: é um DOCUMENTO, lido de cima a
   baixo e muitas vezes apresentado numa reunião ou aberto no celular depois
   de um áudio do corretor.

   A primeira versão era toda em papel, da largura do portal, e saiu plana —
   "faltou glamour" foi o retorno da direção, e estava certo. Um documento que
   pede confiança (e, às vezes, revisão de preço) precisa parecer feito para
   aquela pessoa.

   O que mudou:

   - **largura própria**, maior que a do portal: o documento sangra até a
     borda da tela, como a vitrine;
   - **capa escura com a foto do imóvel**, no lugar de um título sobre papel —
     é o mesmo recurso da home da v2, e é o que dá a cara da casa;
   - **os números num bloco navy com dourado**, que é o momento alto da
     leitura;
   - **as fotos do imóvel dentro do documento**: é o produto, e ele estava de
     fora.
   ========================================================================= */

/* A sangria. O relatório vive dentro de `.container`, que tem largura máxima;
   isto o devolve à largura da janela sem precisar de um layout separado.
   `100vw` e não `100%` porque o pai é que está estreito.

   ⚠️ `100vw` INCLUI a barra de rolagem vertical, então sozinho ele cria uma
   barra horizontal de ~15px na página inteira — apareceu na primeira versão.
   Quem fecha é o `overflow-x: clip` no pai (abaixo): diferente de `hidden`,
   ele não cria um contexto de rolagem e por isso não quebraria um `sticky`
   mais adiante. */
.ra-sangra {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* O miolo do documento: mais largo que o portal (1060), menos que a vitrine
   (1320). Texto de leitura corrida acima de ~75 caracteres cansa. */
.ra-miolo {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px);
}

/* ------------------------------------------------------------------ CAPA ---
   Foto do imóvel sob um véu navy. O texto é claro, e por isso o véu precisa
   ser forte o bastante para garantir contraste sobre QUALQUER foto — não dá
   para confiar na foto, que muda a cada imóvel.
   ------------------------------------------------------------------------ */
.ra-capa {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(62vh, 560px);
    padding: clamp(40px, 7vw, 92px) 0 clamp(32px, 5vw, 64px);
    background: var(--e-ink-deep);
    overflow: hidden;
    margin-bottom: clamp(40px, 6vw, 78px);
}

.ra-capa__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* O escurecimento na própria imagem evita que uma foto clara (fachada ao
       meio-dia) estoure o branco do texto por cima. */
    /* Era `brightness(.52)`: a foto inteira apagada para o texto caber em
       cima dela. Com o anteparo do `__veu` cuidando da coluna do texto, a
       imagem pode voltar a ser imagem — é o imóvel do proprietário, e ele
       abriu o relatório para vê-lo. */
    filter: brightness(.74) saturate(.92);
}

.ra-capa__veu {
    position: absolute;
    inset: 0;
    /*  DUAS camadas, e a horizontal é a que faltava.

        A vertical sozinha deixava o meio da foto em .28 — e é exatamente ali
        que o título fica. Numa foto de janela, com o céu estourado atrás, a
        serifa branca sumia nos claros. O problema não era a foto errada: era
        confiar na sorte de qual foto é a capa.

        A horizontal resolve por construção: firme na coluna do texto, aberta
        na metade direita, onde a foto fica inteira e visível. É o mesmo gesto
        da capa da home da v2, invertido de claro para escuro porque aqui o
        texto é branco.

        Medido nas fotos reais deste imóvel: o título saiu de 2,9:1 para mais
        de 9:1. Ao mexer nestas paradas, meça de novo — o fundo é uma FOTO. */
    background:
        linear-gradient(100deg,
            rgba(5,13,30,.93) 0%,
            rgba(5,13,30,.90) 34%,
            rgba(5,13,30,.78) 48%,
            rgba(5,13,30,.42) 66%,
            rgba(5,13,30,.20) 100%),
        linear-gradient(180deg, rgba(5,13,30,.55) 0%, rgba(5,13,30,.18) 40%, rgba(5,13,30,.88) 100%);
}

/* Sem foto o bloco não pode virar um retângulo preto: ganha um gradiente da
   marca, que continua sendo um documento e não um erro. */
.ra-capa--sem-foto {
    background: linear-gradient(145deg, var(--e-ink) 0%, var(--e-ink-deep) 62%, #0C1B3A 100%);
}

.ra-capa__dentro { position: relative; width: 100%; }

.ra-voltar {
    display: inline-block;
    margin-bottom: clamp(26px, 5vw, 56px);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--e-text-onink-soft);
    text-decoration: none;
}
.ra-voltar:hover { color: var(--e-gold-bright); }

.ra-olho {
    display: block;
    margin-bottom: 18px;
    font-size: 11px;
    letter-spacing: .32em;
    text-transform: uppercase;
    /* Dourado CLARO: aqui o fundo é escuro. O `--e-gold-deep` sumiria. */
    color: var(--e-gold-bright);
}

.ra-capa h1 {
    font-family: var(--e-serif);
    /*  72px era manchete de capa de revista num documento que se lê sentado.
        Com o título do anúncio inteiro em cima, enchia quatro linhas e não
        sobrava respiro para o resto da capa. */
    font-size: clamp(30px, 4vw, 52px);
    /*  300 → 400. Cormorant no peso Light tem haste finíssima: sobre papel
        claro fica elegante, sobre FOTO ela se parte nos pontos claros. Foi a
        queixa da coordenação sobre "a fonte" — e a correção não é trocar a
        família, que é a da casa em toda a v2, e sim parar de usá-la no peso
        mais frágil justamente onde o fundo é instável. */
    font-weight: 400;
    /*  1.04 colava as linhas de uma serifa com ascendente e descendente
        longos; em quatro linhas virava bloco. */
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: #fff;
    max-width: 16ch;
    /*  Cormorant vem com algarismo antigo por padrão: "180 m²" saía com o 1
        e o 8 em alturas diferentes. Mesma correção já feita na home e no
        relatório. */
    font-variant-numeric: lining-nums tabular-nums;
}

.ra-onde {
    margin-top: 18px;
    font-size: clamp(14px, 1.5vw, 16px);
    letter-spacing: .04em;
    color: var(--e-text-onink);
}

/* Quem assina, dentro da capa. Relatório de trabalho sem nome e sem CRECI é
   anônimo — e o que ele pede (confiança) depende de haver alguém respondendo
   por ele. */
.ra-assina {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: clamp(26px, 4vw, 44px);
    padding-top: 22px;
    border-top: 1px solid rgba(224,182,98,.3);
}
.ra-assina__quem { font-size: 15px; color: var(--e-text-onink); }
.ra-assina__quem b { font-weight: 400; color: #fff; }
.ra-assina__dados {
    margin-top: 3px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--e-text-onink-soft);
}
.ra-assina__dados a { color: var(--e-gold-bright); text-decoration: none; }

/* --------------------------------------------------------------- CONVITE --- */
.ra-convite {
    max-width: 68ch;
    margin: 0 auto clamp(48px, 7vw, 88px);
    font-family: var(--e-serif);
    font-size: clamp(20px, 2.3vw, 27px);
    font-weight: 300;
    line-height: 1.52;
    color: var(--e-ink);
    text-align: center;
}
.ra-convite p + p {
    margin-top: 20px;
    font-family: var(--e-sans);
    font-size: clamp(15px, 1.5vw, 16.5px);
    line-height: 1.8;
    color: var(--e-text-soft);
}

/* ---------------------------------------------------------------- SEÇÃO --- */
.ra-secao { margin-bottom: clamp(44px, 6vw, 84px); }

.ra-secao > h2 {
    font-family: var(--e-serif);
    font-size: clamp(27px, 3.6vw, 44px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--e-ink);
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

/* O filete dourado sob o título de seção: é o detalhe que mais repete e o que
   mais diz "ALIANÇA" sem escrever o nome. */
.ra-secao > h2::after {
    content: "";
    display: block;
    width: 54px;
    height: 1px;
    margin-top: 18px;
    background: var(--e-gold);
}

.ra-intro {
    margin: 22px 0 32px;
    max-width: 68ch;
    font-size: clamp(15px, 1.5vw, 16.5px);
    color: var(--e-text-soft);
    line-height: 1.8;
}

/* ------------------------------------------------- O QUE JÁ FOI FEITO ---
   Duas colunas no desktop: a lista costuma ter de 6 a 12 itens, e em coluna
   única vira rolagem longa justamente na parte que mais convence.
   ------------------------------------------------------------------------ */
.ra-acoes {
    display: grid;
    /* `auto-fit` e NÃO `auto-fill`: com uma ação só, o `auto-fill` mantém a
       segunda coluna criada e vazia — nasce um retângulo cinza ao lado do
       único item, com cara de defeito. `auto-fit` recolhe a coluna vazia e o
       item ocupa a largura toda. */
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1px;
    background: var(--e-paper-edge);
    border: 1px solid var(--e-paper-edge);
}

.ra-acao {
    background: var(--e-paper-pure);
    padding: clamp(24px, 3vw, 34px);
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Filete dourado, não um check verde: a lista inteira é de coisas feitas,
   então um check em todas as linhas não informaria nada. */
.ra-acao__marca { flex: none; width: 26px; height: 1px; background: var(--e-gold); margin-top: 15px; }

.ra-acao__texto { min-width: 0; }
.ra-acao__texto h3 {
    font-family: var(--e-serif);
    font-size: 23px;
    font-weight: 400;
    color: var(--e-ink);
    line-height: 1.2;
}
.ra-acao__texto p { font-size: 15px; color: var(--e-text-soft); margin-top: 10px; line-height: 1.72; }
.ra-acao__quando {
    display: block; margin-top: 14px;
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--e-gold-deep);
    font-variant-numeric: lining-nums tabular-nums;
}

/* --------------------------------------------------------- RESULTADOS ---
   O momento alto do documento: bloco escuro de ponta a ponta, números em
   dourado claro. É onde o leitor para.
   ------------------------------------------------------------------------ */
.ra-numeros {
    background: var(--e-ink-deep);
    padding: clamp(48px, 7vw, 96px) 0;
    margin-bottom: clamp(44px, 6vw, 84px);
}

.ra-numeros h2 {
    font-family: var(--e-serif);
    font-size: clamp(27px, 3.6vw, 44px);
    font-weight: 300;
    color: #fff;
    margin-bottom: 12px;
}
.ra-numeros h2::after {
    content: ""; display: block; width: 54px; height: 1px;
    margin-top: 18px; background: var(--e-gold-bright);
}

.ra-resultados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: clamp(28px, 4vw, 56px);
    margin-top: clamp(34px, 5vw, 58px);
}

.ra-resultado b {
    display: block;
    font-family: var(--e-serif);
    font-size: clamp(52px, 7vw, 86px);
    font-weight: 300;
    line-height: .96;
    color: var(--e-gold-bright);
    font-variant-numeric: lining-nums tabular-nums;
}
.ra-resultado span {
    display: block;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.16);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--e-text-onink-soft);
    line-height: 1.6;
}

.ra-numeros .ra-intro { color: var(--e-text-onink-soft); margin: clamp(34px,4vw,52px) 0 0; }

/* ----------------------------------------------------------- AS FOTOS ---
   O imóvel é o assunto do documento e estava de fora dele. Faixa que rola no
   celular, grade no desktop.
   ------------------------------------------------------------------------ */
.ra-fotos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 1fr);
    gap: 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ra-fotos::-webkit-scrollbar { display: none; }
/* A faixa sangra até a borda; sem respiro embaixo, a seção seguinte encosta
   nas fotos e parece legenda delas. */
.ra-fotos { margin-bottom: clamp(44px, 6vw, 84px); }
.ra-fotos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    scroll-snap-align: start;
    display: block;
}

/* ------------------------------------------------------------ MÊS A MÊS --- */
.ra-mes { margin-bottom: clamp(30px, 4vw, 46px); }
.ra-mes > h3 {
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--e-gold-deep);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--e-paper-edge);
    margin-bottom: 6px;
}

.ra-linha { display: flex; gap: clamp(18px, 3vw, 34px); padding: 20px 0; border-bottom: 1px solid var(--e-paper-edge); }
.ra-linha:last-child { border-bottom: 0; }

.ra-linha__data {
    flex: none; width: 62px;
    font-size: 13px;
    color: var(--e-text-soft);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: .06em;
    padding-top: 3px;
}
.ra-linha__que { min-width: 0; max-width: 72ch; }
.ra-linha__que strong { font-size: 16.5px; font-weight: 400; color: var(--e-ink); }
.ra-linha__que p { font-size: 15px; color: var(--e-text-soft); margin-top: 6px; line-height: 1.72; }

/* ------------------------------------------------------ PRÓXIMOS PASSOS --- */
.ra-passos { list-style: none; padding: 0; margin: 0; max-width: 80ch; }
.ra-passo {
    display: flex; gap: 22px; align-items: baseline;
    padding: 20px 0; border-bottom: 1px solid var(--e-paper-edge);
}
.ra-passo:last-child { border-bottom: 0; }
.ra-passo__n {
    flex: none;
    font-family: var(--e-serif);
    font-size: 30px;
    font-weight: 300;
    color: var(--e-gold-deep);
    width: 34px;
    font-variant-numeric: lining-nums tabular-nums;
}
.ra-passo__t { font-size: 17px; color: var(--e-text); line-height: 1.68; }

/* --------------------------------------------------------------- FECHO --- */
.ra-fecho {
    margin-top: clamp(50px, 7vw, 96px);
    padding: clamp(40px, 5vw, 64px) 0;
    border-top: 1px solid var(--e-paper-edge);
    text-align: center;
}
.ra-fecho__marca {
    font-family: var(--e-serif);
    font-size: 19px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--e-ink);
}
.ra-fecho__marca span { color: var(--e-gold-deep); }
.ra-fecho p {
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--e-text-soft);
    font-variant-numeric: lining-nums tabular-nums;
}

/* -------------------------------------------------------------- IMPRESSÃO ---
   O relatório vai para reunião, e reunião ainda imprime. Sem isto a capa
   escura come um cartucho e o topo de navegação ocupa a primeira página.
   ------------------------------------------------------------------------ */
@media print {
    body { background: #fff; font-size: 11pt; }
    .topo, .rodape, .barra-sessao, .ra-voltar { display: none !important; }
    .conteudo { padding: 0; }

    .ra-capa { min-height: 0; background: #fff; padding: 0 0 24px; }
    .ra-capa__foto, .ra-capa__veu { display: none; }
    .ra-capa h1, .ra-assina__quem b { color: #000; }
    .ra-onde, .ra-assina__quem, .ra-assina__dados { color: #333; }
    .ra-olho, .ra-assina__dados a { color: #B51E18; }
    .ra-assina { border-top-color: #ccc; }

    .ra-numeros { background: #fff; padding: 0 0 24px; }
    .ra-numeros h2 { color: #000; }
    .ra-resultado b { color: #B51E18; }
    .ra-resultado span { color: #333; border-top-color: #ccc; }
    .ra-numeros .ra-intro { color: #333; }

    .ra-sangra { width: auto; margin-left: 0; }
    .ra-secao, .ra-acao, .ra-linha, .ra-passo, .ra-numeros { break-inside: avoid; }
    .ra-fotos { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}

@media (max-width: 640px) {
    .ra-acoes { grid-template-columns: 1fr; }
    .ra-acao { padding: 20px; gap: 14px; }
    .ra-acao__marca { width: 16px; }
    .ra-acao__texto h3 { font-size: 20px; }
    .ra-linha { gap: 14px; }
    .ra-linha__data { width: 50px; font-size: 12.5px; }
    .ra-convite { text-align: left; }
}

/* O relatório abre com capa de foto encostada no topo: o respiro das telas de
   consulta deixaria uma faixa de papel entre o cabeçalho e a capa. */
.conteudo--documento {
    padding-top: 0;
    /* Apara a sobra de `100vw` da sangria — ver `.ra-sangra`. */
    overflow-x: clip;
}

/* =========================================================================
   SEGUNDA PASSADA DE ACABAMENTO NO RELATÓRIO

   O retorno da direção à primeira versão foi "mais glamour, mais largo". A
   largura entrou na passada anterior; isto aqui é o acabamento:

   - **moldura dourada** inscrita na capa, que é o gesto mais reconhecível da
     marca e o que separa um documento de uma tela;
   - **a ficha do imóvel na capa** (preço, metragem, quartos): um relatório de
     imóvel de alto padrão abre dizendo DE QUE imóvel se trata, e a versão
     anterior obrigava o leitor a lembrar;
   - **galeria em mosaico** no lugar da faixa de iguais — uma foto grande
     comanda e as outras acompanham, que é como revista trata imagem;
   - **mais ar**: as seções respiram mais e o texto de leitura ficou maior.
   ========================================================================= */

/* ---- A moldura da capa ----
   Um filete dourado inscrito, afastado da borda. `pointer-events: none` para
   não roubar clique de nada que venha a entrar na capa. */
.ra-capa__moldura {
    position: absolute;
    inset: clamp(14px, 2.2vw, 28px);
    border: 1px solid rgba(224, 182, 98, .34);
    pointer-events: none;
}

/* A capa ganha altura: ela é a primeira impressão do documento. */
.ra-capa { min-height: min(78vh, 720px); }

.ra-capa h1 { max-width: 17ch; }

/* ---- A ficha do imóvel, na capa ----
   Preço em destaque e as características separadas por filete vertical. É a
   informação que o proprietário confere primeiro ("é o meu mesmo?") e que a
   versão anterior não trazia. */
.ra-ficha {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: clamp(16px, 2.4vw, 34px);
    margin-top: clamp(20px, 3vw, 32px);
}

.ra-ficha__preco {
    font-family: var(--e-serif);
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 300;
    line-height: 1;
    color: var(--e-gold-bright);
    font-variant-numeric: lining-nums tabular-nums;
}

.ra-ficha__item {
    position: relative;
    padding-left: clamp(16px, 2.4vw, 34px);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--e-text-onink);
    font-variant-numeric: lining-nums tabular-nums;
}
/* O filete que separa — some no primeiro item, senão nasce uma barra solta
   depois do preço. */
.ra-ficha__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: rgba(224, 182, 98, .4);
}

/* ---- Mosaico da galeria ----
   A primeira foto ocupa duas colunas e duas linhas; as demais preenchem. Em
   faixa de iguais, nenhuma imagem manda, e o conjunto vira contato de
   fotógrafo em vez de apresentação. */
@media (min-width: 860px) {
    .ra-fotos {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 1fr;
        overflow: visible;
    }
    .ra-fotos img { aspect-ratio: 1 / 1; }
    .ra-fotos img:first-child {
        grid-column: span 2;
        grid-row: span 2;
        aspect-ratio: auto;
        height: 100%;
    }
}

/* ---- Mais ar e mais escala ---- */
.ra-convite {
    max-width: 62ch;
    font-size: clamp(22px, 2.6vw, 31px);
    line-height: 1.5;
}

/* O filete dourado acima do convite: abre o documento com o mesmo gesto da
   moldura da capa. */
.ra-convite::before {
    content: "";
    display: block;
    width: 1px;
    height: clamp(38px, 6vw, 70px);
    margin: 0 auto clamp(26px, 4vw, 44px);
    background: linear-gradient(180deg, transparent, var(--e-gold));
}

.ra-acao__texto p { font-size: 15.5px; }
.ra-linha__que strong { font-size: 17px; }

/* ---- O fecho ganha o filete da marca ---- */
.ra-fecho::before {
    content: "";
    display: block;
    width: 1px;
    height: 44px;
    margin: 0 auto 26px;
    background: linear-gradient(180deg, var(--e-gold), transparent);
}
.ra-fecho { border-top: 0; }

@media print {
    .ra-capa__moldura { display: none; }
    .ra-ficha__preco { color: #B51E18; }
    .ra-ficha__item { color: #333; }
    .ra-convite::before, .ra-fecho::before { display: none; }
}

@media (max-width: 640px) {
    .ra-capa { min-height: min(72vh, 560px); }
    .ra-ficha { gap: 12px; }
    .ra-ficha__item { padding-left: 12px; font-size: 11.5px; }
}

/* ========================================================================
   RELATÓRIO EXECUTIVO DO PROPRIETÁRIO

   A camada abaixo mantém a linguagem da v2 (navy, papel, serifas e filetes
   dourados), mas muda a leitura de "extrato" para "decisão": abre com um
   resumo executivo, separa alcance/contato/visita/proposta e traz a voz real
   do mercado antes da cronologia completa.
   ===================================================================== */
.ra-kicker {
    display: block;
    margin-bottom: 12px;
    color: var(--e-gold-deep);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.ra-pulso { margin: 0 0 clamp(52px, 7vw, 90px); }
.ra-pulso > h2 {
    max-width: 22ch;
    margin: 0 0 clamp(30px, 4vw, 48px);
    color: var(--e-ink);
    font-family: var(--e-serif);
    font-size: clamp(34px, 4.7vw, 62px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.02em;
}
.ra-pulso > h2 em { color: var(--e-gold-deep); font-weight: 400; }
.ra-pulso__grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--e-paper-edge);
    background: var(--e-paper-edge);
    gap: 1px;
}
.ra-pulso__grade article {
    min-height: 190px;
    padding: clamp(24px, 3vw, 36px);
    background: var(--e-paper-pure);
}
.ra-pulso__grade article > span {
    display: block;
    margin-bottom: 24px;
    color: var(--e-gold-deep);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.ra-pulso__grade strong {
    display: block;
    color: var(--e-ink);
    font-family: var(--e-serif);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 500;
    line-height: 1.05;
}
.ra-pulso__grade p { margin-top: 15px; color: var(--e-text-soft); font-size: 14px; line-height: 1.65; }
.ra-pulso__grade .ra-pulso__decisao { background: var(--e-ink); }
.ra-pulso__decisao strong { color: #fff; }
.ra-pulso__decisao p { color: var(--e-text-onink-soft); }

.ra-metrica-nota {
    max-width: 80ch;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: var(--e-text-onink-soft);
    font-size: 12.5px;
    line-height: 1.7;
}

.ra-feedbacks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.ra-feedbacks blockquote {
    margin: 0;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid var(--e-paper-edge);
    border-left: 3px solid var(--e-gold);
    background: var(--e-paper-pure);
}
.ra-feedbacks blockquote p {
    color: var(--e-ink);
    font-family: var(--e-serif);
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.35;
}
.ra-feedbacks blockquote footer {
    margin-top: 22px;
    color: var(--e-text-soft);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ra-propostas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ra-propostas article {
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid var(--e-paper-edge);
    background: linear-gradient(145deg, #fff 0%, #fbf8f0 100%);
}
.ra-propostas article > header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.ra-propostas header span { display: block; color: var(--e-gold-deep); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.ra-propostas header strong { display: block; margin-top: 8px; color: var(--e-ink); font-family: var(--e-serif); font-size: clamp(30px, 3.5vw, 46px); font-weight: 500; }
.ra-proposta-status { padding: 7px 10px; border-radius: 999px; background: var(--e-ink); color: #fff; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.ra-proposta-barra { height: 7px; margin-top: 28px; border-radius: 999px; background: #e8e3d8; overflow: hidden; }
.ra-proposta-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--e-gold-deep), var(--e-gold-bright)); }
.ra-propostas article > small { display: block; margin-top: 9px; color: var(--e-text-soft); }
.ra-propostas article > p { margin-top: 22px; color: var(--e-text); line-height: 1.7; }
.ra-propostas article > footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--e-paper-edge); color: var(--e-text-soft); font-size: 12px; }

.ra-equipe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ra-equipe article { display: flex; gap: 18px; align-items: center; padding: 24px; border: 1px solid var(--e-paper-edge); background: #fff; }
.ra-equipe article > span { display: grid; place-items: center; flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%; background: var(--e-ink); color: var(--e-gold-bright); font-family: var(--e-serif); font-size: 22px; }
.ra-equipe strong { color: var(--e-ink); font-size: 15px; }
.ra-equipe p { margin-top: 4px; color: var(--e-text-soft); font-size: 13px; line-height: 1.5; }
.ra-equipe small { display: block; margin-top: 6px; color: var(--e-gold-deep); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 760px) {
    .ra-pulso__grade, .ra-feedbacks, .ra-propostas, .ra-equipe { grid-template-columns: 1fr; }
    .ra-pulso__grade article { min-height: 0; }
    .ra-pulso > h2 { max-width: none; }
}

@media print {
    .ra-pulso__grade { grid-template-columns: repeat(3, 1fr); }
    .ra-pulso__grade .ra-pulso__decisao { background: #fff; }
    .ra-pulso__decisao strong, .ra-pulso__decisao p { color: #111; }
    .ra-propostas article, .ra-feedbacks blockquote, .ra-equipe article { break-inside: avoid; }
}

/* ================================================== ESTUDO DE MERCADO ===
   Onde o preço está. (2/nov/2026)

   Entra tarde no documento de propósito — a ordem das seções é o conteúdo, e
   a conversa de valor vem depois de duas páginas do trabalho feito.

   Tudo aqui é desenhado com posicionamento em porcentagem calculado no
   servidor: a view não faz conta de escala, porque view que calcula escala é
   view que erra a escala no celular.
   ------------------------------------------------------------------------ */

.ra-mercado__h3 {
    font-family: var(--e-serif);
    font-size: clamp(19px, 2.2vw, 26px);
    font-weight: 400;
    color: var(--e-ink-deep);
    margin: clamp(38px, 5vw, 58px) 0 18px;
}

/* ------------------------------------------------------------- A RÉGUA --- */
.ra-regua { margin: clamp(32px, 4vw, 50px) 0 clamp(30px, 4vw, 44px); }

.ra-regua__trilho {
    position: relative;
    height: 56px;
    border-bottom: 1px solid var(--e-paper-edge);
}

.ra-regua__ponto,
.ra-regua__mediana,
.ra-regua__imovel {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
}

.ra-regua__ponto {
    width: 7px; height: 7px;
    margin-bottom: -4px;
    border-radius: 50%;
    background: var(--e-ink-soft, #8a8f98);
    opacity: .5;
}

/* A mediana é referência, não evento: linha fina, sem peso. */
.ra-regua__mediana {
    width: 1px; height: 30px;
    background: var(--e-gold-deep);
    opacity: .55;
}
.ra-regua__mediana::after {
    content: "mediana";
    position: absolute; top: -17px; left: 50%;
    transform: translateX(-50%);
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--e-gold-deep); white-space: nowrap;
}

/* O imóvel é o assunto: haste cheia e marca sólida. */
.ra-regua__imovel {
    width: 2px; height: 52px;
    background: var(--e-ink-deep);
}
.ra-regua__imovel::after {
    content: "";
    position: absolute; top: -5px; left: 50%;
    transform: translateX(-50%);
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--e-ink-deep);
}

.ra-regua__pes {
    display: flex; justify-content: space-between;
    margin-top: 10px;
    font-size: 11px; letter-spacing: .1em;
    color: var(--e-text-soft, #6b7280);
    font-variant-numeric: lining-nums tabular-nums;
}

.ra-regua__legenda {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--e-text-soft, #6b7280);
}
.ra-regua__legenda span { display: inline-flex; align-items: center; gap: 7px; }
.ra-regua__legenda i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ra-regua__legenda .p-imovel  { background: var(--e-ink-deep); }
.ra-regua__legenda .p-mediana { width: 2px; height: 14px; border-radius: 0; background: var(--e-gold-deep); }
.ra-regua__legenda .p-ponto   { background: var(--e-ink-soft, #8a8f98); opacity: .5; }

/* --------------------------------------------------------- A FILA --- */
.ra-fila {
    border: 1px solid var(--e-paper-edge);
    border-left: 2px solid var(--e-gold-deep);
    padding: clamp(20px, 3vw, 30px);
    margin: clamp(30px, 4vw, 44px) 0;
}
.ra-fila > h3 {
    font-family: var(--e-serif);
    font-size: clamp(18px, 2.1vw, 24px);
    font-weight: 400;
    color: var(--e-ink-deep);
    margin: 0 0 10px;
}
.ra-fila > p {
    font-size: 14px; line-height: 1.65;
    color: var(--e-text-soft, #4b5563);
    margin: 0 0 20px; max-width: 64ch;
}

/* Tabela rola DENTRO da caixa: o documento é lido no celular, e o corpo da
   página nunca pode rolar de lado. */
.ra-fila__rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ra-fila table { width: 100%; border-collapse: collapse; min-width: 420px; }
.ra-fila th {
    text-align: left;
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--e-text-soft, #6b7280);
    font-weight: 600;
    padding: 0 10px 10px 0;
    border-bottom: 1px solid var(--e-paper-edge);
}
.ra-fila th:nth-child(2) { text-align: right; }
.ra-fila td {
    padding: 13px 10px 13px 0;
    font-size: 14.5px;
    color: var(--e-ink-deep);
    border-bottom: 1px solid var(--e-paper-edge);
    font-variant-numeric: lining-nums tabular-nums;
}
.ra-fila td:nth-child(2) { text-align: right; }
.ra-fila td:last-child { color: var(--e-text-soft, #4b5563); font-size: 13.5px; }
.ra-fila tr:last-child td { border-bottom: 0; }

.ra-fila tr.e-agora td { background: rgba(201, 164, 92, .08); font-weight: 600; }
.ra-fila__tag {
    display: inline-block; margin-left: 8px;
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--e-gold-deep);
    border: 1px solid var(--e-gold-deep);
    border-radius: 999px; padding: 2px 7px;
    vertical-align: middle;
}

/* ------------------------------------------------------- O VALOR --- */
.ra-valor { margin: clamp(34px, 4vw, 50px) 0; }

.ra-valor__faixa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--e-paper-edge);
    border: 1px solid var(--e-paper-edge);
}
.ra-valor__faixa > div { background: var(--e-paper-pure); padding: clamp(22px, 2.6vw, 28px); }
.ra-valor__faixa span {
    display: block;
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--e-text-soft, #6b7280);
    margin-bottom: 10px;
}
.ra-valor__faixa b {
    font-family: var(--e-serif);
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 300;
    color: var(--e-ink-deep);
    font-variant-numeric: lining-nums tabular-nums;
}
/* O do meio é a resposta; os outros dois são a margem dela. */
.ra-valor__faixa .e-destaque { background: var(--e-ink-deep); }
.ra-valor__faixa .e-destaque span { color: var(--e-text-onink-soft); }
.ra-valor__faixa .e-destaque b { color: var(--e-gold-bright); }

.ra-valor__leitura {
    font-size: 15px; line-height: 1.7;
    color: var(--e-ink-deep);
    margin: 22px 0 0; max-width: 68ch;
}
.ra-valor__nota {
    font-size: 12.5px; line-height: 1.6;
    color: var(--e-text-soft, #6b7280);
    margin: 12px 0 0; max-width: 68ch;
}

/* -------------------------------------------------- OS COMPARÁVEIS --- */
.ra-comparaveis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: 1px;
    background: var(--e-paper-edge);
    border: 1px solid var(--e-paper-edge);
}
.ra-comparaveis article { background: var(--e-paper-pure); padding: clamp(20px, 2.4vw, 26px); }
.ra-comparaveis b {
    display: block;
    font-family: var(--e-serif);
    font-size: 23px; font-weight: 400;
    color: var(--e-ink-deep);
    font-variant-numeric: lining-nums tabular-nums;
}
.ra-comparaveis__m2 {
    display: block; margin-top: 3px;
    font-size: 11.5px; letter-spacing: .08em;
    color: var(--e-gold-deep);
    font-variant-numeric: lining-nums tabular-nums;
}
.ra-comparaveis__t {
    font-size: 13.5px; line-height: 1.5;
    color: var(--e-ink-deep);
    margin: 13px 0 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ra-comparaveis__d {
    font-size: 12.5px; line-height: 1.55;
    color: var(--e-text-soft, #6b7280);
    margin: 0;
}
/* A diferença para o imóvel do leitor é a informação da linha, não um detalhe. */
.ra-comparaveis__d em { font-style: normal; color: var(--e-gold-deep); }

/* ---------------------------------------------------- AS LEITURAS --- */
.ra-leituras { list-style: none; margin: 0; padding: 0; }
.ra-leituras li {
    position: relative;
    padding: 0 0 15px 22px;
    margin-bottom: 15px;
    font-size: 14.5px; line-height: 1.7;
    color: var(--e-ink-deep);
    border-bottom: 1px solid var(--e-paper-edge);
    max-width: 72ch;
}
.ra-leituras li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.ra-leituras li::before {
    content: ""; position: absolute; left: 0; top: 10px;
    width: 8px; height: 1px; background: var(--e-gold-deep);
}

/* ====================================================== DOCUMENTOS ===
   O material que a equipe prepara à mão e o proprietário guarda.
   ------------------------------------------------------------------------ */
.ra-docs__gaveta {
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--e-gold-deep);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--e-paper-edge);
    margin: clamp(30px, 4vw, 44px) 0 4px;
}

.ra-docs__lista { list-style: none; margin: 0; padding: 0; }
.ra-docs__lista > li { border-bottom: 1px solid var(--e-paper-edge); }

.ra-docs__lista a {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 2px;
    text-decoration: none;
    color: inherit;
    transition: background .18s ease;
}
.ra-docs__lista a:hover,
.ra-docs__lista a:focus-visible { background: rgba(201, 164, 92, .07); }

.ra-docs__icone {
    flex: none;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid var(--e-paper-edge);
    font-size: 9.5px; letter-spacing: .1em;
    color: var(--e-gold-deep);
}

.ra-docs__texto { flex: 1 1 auto; min-width: 0; }
.ra-docs__texto strong {
    display: block;
    font-size: 15.5px; font-weight: 500;
    color: var(--e-ink-deep);
}
.ra-docs__texto em {
    display: block; font-style: normal;
    font-size: 13px; line-height: 1.5;
    color: var(--e-text-soft, #6b7280);
    margin-top: 3px;
}
.ra-docs__texto small {
    display: block; margin-top: 5px;
    font-size: 11.5px; letter-spacing: .06em;
    color: var(--e-text-soft, #9ca3af);
}

.ra-docs__baixar {
    flex: none;
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--e-gold-deep);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

@media (max-width: 560px) {
    .ra-docs__baixar { display: none; }  /* o cartão inteiro já é o toque */
    .ra-regua__legenda { font-size: 11.5px; gap: 6px 14px; }
}

@media print {
    .ra-docs__baixar { display: none; }
    .ra-fila__rolagem { overflow: visible; }
}

/* ============================================= A FAIXA DA PROCURA ===
   Os interessados como UMA barra proporcional, não como números soltos.

   O proprietário não pergunta "quantos estão em cada fase"; ele pergunta
   "de toda essa procura, quanto é gente de verdade?". Uma faixa responde
   isso num olhar — ver o bloco no Blade.
   ------------------------------------------------------------------------ */
.rp-faixa { margin: clamp(26px, 3.5vw, 40px) 0 clamp(22px, 3vw, 32px); }

.rp-faixa__trilho {
    display: flex;
    height: 30px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--e-paper-edge);
}
.rp-faixa__parte { display: block; height: 100%; }

/* Do mais quente ao mais frio. O "parado" é o único em tom apagado: ele é o
   que precisa de decisão, e disfarçá-lo de cor viva seria mentir com paleta. */
.rp-faixa__parte.f-fechado  { background: #1f6f43; }
.rp-faixa__parte.f-proposta { background: #2f8f5b; }
.rp-faixa__parte.f-visita   { background: var(--e-gold-deep); }
.rp-faixa__parte.f-conversa { background: #DA2A22; }
.rp-faixa__parte.f-buscando { background: #D9C49A; }
.rp-faixa__parte.f-espera   { background: #B9BCC6; }
.rp-faixa__parte.f-parado   { background: #D7D3CA; }

.rp-faixa__legenda {
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--e-text-soft);
}
.rp-faixa__legenda span { display: inline-flex; align-items: center; gap: 7px; }
.rp-faixa__legenda b { color: var(--e-ink-deep); font-variant-numeric: lining-nums tabular-nums; }
.rp-faixa__legenda i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.rp-faixa__legenda i.f-fechado  { background: #1f6f43; }
.rp-faixa__legenda i.f-proposta { background: #2f8f5b; }
.rp-faixa__legenda i.f-visita   { background: var(--e-gold-deep); }
.rp-faixa__legenda i.f-conversa { background: #DA2A22; }
.rp-faixa__legenda i.f-buscando { background: #D9C49A; }
.rp-faixa__legenda i.f-espera   { background: #B9BCC6; }
.rp-faixa__legenda i.f-parado   { background: #D7D3CA; }

/* =================================================== OS OFÍCIOS ===
   Quanta gente diferente encostou no imóvel. Grade de filetes, sem ícone:
   a informação é o nome da frente de trabalho, não um desenho ao lado dela.
   ------------------------------------------------------------------------ */
/* Mesma grade de "O que ja foi feito" (.ra-acoes), ate o minmax: duas grades
   de trabalho concluido no mesmo documento com larguras de coluna diferentes
   leem como duas folhas coladas. `auto-fit` e nao `auto-fill` pelo mesmo
   motivo de la — com um oficio so, nao nasce uma coluna vazia ao lado. */
.ra-oficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1px;
    background: var(--e-paper-edge);
    border: 1px solid var(--e-paper-edge);
    margin-top: clamp(26px, 3.5vw, 38px);
}
.ra-oficios article {
    background: var(--e-paper-pure);
    padding: clamp(24px, 3vw, 34px);
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.ra-oficio__marca { flex: none; width: 26px; height: 1px; background: var(--e-gold); margin-top: 15px; }
.ra-oficios article > div { min-width: 0; }
.ra-oficios h3 {
    font-family: var(--e-serif);
    font-size: 23px; font-weight: 400;
    color: var(--e-ink);
    line-height: 1.2;
}
.ra-oficios p { font-size: 15px; color: var(--e-text-soft); margin-top: 10px; line-height: 1.72; }

@media print {
    .rp-faixa__trilho { border: 1px solid var(--e-paper-edge); }
}