/* ══════════════════════════════════════════════════════════════
   MARKETPLACE — a página principal (seção #inicio)
   Carregado DEPOIS de style.css: sobrescreve navbar, faixa de
   indicadores e a home. Não toca nas seções de pilar.

   Regra que governa tudo: o dado é o produto; a calculadora é a
   interface do dado. Nada compete visualmente com o número.
   ══════════════════════════════════════════════════════════════ */

:root{
  --mk-t900:#0B2545;  --mk-t700:#274060;  --mk-t500:#5C6B82;
  --mk-t200:#C7CEDA;  --mk-t100:#E3E7EE;
  --mk-papel:#F7F5F0;              /* off-white quente, nunca branco */
  --mk-dado:#FFFFFF;
  --mk-ouro:#8F6207;               /* texto: 4,92:1 no papel */
  --mk-ouro-luz:#F0C040;           /* filete e realce, nunca texto */
  --mk-reforma:#8C3A12;  --mk-imoveis:#1D4E4A;
  --mk-financas:#4B3A66; --mk-leiloes:#7A4A05;
  --mk-ganho:#1E6B4F;
  --mk-max:1180px;
}

[data-theme="dark"]{
  --mk-t900:#EEF1F6;  --mk-t700:#C3CCDA;  --mk-t500:#8E9CB2;
  --mk-t200:#2C3A52;  --mk-t100:#1B2740;
  --mk-papel:#0E1626;
  --mk-dado:#141F33;
  --mk-ouro:#E0AC3C;
  --mk-ganho:#4FB98A;
}

/* ── TOPBAR (reaproveita a .navbar existente) ──────────────── */
.navbar{
  background:#0B2545 !important;
  box-shadow:none !important;
  border-bottom:0 !important;
  padding:0 !important;
  min-height:52px;
}
.navbar-container{
  max-width:var(--mk-max) !important;
  height:52px;
  padding:0 22px !important;
  gap:18px;
}
.navbar-brand{background:none !important;border:0 !important;padding:0 !important}
.navbar-brand .brand-logo{height:26px !important;width:auto}
.navbar-menu a{
  font-size:13px !important;font-weight:500 !important;
  color:rgba(255,255,255,.72) !important;
  padding:6px 11px !important;border-radius:2px !important;
  text-transform:none !important;letter-spacing:0 !important;
}
.navbar-menu a:hover{background:rgba(255,255,255,.09) !important;color:#fff !important}
.navbar-menu a.active{
  background:rgba(255,255,255,.13) !important;color:#fff !important;
  border:0 !important;
}
.navbar-menu a:focus-visible{outline:2px solid var(--mk-ouro-luz);outline-offset:1px}

/* ── Alternador de tema ────────────────────────────────────────
   Era um círculo de 50px fixo no canto inferior esquerdo, por cima
   do texto do índice. Vira um controle discreto na topbar: o tema é
   preferência, não ação principal. */
.theme-toggle{
  position:fixed !important;
  top:13px !important; bottom:auto !important;
  left:auto !important; right:22px !important;
  width:26px !important; height:26px !important;
  border-radius:2px !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:26px !important;
  box-shadow:none !important;
  z-index:1001 !important;
  transition:background .14s !important;
}
.theme-toggle:hover{background:rgba(255,255,255,.2) !important;transform:none !important}
.theme-toggle:active{transform:none !important}
.theme-toggle:focus-visible{outline:2px solid var(--mk-ouro-luz);outline-offset:1px}
.navbar-container{padding-right:60px !important}

/* O balão do chat cobria a última linha do índice. */
#inicio.tool-section.active{padding-bottom:92px !important}

/* ── FAIXA DE DADO VIVO ────────────────────────────────────── */
.indicadores-bar{
  background:var(--mk-dado) !important;
  border-bottom:1px solid var(--mk-t200) !important;
  color:var(--mk-t900) !important;
  padding:0 !important;
  font-size:inherit !important;
  display:block !important;
  overflow-x:auto;
}
.indicadores-bar .ind-sep{display:none}
.indicadores-bar{
  max-width:none;
}
#pf-indicadores-bar{
  display:flex !important;align-items:stretch;
  max-width:var(--mk-max);margin:0 auto;padding:0 22px;
}
.ind-item{
  flex:1 0 auto;min-width:132px;
  padding:8px 18px 9px 0;margin-right:18px;
  border-right:1px solid var(--mk-t100);
  display:flex !important;flex-direction:column;gap:0 !important;
}
.ind-item:last-of-type{border-right:0}
.ind-label{
  font-size:10.5px !important;font-weight:600 !important;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--mk-t500) !important;
}
.ind-valor{
  font-family:'IBM Plex Mono',ui-monospace,monospace !important;
  font-variant-numeric:tabular-nums;
  font-size:16px !important;font-weight:600 !important;
  letter-spacing:-.02em;color:var(--mk-t900) !important;
}
.ind-fonte{
  align-self:center;font-size:10.5px !important;
  color:var(--mk-t500) !important;font-style:normal !important;
  padding-left:4px;
}

