/* ══════════════════════════════════════════════════════════════
   ESTIMEI — home-portas.css
   Refinos da Home orientada à decisão (DEV-06D, 4 portas): aprovados pelo
   Celso em 05/10/2026, depois de 5 rodadas no protótipo. Carregado POR
   ÚLTIMO no index.html (depois de ad-slots.css), para vencer a cascata
   dos arquivos acima sem !important — mesma ordem testada no protótipo.
   ══════════════════════════════════════════════════════════════ */

/* ── Refino 1: busca, fluxo, cards, celular e adoção ── */

/* 2. Busca: título e subtítulo centralizados, para a busca compacta
   (540px) ficar de fato centralizada logo abaixo do subtítulo. */
#inicio .mk-abre{text-align:center}
#inicio h1.mk-h1{text-align:center !important;margin-left:auto !important;margin-right:auto !important}
#inicio .mk-sub{margin-left:auto;margin-right:auto}
.hero-search-wrapper{text-align:left}

/* 1. Fluxo: passo inteiro nunca quebra no meio; seta mais clara e fina. */
.fluxo-passos .passo{white-space:nowrap}
.fluxo-passos .seta{color:var(--mk-t400);opacity:1;margin:0 3px}

/* 3. Cards: cantos um pouco mais arredondados; linhas alinhadas entre os
   4 cards (subgrid) — botões na mesma base e com a mesma altura, mesmo
   quando o rótulo quebra em 2 linhas. */
.porta-card{border-radius:10px}
.btn-porta{border-radius:6px}
@supports (grid-template-rows:subgrid){
  .portas-decisao-grid{grid-auto-rows:auto}
  .porta-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;height:auto}
  .porta-card-cta{align-self:stretch;display:flex;margin-top:0}
  .porta-card-cta .btn-porta{height:100%}
}
/* Rótulo cabe em 1 linha na largura de 4 colunas; se quebrar (telas de
   981–1150px), quebra equilibrado e o subgrid iguala a altura dos 4. */
.btn-porta{padding:11px 10px;gap:6px;text-wrap:balance}
/* Elevação só em quem tem mouse (no toque o card ficava "levantado"
   depois do clique) e sem movimento para quem pede menos animação. */
@media (hover:none){
  .porta-card:hover,[data-theme="dark"] .porta-card:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .porta-card,.btn-porta-seta{transition:none}
  .porta-card:hover,[data-theme="dark"] .porta-card:hover{transform:none}
}
.porta-card:focus-within{border-color:var(--mk-ouro-luz)}

/* 4. Celular: cards mais baixos para as 4 portas caberem em ~1 tela. */
@media (max-width:640px){
  .porta-card{padding:12px 14px;border-radius:8px}
  .porta-card-header{margin-bottom:6px}
  .porta-badge-pilar{display:none}            /* o filete colorido do topo já identifica o hub */
  .porta-card-titulo{font-size:15px}
  .porta-card-fluxo{margin-bottom:6px}
  .fluxo-tag{display:none}                    /* a setinha já diz que é um fluxo */
  .porta-card-texto{margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .btn-porta{min-height:40px;padding:8px 12px}
}

/* 5. Adoção: sem caixa nem borda — texto centrado, integrado à faixa de
   métricas logo abaixo; notas das métricas maiores no celular. */
.prova-ticker{background:transparent;border:0;border-radius:0;margin:20px 0 4px}
/* Celular: altura fixa de 2 linhas (sem CLS na troca de slide), para a
   frase inteira caber com o "quando aplicável" em vez de ser cortada. */
@media (max-width:600px){
  .prova-ticker{height:52px}
  .prova-ticker-slide{height:52px;white-space:normal;flex-wrap:wrap;text-align:center;line-height:1.4;row-gap:0}
}
@media (max-width:640px){
  .mk-cob-j{font-size:13px !important;line-height:1.45 !important}
  .mk-cob-prox{font-size:12px !important;line-height:1.4 !important}
}

/* ── Refino 2 ── */
/* Fluxo: linha contínua de etapas, chevron fino desenhado em CSS */
.porta-card-fluxo{margin-bottom:12px;padding-top:10px;border-top:1px solid var(--mk-t100)}
.fluxo-passos{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;font-size:11.5px;line-height:1.3;
  color:var(--mk-t700);letter-spacing:.005em}
.fluxo-passos .passo{font-weight:500;white-space:nowrap}
.fluxo-passos .etapa{white-space:nowrap;display:inline-flex;align-items:center}
.fluxo-passos .passo.destaque{font-weight:700;color:var(--mk-t900)}
.fluxo-passos .seta{display:inline-block;margin:0 8px;font-size:12px;line-height:1;color:var(--mk-ouro);
  opacity:.7;transform:translateY(-1.5px)}
.fluxo-passos{row-gap:5px}
@media (max-width:640px){
  .porta-card-fluxo{padding-top:8px;margin-bottom:8px}
  .fluxo-passos{font-size:11px}
}
/* Métricas: legenda única, um pouco mais presente */
.mk-cob-l{font-size:13.5px;margin-top:7px;color:var(--mk-t700)}
/* Elevação dos 4 cards ao passar o mouse — um pouco mais marcada */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .porta-card:hover{transform:translateY(-5px);
    box-shadow:0 14px 30px -8px rgba(10,37,64,.18),0 4px 10px -4px rgba(10,37,64,.08)}
  [data-theme="dark"] .porta-card:hover{box-shadow:0 14px 30px -8px rgba(0,0,0,.6)}
}
/* Aba Financiamento: ícone de casa maior e claro sobre a aba ativa */
.sr-tab .icone-svg{width:1.15em;height:1.15em}
.sr-tab.active .icone-svg{color:var(--mk-ouro-luz)}

/* ── Refino 4 ── */
/* Métricas: 4 colunas simétricas — número, título e 1 linha, sem quebra */
.mk-cob-l,.mk-cob-j{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-cob-j{margin-top:4px}
@media (max-width:640px){ .mk-cob>div{padding:14px 14px 15px} }
/* Botões dos cards: seta desliza para a direita no hover/foco */
.btn-porta{transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.btn-porta-seta{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.btn-porta:hover .btn-porta-seta,.btn-porta:focus-visible .btn-porta-seta{transform:translateX(5px)}
.btn-porta:focus-visible{outline:2px solid var(--mk-ouro-luz);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .btn-porta:hover .btn-porta-seta,.btn-porta:focus-visible .btn-porta-seta{transform:none} }

/* ── Refino 5 ── */
.porta-card-emoji{display:inline-flex;font-size:1.25rem;line-height:1}
.porta-card-emoji .icone-svg{width:1em;height:1em}
.porta-card--leilao   .porta-card-emoji .icone-svg{color:var(--mk-leiloes)}
.porta-card--imoveis  .porta-card-emoji .icone-svg{color:var(--mk-imoveis)}
.porta-card--reforma  .porta-card-emoji .icone-svg{color:var(--mk-reforma)}
.porta-card--financas .porta-card-emoji .icone-svg{color:var(--mk-financas)}
[data-theme="dark"] .porta-card-emoji .icone-svg{color:var(--mk-ouro)}
.prova-ticker-icone{display:inline-flex;font-size:14px;line-height:1}
.prova-ticker-icone .icone-svg{width:1em;height:1em;color:var(--mk-ouro)}