/* MetroValor — tema Swiss com as cores da marca (revisão de 26/10).
   Camada por cima de site.css: mesmo conteúdo e mesmos componentes, outra linguagem visual.
   Grade rígida, réguas finas em Nanquim, seções numeradas, títulos grandes e apertados, nada de sombra e nada inclinado.
   Cores só da paleta oficial e tons derivados dela:
     Nanquim #0F2A22 (texto, réguas, faixas escuras e chamada final; #0B211B mais fundo),
     Papel #EEF4F0 (seções alternadas e rodapé), branco (capa, cabeçalho e seções .white),
     Verde Milimetrado #0B6B4F (ação: botões, links, controles e o desenho de botões nos exemplos), Verde Grade #A9CDBD (linhas e números no escuro),
     Cinza Técnico #4A5E56 (texto secundário), Vermelho Cota #E2463B só na cota do valor estimado (nunca sobre verde).
   Regra do verde: o que só informa (números de seção e de passo, marcas de conferência, faixas, cabeçalho e "Sim" da tabela,
   destaque do título) fica em Nanquim ou Cinza Técnico no claro e em Papel ou Verde Grade no escuro; verde é o que se clica.
   Grade: 4 colunas com vão de 64 px (no desktop, a 1440 as linhas caem em 144, 448, 752 e 1056); os blocos de duas colunas usam as metades.
   Tema escuro: fundos derivados do Nanquim (#0D1C17 e #10231D), réguas em Verde Grade. */