/* ── A HOME ────────────────────────────────────────────────── */
#inicio.tool-section{
  display:none;
}
#inicio.tool-section.active{
  display:block !important;
  background:var(--mk-papel);
  padding:0 !important;
  max-width:none !important;
  margin:0 !important;
  box-shadow:none !important;
  border:0 !important;
}
body:has(#inicio.active){background:var(--mk-papel)}

.mk{max-width:var(--mk-max);margin:0 auto;padding:0 22px}
.mk-num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

.mk-abre{padding-top:44px}
#inicio h1.mk-h1{
  margin:0 0 30px !important;
  font-size:24px !important;font-weight:400 !important;line-height:1.35 !important;
  letter-spacing:-.011em;max-width:62ch;color:var(--mk-t700) !important;
  text-align:left !important;
}
#inicio h1.mk-h1 b{font-weight:600;color:var(--mk-t900)}

/* cobertura */
.mk-cob{display:flex;flex-wrap:wrap;
  border-top:1px solid var(--mk-t200);border-bottom:1px solid var(--mk-t200)}
.mk-cob>div{flex:1 1 190px;padding:15px 22px 16px;border-right:1px solid var(--mk-t100)}
.mk-cob>div:last-child{border-right:0}
.mk-cob-n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;
  font-size:29px;font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--mk-t900)}
.mk-cob-l{font-size:13px;font-weight:500;margin-top:5px;color:var(--mk-t900)}
.mk-cob-j{font-size:11.5px;color:var(--mk-t500);margin-top:2px}

/* três portas */
.mk-portas{display:grid;grid-template-columns:repeat(3,1fr)}
.mk-porta{
  padding:20px 22px 22px;border-right:1px solid var(--mk-t100);
  border-bottom:1px solid var(--mk-t200);
  text-decoration:none;display:block;cursor:pointer;
  transition:background .14s;
}
.mk-porta:last-child{border-right:0}
.mk-porta:hover{background:var(--mk-dado)}
.mk-porta:focus-visible{outline:2px solid var(--mk-t900);outline-offset:-2px}
.mk-porta-r{height:3px;width:34px;margin-bottom:13px;background:var(--c)}
.mk-porta-t{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--mk-t900)}
.mk-porta-s{font-size:11.5px;color:var(--mk-t500);margin:2px 0 11px}
.mk-porta ul{margin:0;padding:0;list-style:none}
.mk-porta li{font-size:13px;color:var(--mk-t700);padding:2.5px 0;line-height:1.4}
.mk-porta li::before{content:"— ";color:var(--mk-t200)}
.mk-porta-go{font-size:12.5px;font-weight:600;color:var(--mk-ouro);margin-top:11px;display:inline-block}

/* índice */
.mk-idx{padding-top:34px}
.mk-idx-h{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:3px}
.mk-idx-t{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--mk-t900)}
.mk-dens{display:flex;border:1px solid var(--mk-t200);border-radius:2px;overflow:hidden}
.mk-dens button{
  font:inherit;font-size:11.5px;font-weight:500;color:var(--mk-t700);
  background:var(--mk-dado);border:0;border-right:1px solid var(--mk-t200);
  padding:4px 11px;cursor:pointer;transition:background .14s,color .14s;
}
.mk-dens button:last-child{border-right:0}
.mk-dens button:hover{background:var(--mk-t100)}
.mk-dens button[aria-pressed=true]{background:var(--mk-t900);color:var(--mk-papel)}
.mk-dens button:focus-visible{outline:2px solid var(--mk-ouro-luz);outline-offset:-2px}

.mk-pan{border-top:1px solid var(--mk-t200);padding:17px 0 20px}
.mk-pan-h{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.mk-pan-r{width:3px;height:15px;background:var(--c);flex:none}
.mk-pan-n{font-size:12px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--mk-t900)}
.mk-pan-c{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;
  font-weight:500;color:var(--mk-t500)}

