/* Ranking de oportunidades — módulo compartilhado por /oportunidades e /ofertas.
   Tudo escopado em .ro e com classes ro-*: a home (home.css) tem .card/.modal
   próprios, e sem o escopo um estilo vazaria para o outro. */
.ro{
  --ink:#1B0F2E; --ink-soft:#4A3F5C; --ink-mute:#6B6180; --ink-faint:#8C82A0;
  --laranja:#F4682B; --laranja-dark:#DE5619; --azul:#0B7BEA;
  --borda:#E7E2EF; --borda-forte:#D8D2E2; --chip:#F4F1F8;
  --verde:#0B6B3A; --verde-bg:#DFF3E7; --ambar:#8A5A08; --ambar-bg:#FDEED2; --verm:#A32615; --verm-bg:#FBE0DB;
  font-family:'DM Sans',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;box-sizing:border-box
}
/* Reset de elemento com especificidade ZERO (:where): o laudo completo
   (vkRenderLaudo) é injetado dentro de .ro, e vk-laudo.css estiliza os
   próprios a/h2/h3 com (0,1,1). Um `.ro a` empataria e venceria pela ordem
   dos <link> — tirando a cor/sublinhado dos links e a margem dos títulos do
   laudo. Com :where qualquer regra do vk-laudo vence, em qualquer ordem. */
:where(.ro) *,:where(.ro) *::before,:where(.ro) *::after{box-sizing:border-box}
:where(.ro) a{color:inherit;text-decoration:none}
:where(.ro) h2,:where(.ro) h3{margin:0}
.ro .ro-mono{font-family:'DM Mono',monospace}
.ro .ro-eyebrow{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
/* Só o título do próprio modal (filho direto): o h2 que o vkRenderLaudo gera
   dentro do laudo mantém a fonte do vk-laudo.css, como antes da extração. */
.ro .ro-modal>h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em}

