/* ============================================================
   Guia «Comprar casa na Suíça» — extras bg-*
   Assenta no bloco .guide do site (site/assets/site.css, «Guia
   (artigo educativo)») e nos tokens Neo v1.3 (tema Ice). As
   classes base vêm do guia do imobiliário (rg.css), com prefixo
   bg-; acrescenta caixas de aviso, listas de verificação e a
   comparação casa nova / casa usada.
   ============================================================ */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
.guide section{scroll-margin-top:16px}
/* no site há a nav fixa (65 px): a secção para por baixo dela, como o .prose */
.nav ~ .guide section{scroll-margin-top:84px}
.guide h3{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:26px 0 10px;text-wrap:balance}
.guide h2{text-wrap:balance}
.guide a{color:var(--primary-text)}

/* número da secção no h2 — véu do acento, flat (como .step-n do site) */
.bg-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 8px;margin-right:12px;vertical-align:3px;
  border-radius:999px;background:var(--tint);color:var(--primary-text);
  font:600 14px/1 var(--font-mono);letter-spacing:0;
}

/* índice — um só cartão em relevo, duas colunas */
.bg-toc{
  margin:30px 0 8px;padding:20px 22px;border-radius:var(--r-lg);
  background:var(--face);box-shadow:var(--raise-sm);
}
.bg-toc-h{font:700 12px/1 var(--font-ui)!important;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 12px!important}
/* colunas (e não grelha): a numeração lê-se de cima para baixo */
.bg-toc ol{margin:0;padding:0;list-style:none;counter-reset:bg;column-count:2;column-gap:28px}
.bg-toc li{counter-increment:bg;margin:0;font-size:15px;line-height:1.5;break-inside:avoid}
.bg-toc a{
  display:flex;gap:10px;align-items:baseline;padding:5px 0;
  color:var(--ink);text-decoration:none;font-weight:600;
}
.bg-toc a::before{
  content:counter(bg);min-width:20px;text-align:right;
  font:600 13px/1 var(--font-mono);color:var(--primary-text);
}
.bg-toc a:hover{color:var(--primary-text);text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.bg-toc ol{column-count:1}}

/* etiquetas: a força de cada regra */
.bg-tag{
  --c:var(--muted);
  display:inline-block;vertical-align:1px;margin-left:4px;white-space:nowrap;
  padding:3px 8px;border-radius:999px;
  font:700 10.5px/1.2 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  background:color-mix(in srgb,var(--c) 15%,var(--bg));
  color:color-mix(in srgb,var(--c) 58%,var(--ink));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent);
}
.bg-law{--c:var(--primary)}
.bg-sba{--c:var(--data-2)}
.bg-bank{--c:var(--data-6)}
.bg-thumb{--c:var(--muted)}
.bg-legend{list-style:none;padding:0!important;display:grid;gap:8px}
/* etiqueta numa coluna própria: os textos começam todos na mesma linha */
.bg-legend li{margin:0!important;display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:baseline}
.bg-legend .bg-tag{margin:0;justify-self:start}
@media (max-width:480px){.bg-legend li{grid-template-columns:minmax(0,1fr);gap:4px}}

/* as regras em números: dois blocos separados — a entrada (dinheiro real) e
   o teste do banco (a taxa de esforço teórica) */