.mk-lista{columns:2;column-gap:40px;margin:0;padding:0;list-style:none}
.mk-lista li{break-inside:avoid}
.mk-lista a{
  display:block;height:26px;line-height:26px;font-size:13.5px;color:var(--mk-t700);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:1px solid transparent;transition:color .12s,border-color .12s;cursor:pointer;
}
.mk-lista a:hover{color:var(--mk-t900);border-bottom-color:var(--mk-t200)}
.mk-lista a:focus-visible{outline:2px solid var(--mk-t900);outline-offset:-2px}
.mk-lista b{font-weight:600;color:var(--mk-t900)}
.mk-lista i{font-style:normal;color:var(--mk-t500)}
.mk-desc{display:none}

#inicio[data-d=confortavel] .mk-lista a{height:34px;line-height:34px}
#inicio[data-d=tudo] .mk-lista{columns:1}
#inicio[data-d=tudo] .mk-lista a{height:auto;line-height:1.45;padding:5px 0;white-space:normal}
#inicio[data-d=tudo] .mk-desc{display:block;font-size:11.5px;color:var(--mk-t500);line-height:1.4}

/* tabelas de referência — a profundidade regulatória virando navegação */
.mk-ref{margin-top:14px;padding-top:13px;border-top:1px solid var(--mk-t100)}
.mk-ref-t{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mk-t500);margin-bottom:6px}
.mk-ref-l{display:flex;flex-wrap:wrap;gap:0 18px}
.mk-ref-l span{font-size:12.5px;color:var(--mk-t700);line-height:22px;
  border-bottom:1px solid var(--mk-t200)}

/* prova */
.mk-prova{padding-top:34px;padding-bottom:52px}
.mk-prova-g{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;
  border-top:1px solid var(--mk-t200);padding-top:24px}
.mk-prova h2{font-size:15px !important;font-weight:600 !important;margin:0 0 7px !important;
  letter-spacing:-.01em;color:var(--mk-t900) !important;text-align:left !important}
.mk-prova p{font-family:'IBM Plex Serif',Georgia,serif;font-size:14.5px;line-height:1.6;
  color:var(--mk-t700) !important;margin:0 0 12px;max-width:56ch}
.mk-prova ul{font-family:'IBM Plex Serif',Georgia,serif;font-size:14px;line-height:1.65;
  color:var(--mk-t700);margin:0;padding-left:19px}
.mk-prova li{margin-bottom:3px}

.mk-selo{background:var(--mk-dado);border:1px solid var(--mk-t200);border-radius:3px;padding:16px 18px}
.mk-selo-k{font-size:11px;font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  color:var(--mk-t500);line-height:1.5}
.mk-selo-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:7px 0 8px}
.mk-selo-v{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;
  font-size:26px;font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--mk-t900)}
.mk-selo-d{font-size:13px;font-weight:600;color:var(--mk-ganho);
  font-family:'IBM Plex Mono',ui-monospace,monospace}
.mk-selo-f{font-size:11.5px;color:var(--mk-t500);line-height:1.5;
  padding-top:8px;border-top:1px solid var(--mk-t100)}

@media(max-width:900px){
  .mk-portas{grid-template-columns:1fr}
  .mk-porta{border-right:0}
  .mk-prova-g{grid-template-columns:1fr;gap:22px}
}
@media(max-width:640px){
  .mk{padding:0 16px}
  .navbar-container{padding:0 52px 0 16px !important}
  .mk-lista{columns:1}
  .mk-cob>div{flex-basis:50%}

  .mk-h1{font-size:20px !important;margin-bottom:22px !important}
  .mk-abre{padding-top:26px}
  .mk-cob-n{font-size:24px}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}

/* Índices (Selic/CDI/IPCA/Poupança): grade centralizada de 4 colunas, sempre
   visíveis, sem scroll horizontal. Consolidado em uma única regra (Regra 87 —
   três blocos responsivos diferentes competiam pela mesma faixa de largura
   e o de scroll horizontal, por vir depois com !important, sempre vencia,
   cortando o Selic pela metade). */
@media (max-width:768px){
  .mk{padding:0 4px; max-width:100%; box-sizing:border-box;}
  #pf-indicadores-bar{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px 4px;
    max-width:100%;
    margin:0 auto;
    box-sizing:border-box;
    overflow-x:visible;
    align-items:center;
  }
  .ind-item{
    min-width:0;
    padding:8px 6px;
    margin-right:0;
    border-right:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .ind-label{font-size:11px}
  .ind-valor{font-size:14px !important}
  /* Fonte/API item at end may overflow or be hidden on very small screens */
  .ind-fonte{font-size:10px; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

/* Hide the source/API element on ultra-small screens to preserve the 4 indices */
@media (max-width:360px){
  .ind-fonte{display:none}
}