/* ── Cards ── */
.ro .ro-lista{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.ro .ro-card{position:relative;background:#fff;border:1px solid var(--borda);border-radius:14px;box-shadow:0 1px 2px rgba(27,15,46,.04);display:grid;grid-template-columns:34px 92px minmax(200px,2.1fr) minmax(92px,1fr) minmax(88px,.85fr) minmax(78px,.66fr) minmax(78px,.66fr) 64px;gap:16px;align-items:center;padding:18px 24px;transition:border-color .15s}
.ro .ro-card:hover{border-color:var(--borda-forte);box-shadow:0 1px 2px rgba(27,15,46,.08)}
.ro .ro-card .ro-pos{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;color:var(--laranja)}
.ro .ro-card img{width:92px;height:64px;object-fit:cover;border-radius:10px;background:var(--chip)}
.ro .ro-card .ro-semfoto{width:92px;height:64px;border-radius:10px;background:var(--chip)}
.ro .ro-card h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.25;text-wrap:pretty;margin:0}
.ro .ro-card .ro-sub{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap;font-size:13px;color:var(--ink-mute)}
.ro .pill-tipo{flex:none;font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:100px;background:var(--ink);color:#fff}
.ro .selic-ok{font-size:12px;font-weight:500;color:var(--verde);margin-top:6px}
/* Selo Airbnb: só aparece em imóvel que o job noturno marcou como bom
   candidato a temporada (cap rate líquido acima da Selic + margem). */
.ro .selo-airbnb{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-size:12px;font-weight:600;color:#B8175A;background:#FDEBF2;
  border:1px solid #F5C6D8;padding:3px 10px;border-radius:100px}
.ro .selo-airbnb .roi{font-family:'DM Mono',monospace;font-weight:500}
.ro .ro-num{text-align:right}
.ro .ro-num b{font-family:'DM Mono',monospace;font-weight:500;font-size:15px;white-space:nowrap;display:block}
.ro .ro-num .rot{font-size:11.5px;color:var(--ink-faint);margin-top:3px}
.ro .ro-num.ro-desagio b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:20px;color:var(--azul)}
/* Temporada (Airbnb) ao lado da locação longa: são retornos DIFERENTES —
   diária real da região × FipeZap R$/m² — e o card mostra os dois lado a
   lado para que a comparação seja do leitor, não nossa. Sem análise, a
   coluna existe com "—": ausência de dado é informação, e a coluna sumindo
   fazia o card perder o alinhamento entre linhas. */
.ro .ro-num.ro-airbnb b{color:var(--azul)}
.ro .ro-num.ro-airbnb.ro-vazio b{color:var(--ink-faint);font-weight:400}
.ro .ro-score{margin-left:auto;font-size:12px;font-weight:500;padding:5px 12px;border-radius:100px;color:var(--verde);background:var(--verde-bg);text-align:center}
.ro .ro-score.ro-medio{color:var(--ambar);background:var(--ambar-bg)}
.ro .ro-score.ro-baixo{color:var(--verm);background:var(--verm-bg)}
.ro .ro-card{cursor:pointer}
.ro .ro-grupo{border:1px solid var(--borda);border-radius:14px;box-shadow:0 1px 2px rgba(27,15,46,.04)}
.ro .ro-grupo .ro-card{border:none;box-shadow:none}
.ro .ro-grupo.ro-aberto{border-color:var(--borda-forte);box-shadow:0 6px 24px rgba(27,15,46,.08)}
.ro .ro-grupo.ro-aberto .ro-card{border-bottom:1px solid var(--borda);border-radius:14px 14px 0 0}
.ro .ro-card .ro-seta{position:absolute;right:10px;top:10px;font-size:11px;color:var(--ink-faint);transition:transform .15s}
.ro .ro-grupo.ro-aberto .ro-seta{transform:rotate(180deg)}
/* Card aberto cujo laudo é PRO (/ofertas com preferência local): no lugar da
   seta, a dica (na coluna do texto) — o clique abre o popup PRO, não o detalhe. */
.ro .ro-dica-pro{margin-top:5px;font-size:11.5px;font-weight:600;color:var(--ink-soft)}

/* ── Quadro de detalhe (laudo resumido) ── */
.ro .ro-detalhe{display:none;padding:clamp(16px,4vw,26px) clamp(14px,4vw,28px) clamp(16px,4vw,24px);background:#fff;border-radius:0 0 14px 14px}
.ro .ro-grupo.ro-aberto .ro-detalhe{display:block}
.ro .det-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(22px,3vw,36px);align-items:start}
.ro .det-tit{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.ro .det-resumo{font-size:14px;line-height:1.65;color:var(--ink-soft)}
.ro .det-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ro .det-tag{font-size:12px;font-weight:500;padding:5px 12px;border-radius:100px;background:var(--chip);color:var(--ink-soft)}
.ro .det-acoes{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.ro .det-btn{display:inline-block;font-size:14px;font-weight:500;padding:12px 22px;border-radius:100px}
.ro .det-btn.cheio{background:var(--laranja);color:#fff}
.ro .det-btn.cheio:hover{background:var(--laranja-dark)}
.ro .det-btn.vazado{border:1px solid var(--borda-forte);color:var(--ink)}
.ro .det-btn.vazado:hover{border-color:var(--ink)}
.ro .custos-t{width:100%;border-collapse:collapse}
.ro .custos-t td{padding:9px 0;font-size:13.5px;border-bottom:1px solid var(--borda);color:var(--ink-soft)}
.ro .custos-t td:last-child{text-align:right;font-family:'DM Mono',monospace;white-space:nowrap;color:var(--ink)}
.ro .custos-t tr.tot td{font-weight:700;color:var(--ink);border-bottom:none;font-size:14.5px}
.ro .riscos-l{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ro .riscos-l li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.ro .risco-ico{flex:none;width:19px;height:19px;border-radius:5px;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.ro .risco-ico.ok{background:var(--ink);color:#fff}
.ro .risco-ico.alto{background:var(--verm-bg);color:var(--verm)}
.ro .risco-ico.medio{background:var(--ambar-bg);color:var(--ambar)}
.ro .det-box{margin-top:16px;background:#E8F2FE;border-radius:12px;padding:16px 18px}
.ro .det-box .det-tit{margin-bottom:6px;color:var(--azul)}
.ro .det-box b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;letter-spacing:-.02em}
.ro .det-box .ro-sub{font-size:12.5px;color:var(--ink-mute);margin-top:4px}
.ro button.det-btn{font-family:'DM Sans',sans-serif;border:none;cursor:pointer;line-height:1}
.ro button.det-btn.vazado{background:#fff}
.ro .laudo-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ro .laudo-cab .det-tit{margin-bottom:0}
.ro .laudo-corpo{max-height:72vh;overflow:auto;padding:clamp(14px,4vw,24px) clamp(13px,4vw,28px);border:1px solid var(--borda);border-radius:14px;background:#fff}
.ro .det-box.neg{background:#FDEBE7}
.ro .det-box.neg .det-tit{color:#A32615}
.ro .det-full{margin-top:30px;padding-top:24px;border-top:1px solid var(--borda)}
.ro .comp-resumo{max-width:520px;margin-bottom:18px}
.ro .comp-wrap{overflow-x:auto}
.ro .comp-t th{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);text-align:right;padding:0 0 8px;border-bottom:1px solid var(--borda)}
.ro .comp-t th:first-child{text-align:left}
.ro .comp-t td{text-align:right}
.ro .comp-t td:first-child{text-align:left;font-family:inherit}
.ro .comp-t td:last-child{font-family:'DM Mono',monospace}
.ro .comp-fonte{font-size:11px;color:var(--azul);text-decoration:underline}
.ro .det-carregando{padding:26px;text-align:center;color:var(--ink-mute);font-size:14px}
@media(max-width:960px){.ro .det-grid{grid-template-columns:1fr}}

.ro .ro-bloq{filter:blur(5px);pointer-events:none;user-select:none}
.ro .ro-card.ro-bloqueado{cursor:pointer}
.ro .ro-card.ro-bloqueado::after{content:attr(data-selo);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink);background:rgba(244,241,248,.55);border-radius:14px;transition:background .15s}
.ro .ro-card.ro-bloqueado:hover::after{background:rgba(244,241,248,.75)}

/* ── Modal PRO ── */
.ro .ro-modal-fundo{position:fixed;inset:0;background:rgba(27,15,46,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.ro .ro-modal-fundo.ro-aberto{display:flex}
.ro .ro-modal{background:#fff;border-radius:18px;max-width:520px;width:100%;padding:clamp(26px,6vw,36px) clamp(20px,5vw,36px) clamp(24px,5vw,32px);position:relative;box-shadow:0 24px 60px rgba(27,15,46,.35);max-height:92vh;overflow-y:auto}
.ro .ro-modal .ro-fechar{position:absolute;top:14px;right:18px;background:none;border:none;font-size:22px;color:var(--ink-faint);cursor:pointer;line-height:1}
.ro .ro-modal .ro-fechar:hover{color:var(--ink)}
.ro .ro-modal h2{font-size:26px;margin:0;line-height:1.15}
.ro .ro-modal .ro-sub{font-size:14.5px;color:var(--ink-soft);margin-top:10px;line-height:1.6}
.ro .ro-modal ul{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:10px}
.ro .ro-modal li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.ro .ro-modal li::before{content:"✓";flex:none;width:19px;height:19px;border-radius:5px;background:var(--verde-bg);color:var(--verde);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.ro .ro-modal .ro-acao{display:block;text-align:center;margin-top:26px;background:var(--laranja);color:#fff;font-weight:500;font-size:15px;padding:15px 28px;border-radius:100px}
.ro .ro-modal .ro-acao:hover{background:var(--laranja-dark)}
.ro .ro-modal .ro-depois{display:block;text-align:center;margin-top:12px;font-size:13px;color:var(--ink-faint);background:none;border:none;cursor:pointer;width:100%;font-family:'DM Sans',sans-serif}
.ro .ro-modal .ro-depois:hover{color:var(--ink)}

/* Modal do laudo completo — tela cheia (mais confiável que o acordeão inline,
   que dependia de scroll e podia ficar imperceptível dependendo do layout). */
.ro .laudo-modal{max-width:920px;width:94vw;padding:clamp(20px,4vw,32px);display:flex;flex-direction:column;max-height:92vh}
.ro .laudo-modal .laudo-cab{flex:none;padding-right:34px}
.ro .laudo-modal .laudo-corpo{flex:1;max-height:none}
.ro .ro-vazio{text-align:center;color:var(--ink-mute);padding:50px 0}

/* ── Card: de tabela (8 colunas) para bloco que quebra sozinho ──
   A foto VOLTA, e lance/deságio/aluguel/temporada viram faixas de números
   embaixo — nenhum dado é omitido. */
@media(max-width:820px){
  .ro .ro-card{grid-template-columns:34px 104px repeat(4,minmax(0,1fr));
        gap:10px 12px;align-items:center;padding:14px clamp(12px,3.5vw,18px)}
  .ro .ro-card .ro-pos{grid-area:1/1/2/2;font-size:14px}
  .ro .ro-card img,.ro .ro-card .ro-semfoto{grid-area:1/2/2/3;display:block;width:104px;height:78px}
  .ro .ro-card .ro-info{grid-area:1/3/2/6;min-width:0}
  .ro .ro-card .ro-score{grid-area:1/6/2/7;justify-self:end;margin-left:0}
  .ro .ro-card h3{font-size:clamp(15px,3.9vw,17px)}
  /* a faixa de números ocupa a linha inteira — nada é escondido */
  .ro .ro-card .ro-num{text-align:left;min-width:0;padding-top:9px;border-top:1px solid var(--borda)}
  /* 4 números não cabem numa linha de 6 colunas sem espremer: lance+deságio
     na primeira faixa, aluguel+temporada na segunda — os dois retornos
     ficam LADO A LADO, que é o ponto da comparação. */
  .ro .ro-card .ro-num.ro-lance{grid-area:2/1/3/4;display:block}
  .ro .ro-card .ro-num.ro-desagio{grid-area:2/4/3/7}
  .ro .ro-card .ro-num.ro-yld{grid-area:3/1/4/4;display:block}
  .ro .ro-card .ro-num.ro-airbnb{grid-area:3/4/4/7;display:block}
  .ro .ro-card .ro-num b{font-size:14px;white-space:normal}
  .ro .ro-card .ro-num.ro-desagio b{font-size:18px}
  .ro .ro-card .ro-seta{top:auto;bottom:8px;right:10px}
  .ro .ro-card.ro-bloqueado::after{font-size:13px;padding:0 18px;text-align:center;line-height:1.4}
}

/* ── Detalhe e laudo ── */
@media(max-width:960px){
  .ro .det-grid{grid-template-columns:1fr}
  /* rolagem aninhada é ruim no toque: o laudo cresce e a PÁGINA rola */
  .ro .laudo-corpo{max-height:none;overflow:visible}
  .ro .det-acoes{gap:8px}
  .ro .det-btn{padding:11px 18px;font-size:13.5px}
  .ro .det-acoes .det-btn{flex:1 1 auto;text-align:center}
}
/* Abaixo de 560px o flex-wrap deixa de ser previsível (a foto sobe para a
   linha da nota): aqui o card vira grade explícita de 6 colunas —
   pos+nota / foto+texto / faixa de números — sempre nessa ordem. */
@media(max-width:560px){
  .ro .ro-card{display:grid;grid-template-columns:repeat(6,1fr);gap:10px 12px;align-items:center}
  .ro .ro-card .ro-pos{grid-area:1/1/2/3}
  .ro .ro-card .ro-score{grid-area:1/4/2/7;justify-self:end;margin-left:0}
  .ro .ro-card img,.ro .ro-card .ro-semfoto{grid-area:2/1/3/3;width:100%;height:auto;aspect-ratio:1/1}
  .ro .ro-card .ro-info{grid-area:2/3/3/7}
  .ro .ro-card .ro-num.ro-lance{grid-area:3/1/4/4}
  .ro .ro-card .ro-num.ro-desagio{grid-area:3/4/4/7}
  .ro .ro-card .ro-num.ro-yld{grid-area:4/1/5/4}
  .ro .ro-card .ro-num.ro-airbnb{grid-area:4/4/5/7}
  .ro .ro-card .ro-num{align-self:stretch}
  .ro .ro-card .ro-seta{bottom:6px;right:8px}
}

/* ── Comparáveis: 4 colunas não cabem em 360px ──
   O preço quebrava no meio ("R$" numa linha, o valor noutra) e colidia com
   o R$/m². Em tela estreita cada comparável vira um bloco: endereço em cima
   e Área / Preço / R$/m² como pares rótulo→valor, sem truncar nada. */
@media(max-width:560px){
  .ro .comp-t thead{display:none}
  .ro .comp-t,.ro .comp-t tbody,.ro .comp-t tr,.ro .comp-t td{display:block;width:100%}
  .ro .comp-t tr{padding:12px 0;border-bottom:1px solid var(--borda)}
  .ro .comp-t tr:last-child{border-bottom:none}
  .ro .comp-t td{border:none;padding:3px 0;display:flex;align-items:baseline;
             justify-content:space-between;gap:14px;text-align:right}
  .ro .comp-t td::before{content:attr(data-r);font-family:'DM Mono',monospace;font-size:10px;
             letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
             text-align:left;white-space:nowrap}
  .ro .comp-t td:last-child{white-space:nowrap}
  .ro .comp-t td:first-child{display:block;text-align:left;padding-bottom:7px;line-height:1.45}
  .ro .comp-t td:first-child::before{content:none}
  .ro .comp-wrap{overflow-x:visible}
}

@media(max-width:560px){
  .ro .custos-t td{font-size:13px;padding:8px 0}
  .ro .comp-t th,.ro .comp-t td{font-size:12.5px}
  .ro .det-box b{font-size:22px}
  .ro .laudo-cab{gap:10px}
  .ro .laudo-cab .det-btn{width:100%;text-align:center}
  .ro .ro-modal-fundo{padding:12px;align-items:flex-end}
  .ro .ro-modal{border-radius:18px}
}

/* ── Modo compacto: coluna lateral do /ofertas ── */
.ro.ro-compacto .ro-lista{gap:10px;margin:0}
.ro.ro-compacto .ro-card{grid-template-columns:26px 64px minmax(0,1fr) auto;gap:10px;padding:12px 14px}
.ro.ro-compacto .ro-card img,.ro.ro-compacto .ro-card .ro-semfoto{width:64px;height:48px}
.ro.ro-compacto .ro-card h3{font-size:14px}
.ro.ro-compacto .ro-card .ro-sub{font-size:12px;gap:6px;margin-top:3px}
.ro.ro-compacto .ro-num.ro-lance,.ro.ro-compacto .ro-num.ro-yld,.ro.ro-compacto .ro-num.ro-airbnb,
.ro.ro-compacto .selo-airbnb,.ro.ro-compacto .selic-ok{display:none}
.ro.ro-compacto .ro-num.ro-desagio{grid-area:auto;text-align:right}
.ro.ro-compacto .ro-num.ro-desagio b{font-size:16px}
.ro.ro-compacto .ro-score{grid-column:4;font-size:11px;padding:3px 9px}
.ro.ro-compacto .ro-card .ro-seta{display:none}
.ro.ro-compacto .ro-det-grid,.ro.ro-compacto .det-grid{grid-template-columns:1fr}
.ro .ro-origem{font-size:11.5px;font-weight:600;color:var(--azul)}