.bg-rgroup{
  margin:22px 0 0;padding:22px;border-radius:var(--r-lg);
  background:var(--face);box-shadow:var(--raise-sm);
}
.bg-rgroup + .bg-rgroup{margin-top:16px}
.guide .bg-rgroup h3{margin:0 0 6px}
.guide .bg-rgroup .bg-rgroup-p{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.bg-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.bg-rules > div{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.bg-rules b{font:700 30px/1 var(--font-mono);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.bg-rules span:not(.bg-tag){font-size:14px;line-height:1.45;color:var(--muted)}
.bg-rules .bg-tag{margin:auto 0 0}
.guide .bg-rgroup .bg-rgroup-f{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line)}
@media (max-width:640px){.bg-rgroup{padding:18px}.bg-rules{gap:20px 16px}.bg-rules b{font-size:26px}}
.guide .bg-asof{font:500 13.5px/1.5 var(--font-ui);color:var(--muted);margin-top:14px}

/* título curto por cima de uma tabela de exemplo */
.guide .bg-ex-h{font:700 14.5px/1.4 var(--font-ui);color:var(--ink);margin:22px 0 0}

/* tabelas com texto: alinhado à esquerda, com quebra de linha */
/* tabela de prosa: sem largura mínima, a coluna de texto quebra em vez de rolar */
.guide-table table.bg-text{min-width:0}
.bg-text th{text-align:left!important}
.bg-text td{vertical-align:top}
.guide-table td.bg-wrap{white-space:normal;text-align:left;font:500 14px/1.55 var(--font-ui)}
/* a 1.ª coluna também quebra: no telemóvel a tabela cabe sem deslizar */
.guide-table .bg-text td:first-child{white-space:normal;width:38%}
@media (max-width:480px){.bg-text th,.bg-text td{padding:12px 12px}}
/* duas colunas (texto | número): o texto quebra, o número fica sempre à vista */
.guide-table table.bg-kv{min-width:0}
.guide-table .bg-kv td:first-child{white-space:normal}
.guide-table .bg-kv td + td{vertical-align:top}
@media (max-width:480px){.bg-kv th,.bg-kv td{padding:12px 12px}}
.guide-table table.bg-gloss{min-width:0}
.bg-gloss th,.bg-gloss td{text-align:left!important;white-space:normal!important}
/* no telemóvel, uma palavra por bloco: português em cima, DE e FR por baixo
   (as palavras compostas alemãs não cabem em três colunas) */
@media (max-width:480px){
  .guide-table table.bg-gloss,.bg-gloss tbody,.bg-gloss tr{display:block}
  .bg-gloss thead{display:none}
  .bg-gloss tr{padding:11px 14px;border-bottom:1px solid var(--line)}
  .bg-gloss tbody tr:last-child{border-bottom:0}
  .guide-table .bg-gloss td{display:block;padding:1px 0;border:0}
  .bg-gloss td + td::before{
    content:"DE";display:inline-block;width:30px;
    font:700 10.5px/1 var(--font-ui);letter-spacing:.06em;color:var(--muted);
  }
  .bg-gloss td + td + td::before{content:"FR"}
}
.bg-gloss td{font:500 14px/1.4 var(--font-ui)!important}
.bg-gloss td:first-child{font-weight:600!important}
.bg-gloss td + td{color:var(--muted)}

/* a compra, passo a passo */
.guide .bg-steps{list-style:none;padding:0;margin:6px 0 14px;counter-reset:st;display:grid;gap:14px}
.guide .bg-steps li{
  counter-increment:st;position:relative;margin:0;padding-left:48px;min-height:30px;
}
.guide .bg-steps li::before{
  content:counter(st);position:absolute;left:0;top:1px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--tint);color:var(--primary-text);
  font:600 14px/1 var(--font-mono);
}

.guide .bg-sources{margin-top:14px}

/* ── extras deste guia ── */

/* caixa de destaque: a fórmula rápida, um cuidado, uma pergunta a fazer.
   Mesma linguagem do aviso do topo: face com véu e sombra para dentro. */
.bg-box{
  --c:var(--primary);
  margin:18px 0 16px;padding:16px 18px 4px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--c) 8%,var(--face));
  box-shadow:var(--inset-sm);
  border-left:3px solid color-mix(in srgb,var(--c) 70%,transparent);
}
.bg-box.bg-warn{--c:var(--warning)}
.bg-box > .bg-box-h{
  font:700 12px/1.2 var(--font-ui)!important;letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c) 55%,var(--ink))!important;margin:0 0 8px!important;
}
.bg-box p,.bg-box li{font-size:15px}
.bg-box ul{margin-bottom:10px}
/* fórmula: números alinhados, sem quebra estranha */
.bg-f{font:600 15px/1.5 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}

/* lista de verificação: um visto em vez da bolinha */
.guide .bg-check{list-style:none;padding-left:0}
.guide .bg-check li{position:relative;padding-left:30px}
.guide .bg-check li::before{
  content:"";position:absolute;left:2px;top:.42em;width:16px;height:16px;border-radius:5px;
  box-shadow:inset 0 0 0 1.6px color-mix(in srgb,var(--primary) 60%,var(--muted));
  background:
    no-repeat center/11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.9 9 9.8 3.4' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* sinais de alarme: um ponto de exclamação discreto */
.guide .bg-alarm{list-style:none;padding-left:0}
.guide .bg-alarm li{position:relative;padding-left:30px}
.guide .bg-alarm li::before{
  content:"!";position:absolute;left:2px;top:.36em;width:18px;height:18px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font:800 11.5px/1 var(--font-ui);
  background:color-mix(in srgb,var(--negative) 14%,var(--bg));
  color:color-mix(in srgb,var(--negative) 70%,var(--ink));
}

/* casa nova contra casa usada: dois cartões lado a lado */
.bg-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0 16px}
.bg-two > div{padding:16px 18px 6px;border-radius:var(--r-lg);background:var(--face);box-shadow:var(--raise-sm)}
.bg-two h4{margin:0 0 8px;font:700 15px/1.3 var(--font-ui);color:var(--ink)}
.bg-two ul{padding-left:18px}
.bg-two li{font-size:14.5px;line-height:1.6}
@media (max-width:600px){.bg-two{grid-template-columns:minmax(0,1fr)}}