:root{
  --bg:#EEF4F0; --surface:#FFFFFF; --surface-2:#EEF4F0; --fg:#0F2A22; --muted:#4A5E56;
  --line:#0F2A22; --line-strong:#0F2A22; --rule-soft:#C5D9CF; --grid:rgba(11,107,79,0.07);
  --num:#4A5E56; --pend:#4A5E56; --util-bg:#0B211B; --deep-grid:rgba(169,205,189,0.05);
  --chip:transparent; --shadow-1:none; --shadow-2:none;
  --show-light:inline; --show-dark:none;
  --cta-bg:#0F2A22; --cta-fg:#FFFFFF; --cta-sub:#A9CDBD; --cta-m:rgba(169,205,189,0.30); --plan-line:transparent;
  --head-gap:56px; --h-card:32px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#10231D; --surface:#0D1C17; --surface-2:#132A22; --fg:#EEF4F0; --muted:#A3B9AF;
  --line:#A9CDBD; --line-strong:#A9CDBD; --rule-soft:#26402F; --grid:rgba(169,205,189,0.055);
  --num:#A9CDBD; --pend:#A9CDBD; --util-bg:#0B211B; --deep-grid:rgba(169,205,189,0.05);
  --chip:transparent; --shadow-1:none; --shadow-2:none; --show-light:none; --show-dark:inline;
  --cta-bg:#0F2A22; --cta-fg:#FFFFFF; --cta-sub:#A9CDBD; --cta-m:rgba(169,205,189,0.30); --plan-line:rgba(169,205,189,0.38); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#10231D; --surface:#0D1C17; --surface-2:#132A22; --fg:#EEF4F0; --muted:#A3B9AF;
  --line:#A9CDBD; --line-strong:#A9CDBD; --rule-soft:#26402F; --grid:rgba(169,205,189,0.055);
  --num:#A9CDBD; --pend:#A9CDBD; --util-bg:#0B211B; --deep-grid:rgba(169,205,189,0.05);
  --chip:transparent; --shadow-1:none; --shadow-2:none; --show-light:none; --show-dark:inline;
  --cta-bg:#0F2A22; --cta-fg:#FFFFFF; --cta-sub:#A9CDBD; --cta-m:rgba(169,205,189,0.30); --plan-line:rgba(169,205,189,0.38); color-scheme:dark }

body{background:var(--bg); counter-reset:secao}
h1{font-size:clamp(46px,6.6vw,100px); letter-spacing:-0.045em; line-height:0.95}
h2{font-size:clamp(32px,3.8vw,56px); letter-spacing:-0.035em; line-height:1}
h3{letter-spacing:-0.015em}
.logo-l{display:var(--show-light)} .logo-d{display:var(--show-dark)}

/* rótulo numerado das seções: 01, 02, 03… (número em Cinza Técnico no claro, em Verde Grade no escuro).
   Sem número (bento, preço), o ::before sai de vez: senão o vão de 10 px do inline-flex empurra o texto para fora do eixo. */
.eyebrow{color:var(--fg); letter-spacing:0.14em}
.eyebrow::before{content:none; width:auto; height:auto; background:none; color:var(--num)}
.sec .sec-head .eyebrow::before,.sec .prose > .eyebrow::before{counter-increment:secao; content:counter(secao, decimal-leading-zero) " /"}
.pagehero .eyebrow::before,.hero .eyebrow::before{content:"—"}

/* botões e chips: retângulos de traço, sem sombra; botão é sempre Verde Milimetrado */
.btn{letter-spacing:0.01em}
.btn-main{box-shadow:none}
.btn-main:hover{transform:none; background:var(--verde-esc)}
.btn-ghost{box-shadow:inset 0 0 0 1.5px var(--line)}
.chip-ico{background:transparent; box-shadow:inset 0 0 0 1px var(--line); color:var(--fg)}
.chip-ico .ico{color:var(--fg)}
:focus-visible{outline-color:var(--accent)}

/* topo: filete Nanquim com os atalhos, cabeçalho branco com régua embaixo */
body::before{background:var(--util-bg)}
.util{background:var(--util-bg); color:var(--on-deep-muted); border-bottom:1px solid var(--rule-soft)}
.util a{color:var(--on-deep)}
.util a:hover{color:var(--grade)}
.util :focus-visible{outline-color:var(--grade)}
.head{background:var(--surface); border-bottom:1.5px solid var(--line)}
.menu > a:not(.btn),.menu summary{color:var(--fg); opacity:1}
.menu > a:not(.btn):hover,.menu summary:hover{color:var(--accent)}
.menu a[aria-current="page"]{color:var(--fg); box-shadow:inset 0 -2px 0 var(--accent)}
.drop .panel{top:calc(100% + 19px); box-shadow:none; border:1.5px solid var(--line); background:var(--surface)}
.drop .panel a:hover{background:var(--surface-2)}
.mob summary{color:var(--fg); box-shadow:inset 0 0 0 1.5px var(--line)}
.mob .panel{box-shadow:none; border-top:1px solid var(--rule-soft); border-bottom:1.5px solid var(--line)}
.mob .panel a:not(.btn){border-bottom-color:var(--rule-soft)}
.head :focus-visible,.hero :focus-visible,.pagehero :focus-visible{outline-color:var(--accent)}

/* capa: papel milimetrado da marca sobre branco, título enorme, resultado numa caixa de traço */
.hero,.pagehero{background-color:var(--surface); color:var(--fg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px; border-bottom:1.5px solid var(--line)}
.hero .map,.pagehero .map{display:none}
.hero .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr); align-items:end; padding-block:72px 64px}
.hero h1,.pagehero h1{color:var(--fg)}
.hero h1 em{color:var(--accent)}  /* Verde Milimetrado (no escuro, o verde claro da marca); decisão de 27/10 */
.hero .lead,.pagehero .lead{color:var(--muted)}
.hero .eyebrow,.pagehero .eyebrow{color:var(--fg)}
.pagehero .lead a,.pagehero a,.hero .lead a{color:var(--accent)}
.crumbs ol,.crumbs a{color:var(--muted)}
.addr label{color:var(--fg)}
.addr-row{background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--line)}
.addr-row input{color:var(--fg)}
.addr-row input::placeholder{color:var(--placeholder); opacity:1}
.addr-row input:focus-visible{outline-color:var(--accent)}
.addr small,.addr small a{color:var(--muted)}
.cep-resp{color:var(--fg)}
.cep-resp.ok::before{border-color:var(--fg)}
.ticks{color:var(--fg)}
.ticks > li::before{border-color:var(--fg)}
.ticks a{color:var(--fg)}
/* cartão do resultado: branco com moldura Nanquim; o valor estimado em Nanquim, marcado pela cota vermelha
   (linha de cota com os dois traços de chamada, como no desenho técnico). É o único vermelho fora do logo e das ilustrações
   (lote do mapa, sobre Nanquim, e gráfico de pontos). O marcador de dado pendente (.pend) fica tracejado em Cinza Técnico ou Verde Grade. */
.tag-val{box-shadow:none; border:1.5px solid var(--nanquim); margin-top:0; align-self:end}
.tag-val .v{color:var(--nanquim); justify-self:start; position:relative; padding-bottom:12px}
.tag-val .v::after{content:""; position:absolute; left:0; right:0; bottom:0; height:8px;
  border:solid var(--cota); border-width:0 1.5px; background:linear-gradient(var(--cota),var(--cota)) center/100% 1.5px no-repeat}
.pagehero .wrap{padding-block:64px 64px}
.ph-side .phone,.ph-doc,.ph-map{box-shadow:none; outline:1.5px solid var(--line); transform:none}
/* marcador de dado pendente: sobre fundo Nanquim (filete do topo, faixas escuras, preço, chamada final) vai em Verde Grade */
.util,.sec.deep,.plan,.cta{--pend:#A9CDBD}

/* faixa de confiança: régua de largura total embaixo, células divididas por filete, texto alinhado à coluna da capa */
.float{margin-top:0; background:var(--surface); border-bottom:1.5px solid var(--line)}
.float-in{box-shadow:none; background:transparent}
.float .it{padding-block:28px 30px}
.float .it:first-child{padding-left:0}
.float .it:last-child{padding-right:0}
.float .it + .it{border-left:1px solid var(--line)}
.float .it:nth-child(n+3){border-top-color:var(--line)}

/* seções: Papel e branco alternados, separados por régua; Nanquim (com o milimetrado) no relatório e no público */
.sec{padding-block:96px; background:var(--bg)}
.sec.white{background:var(--surface)}
.sec:not(.white):not(.deep){--surface-2:var(--surface)}
.sec + .sec{border-top:1.5px solid var(--line)}
.sec.deep{border-top:1.5px solid var(--line); background-color:var(--nanquim);
  background-image:linear-gradient(var(--deep-grid) 1px,transparent 1px),linear-gradient(90deg,var(--deep-grid) 1px,transparent 1px);
  background-size:24px 24px}
.sec.deep .eyebrow{color:var(--on-deep)}
.sec.deep .eyebrow::before{color:var(--grade)}
.sec.deep :focus-visible,.plan :focus-visible{outline-color:var(--grade)}
.sec.deep .btn-light,.plan .btn-light{background:var(--verde); color:#FFFFFF}
.sec.deep .btn-light:hover,.plan .btn-light:hover{background:var(--verde-esc)}
.head-row{border-bottom:1px solid var(--rule-soft); padding-bottom:28px}

/* bento: grade única com bordas compartilhadas; a ilustração fica no tom alternado da seção */
.bento{gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line)}
.tile,.sec.white .tile{background:transparent; box-shadow:none; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.tile .vis,.sec.white .tile .vis{background:var(--surface-2); border-bottom:1px solid var(--line)}
.paperdoc{box-shadow:none; outline:1px solid var(--rule-soft); transform:none}
.minimap .pin{box-shadow:none}

/* listas e cartões: régua no lugar de sombra */
.reg li{border-top:1px solid var(--line)}
.reg li::before{color:var(--num)}
.card,a.card{box-shadow:none; border:1px solid var(--line); background:transparent}
a.card:hover{transform:none; box-shadow:none; background:var(--surface-2)}
.card.no{box-shadow:none; border:1px solid var(--rule-soft)}
.timeline li::before{box-shadow:inset 0 0 0 1.5px var(--line); background:var(--bg); color:var(--fg)}
.sec.white .timeline li::before{background:var(--surface)}
/* último passo cheio em Nanquim (Verde Grade no escuro), não em verde: não é botão */
.timeline li:last-child::before,.sec.white .timeline li:last-child::before{background:var(--line); color:var(--surface)}
.timeline li::after{background:var(--line)}
/* celulares de exemplo com contorno de traço: no claro some no corpo Nanquim; no escuro separa o corpo do fundo */
.phone{box-shadow:none; outline:1.5px solid var(--line)}
/* "Passo 1"… em maiúsculas, como os outros rótulos em Barlow Condensed (o texto não muda) */
.sn{color:var(--num); text-transform:uppercase}
.light .parts li::before{box-shadow:inset 0 0 0 1.5px var(--line); color:var(--fg)}
.check li::before{border-color:var(--fg)}
.soon{color:var(--fg); box-shadow:inset 0 0 0 1px var(--line)}
/* hora das mensagens no Cinza Técnico: 5,6:1 no balão verde-claro (o tom da base dava 4,3:1) */
.msg time{color:var(--cinza)}
.promise > div{box-shadow:none; background:transparent; border-top:1px solid var(--line); padding-inline:0}
.promise{gap:0}
.plan{box-shadow:inset 0 0 0 1px var(--plan-line); border-top:6px solid var(--grade)}
.tbl{box-shadow:none; border:1.5px solid var(--line); background:var(--surface)}
.tbl th,.tbl td{border-bottom-color:var(--rule-soft)}
/* coluna MetroValor: cabeçalho cheio em Nanquim (Verde Grade no escuro) e filetes da mesma cor; "Sim" em Nanquim */
.tbl thead th.us{background:var(--line); color:var(--surface)}
.tbl td.us{box-shadow:inset 1.5px 0 0 var(--line), inset -1.5px 0 0 var(--line)}
.tbl tbody tr:last-child td.us{box-shadow:inset 1.5px 0 0 var(--line), inset -1.5px 0 0 var(--line), inset 0 -1.5px 0 var(--line)}
.tbl .y{color:var(--fg)}
.faq{box-shadow:none; background:transparent; border-top:1.5px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{padding-left:0}
.faq details > div{padding-left:0}
.citycheck,.sec.white .citycheck{box-shadow:none; background:transparent; border:1.5px solid var(--line)}
.citycheck input{box-shadow:inset 0 0 0 1.5px var(--line)}
.answer{background:var(--surface-2); box-shadow:inset 3px 0 0 var(--line)}
.cchips li{box-shadow:inset 0 0 0 1px var(--line); background:transparent}
.clist details{box-shadow:inset 0 0 0 1px var(--line); background:transparent}
.panel-w{box-shadow:none; border:1.5px solid var(--line); background:var(--surface)}
.sec.white .panel-w{background:transparent}
.svis{box-shadow:none; border:1px solid var(--line); background:var(--surface-2)}
.srow{border-top-color:var(--line)}
.mock-rel{box-shadow:none; outline:1.5px solid var(--line); transform:none}
.pages img{box-shadow:none; outline:1.5px solid var(--line)}
.aud a{background:transparent; box-shadow:inset 0 0 0 1px rgba(169,205,189,0.38)}
.aud a:hover{background:rgba(169,205,189,0.06); box-shadow:inset 0 0 0 1px var(--grade)}
.portrait .ph{background-color:var(--nanquim)}

/* relatório em leque: folhas retas, uma sobre a outra, com filete no lugar da sombra */
.fan{aspect-ratio:1/1.2}
.fan img{box-shadow:none; outline:1.5px solid var(--nanquim)}
.fan .p2,.fan .p1{transform:none}
.fan:hover .p1{transform:translateY(-6px)}

/* chamada final: Nanquim com o botão Verde Milimetrado; o M² vazado em Verde Grade */
.cta{background:var(--cta-bg); color:var(--cta-fg); border-top:1.5px solid var(--line)}
.cta h2{color:var(--cta-fg)}
.cta p{color:var(--cta-sub)}
.cta .btn-light{background:var(--verde); color:#FFFFFF}
.cta .btn-light:hover{background:var(--verde-esc)}
.cta-m svg path,.cta-m svg rect{stroke:var(--cta-m)}
/* o M² vazado termina na margem direita da grade (1296 a 1440): o quadrado fica a 52/256 da borda do desenho (≈ 76 px a 380 px) */
.cta-m{right:max(calc(var(--gut-r) - 76px), calc(50% - 652px))}
.cta :focus-visible{outline-color:var(--grade)}

/* rodapé: Papel, colunas com régua em cima (a grade aparece), linha de base em filete */
.foot{background:var(--bg); color:var(--muted); padding-block:56px 40px}
.foot .grid > div{border-top:1.5px solid var(--line); padding-top:18px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--accent)}
.foot-h{color:var(--fg)}
.foot .base{border-top-color:var(--rule-soft)}
.foot :focus-visible{outline-color:var(--accent)}

/* grade comum: as seções de duas colunas dividem a largura em metades iguais com vão de 64 px,
   e a segunda coluna cai sempre na mesma linha (752 a 1440, a mesma da lista numerada .reg) */
@media (min-width: 901px){
  .how,.report,.price,.cities,.faqwrap,.srow,.split{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:64px}
  .how > .phone{justify-self:start}
  /* quem assina: o retrato ocupa uma coluna das quatro e o texto começa na linha seguinte (448 a 1440) */
  .signer{grid-template-columns:minmax(0,calc((100% - 192px) / 4)) minmax(0,1fr); column-gap:64px}
}
/* bento: duas metades iguais; a divisória fica no meio do vão de 64 px e o texto, a 32 px dela, cai na linha da grade */
@media (min-width: 1101px){
  .t-doc,.t-fotos,.t-local,.t-merc{grid-column:span 6}
}
@media (min-width: 601px){
  .tile .txt{padding-inline:32px}
  /* miniaturas do relatório nas mesmas colunas da lista de baixo (.parts: vão de 40 px, largura toda) */
  .pages{max-width:none; column-gap:40px}
}
.pages a{align-content:start}

/* páginas de leitura (dúvidas, termos, privacidade, verificar): a coluna pende da margem esquerda,
   com a medida de três colunas da grade (848 px), em vez de ficar centralizada */
.wrap.narrow{max-width:var(--wrap)}
.wrap.narrow > *{max-width:848px}
.acts.center{justify-content:flex-start}
.tap{text-align:left}

@media (max-width: 1100px){
  /* faixa de confiança em 2 colunas: a coluna da esquerda encosta na margem, sem filete à esquerda */
  .float .it:nth-child(odd){padding-left:0; border-left:0}
  .float .it:nth-child(even){padding-right:0}
}
@media (max-width: 900px){
  .hero .wrap{grid-template-columns:1fr; padding-block:48px 48px}
  .tag-val{justify-self:start}
}
@media (max-width: 600px){
  h1{font-size:clamp(40px,11vw,56px)}
  .hero .wrap{padding-block:36px 40px}
  /* cabeçalho do celular: botão e menu com a mesma altura (44 px, alvo de toque) */
  .hcta{height:44px; padding:0 16px}
  .mob summary{line-height:24px; padding:10px 14px}
  .float .it{padding:20px 16px 22px}
  .float .it:nth-child(odd){padding-left:0}
  .float .it:nth-child(even){padding-right:0; border-left:1px solid var(--line)}
  .float .it:nth-child(n+3){border-top:1px solid var(--line)}
  .sec{padding-block:64px}
  .tbl{border:0}
  .tbl tbody tr{background:var(--surface); box-shadow:inset 0 0 0 1px var(--line)}
  .tbl td.us::before{color:var(--fg)}
  /* botões do relatório empilhados com a mesma largura, como o da chamada final */
  .acts.center .btn{width:100%}
  .foot{padding-top:44px}
}