/* ============================================================================
   KIT DE PERSONALIZACAO v2 — estilos da experiencia do CLIENTE
   ----------------------------------------------------------------------------
   Porte do mockup aprovado (preview-v2/kit-v2-mockup.html). Todas as classes
   levam o prefixo `kv-` porque este CSS e carregado no portal inteiro, junto
   com components.css/views.css: sem o prefixo, um nome generico como `.item`
   ou `.resumo` mudaria telas que nada tem a ver com o KIT.
   Nenhum token novo e definido aqui — tudo vem de tokens.css, para o KIT
   acompanhar qualquer recalibracao de paleta do portal.

   ESCRITO MOBILE-FIRST de proposito. O layout base e o do celular (1 coluna,
   categorias numa faixa rolavel) e o desktop entra por media query. Se uma
   media query falhar, o cliente cai no layout estreito — que funciona em
   qualquer largura — em vez de cair no layout de 262px de sidebar, que
   estouraria a tela do celular.

   O bloco do KIT v2 e renderizado DENTRO do card de Personalizacao, entao
   tudo aqui assume um container estreito (nao a largura da janela).
   ========================================================================== */

/* `min-width:0` em toda a cadeia de containers: item de grid/flex nasce com
   min-width:auto e CRESCE para caber o conteudo mais largo. Sem isso, a faixa
   rolavel de categorias (que usa white-space:nowrap) e a tabela do pagamento
   empurravam a largura do bloco inteiro e apareciam cortadas no celular, com
   rolagem horizontal na pagina toda. */
.kv-root { margin-top: 4px; min-width: 0; }

/* ---------------------------------------------------------------- HERO ---- */
.kv-hero {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-1);
}
/* Arte puramente decorativa (gradientes, sem imagem): nao depende de upload
   nenhum e nao pesa no carregamento. */
.kv-hero-art {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 82% 18%, #E9E2D8 0%, #DCD3C6 42%, rgba(220,211,198,0) 70%),
    radial-gradient(80% 70% at 96% 78%, #CFC6B8 0%, rgba(207,198,184,0) 62%),
    linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 44%, #F4F0E9 66%, #E7E0D4 100%);
}
.kv-hero-inner {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  gap: 16px; padding: 18px;
}
.kv-hero h2.kv-hero-t { font-size: 22px; line-height: 1.16; letter-spacing: -.02em; }
.kv-hero p.kv-sub { margin: 8px 0 0; color: var(--ink-600); font-size: 13px; max-width: 520px; }

.kv-unidade {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: 13px 15px; min-width: 0;
}
.kv-unidade-lin {
  display: flex; align-items: center; gap: 9px; color: var(--ink-500);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.kv-unidade-lin svg { width: 15px; height: 15px; color: var(--brand); flex-shrink: 0; }
.kv-unidade-num {
  font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.15;
  margin-top: 8px; overflow-wrap: break-word;
}
.kv-unidade-meta { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }

/* --------------------------------------------------------------- AVISO ---- */
.kv-aviso {
  display: flex; gap: 11px; align-items: flex-start; background: var(--info-bg);
  border: 1px solid #D4E2F8; color: var(--info-ink); border-radius: var(--r-md);
  padding: 12px 14px; font-size: 12.5px; margin-top: 14px; line-height: 1.5;
}
.kv-aviso svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.kv-aviso.dang { background: var(--danger-bg); border-color: #F6D5D2; color: var(--danger-ink); }

/* ------------------------------------------------- LINHA DO TEMPO (ANDAR) - */
.kv-prazos { margin-top: 14px; padding: 16px 18px; }
.kv-prazos-head { font-size: 13.5px; font-weight: 700; font-family: var(--font-display); margin-bottom: 16px; }
.kv-prazos-head span { font-weight: 500; color: var(--ink-500); }
/* Duas marcas apenas: HOJE e a data limite final. O cliente nunca ve os dois
   niveis de prazo que o backend usa para decidir o preco (regra A3). */
.kv-tl { display: grid; grid-template-columns: repeat(2, 1fr); position: relative; padding-top: 8px; }
.kv-tl::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: 14px; height: 2px;
  background: var(--border-strong); border-radius: 2px;
}
.kv-tl-done { position: absolute; left: 7px; top: 14px; height: 2px; background: var(--brand); border-radius: 2px; width: 52%; }
.kv-step { position: relative; padding-right: 12px; }
.kv-dot {
  width: 14px; height: 14px; border-radius: 50%; background: var(--surface);
  border: 3px solid var(--border-strong); position: relative; z-index: 2;
}
.kv-step.is-hoje .kv-dot { border-color: var(--brand); background: var(--brand); }
.kv-step.is-fim .kv-dot { border-color: var(--danger); background: var(--surface); }
.kv-step-lb { font-size: 12.5px; font-weight: 700; margin-top: 12px; }
.kv-step-dt { font-size: 12.5px; color: var(--ink-500); margin-top: 1px; }
.kv-step-hint { font-size: 11.5px; color: var(--ink-400); margin-top: 2px; line-height: 1.35; }
.kv-prazo-nota {
  display: flex; align-items: center; gap: 7px; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: 11.5px; color: var(--ink-500);
}
.kv-prazo-nota svg { width: 14px; height: 14px; color: var(--ink-400); flex-shrink: 0; }

/* ---------------------------------------------------- CATEGORIAS + ITENS -- */
.kv-body { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.kv-body > * { min-width: 0; }

/* Base = celular: chips que quebram em varias linhas (formato pilula), em vez
   de uma faixa rolavel que escondia categorias fora da primeira tela. */
.kv-cats { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; min-width: 0; }
.kv-cat {
  display: flex; align-items: center; gap: 9px; flex: 0 0 auto; text-align: left;
  background: var(--surface-2); border: none; cursor: pointer; padding: 9px 14px;
  border-radius: var(--r-full); color: var(--ink-700); font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.kv-cat:hover { background: var(--surface-2); }
.kv-cat.active { background: var(--brand-50); color: var(--brand-700); }
.kv-cat svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-400); }
.kv-cat.active svg { color: var(--brand); }
.kv-cat-n {
  background: var(--surface-3); color: var(--ink-600); font-size: 11px; font-weight: 700;
  min-width: 22px; height: 22px; border-radius: var(--r-full); display: inline-flex;
  align-items: center; justify-content: center; padding: 0 6px;
}
.kv-cat.active .kv-cat-n { background: var(--brand); color: #fff; }

/* Fluxo obrigatório categoria por categoria: concluída (já respondida),
   bloqueada (ainda não chegou a vez — nem clicável). */
.kv-cat.feita:not(.active) { background: var(--success-bg); color: var(--success-ink); }
.kv-cat.bloqueada { opacity: .45; cursor: not-allowed; }
.kv-cat.bloqueada:hover { background: var(--surface-2); }

.kv-sec-t { font-size: 17px; letter-spacing: -.015em; }
.kv-sec-d { color: var(--ink-500); font-size: 12.5px; margin: 4px 0 14px; }

/* ── Navegação sequencial entre categorias (substitui a barra fixa antiga) ── */
.kv-nav-cat { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.kv-nav-aviso { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.kv-nav-aviso svg { width: 14px; height: 14px; color: var(--ink-400); flex-shrink: 0; }

.kv-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.kv-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-1); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  min-width: 0;
}
.kv-item:hover { box-shadow: var(--shadow-2); }
.kv-item.off { opacity: .74; }
.kv-item.sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100), var(--shadow-2); }
.kv-item-st { padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--success-bg); }
.kv-item.neutro .kv-item-st { background: var(--surface-2); }
.kv-item.off .kv-item-st { background: var(--danger-bg); }
.kv-img {
  height: 140px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: kvSkeleton 1.4s ease-in-out infinite;
}
.kv-img img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--surface-2); }
.kv-img img[src] ~ .kv-img-vazia { display: none; }
@keyframes kvSkeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* Botao de ampliar: canto inferior direito da foto, em todo o fluxo (vitrine,
   comparativo, revisao, pagamento, fases). */
.kv-lupa {
  position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(20,18,14,.55); color: #fff; border: none; display: flex; align-items: center;
  justify-content: center; cursor: pointer; backdrop-filter: blur(2px);
}
.kv-lupa svg { width: 15px; height: 15px; }
.kv-lupa:hover { background: rgba(20,18,14,.75); }
/* Placeholder para item sem foto: o card nao pode "pular" de altura so porque
   o cadastro ainda nao subiu a imagem. */
.kv-img-vazia {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--ink-300); font-size: 11.5px; font-weight: 600;
  background: linear-gradient(135deg, #F3F2EF 0%, #E9E7E1 100%);
}
.kv-item-b { padding: 13px 14px 15px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kv-num { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--ink-400); }
.kv-nome { font-weight: 700; font-size: 14px; line-height: 1.3; margin-top: 1px; overflow-wrap: break-word; }
.kv-cod { font-size: 12px; color: var(--ink-500); margin-top: 4px; overflow-wrap: break-word; }
.kv-desc { font-size: 12px; color: var(--ink-500); margin-top: 6px; line-height: 1.45; }
.kv-qtd { font-size: 12.5px; color: var(--ink-600); margin-top: 9px; display: flex; align-items: center; gap: 6px; }
.kv-qtd svg { width: 14px; height: 14px; color: var(--ink-400); flex-shrink: 0; }
.kv-preco {
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  color: var(--success-ink); margin-top: 8px; letter-spacing: -.01em; overflow-wrap: break-word;
}
.kv-item.neutro .kv-preco { color: var(--ink-700); }
.kv-item.off .kv-preco { color: var(--ink-400); }
.kv-preco small { font-size: 12px; font-weight: 600; color: var(--ink-500); }
.kv-total { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }

/* Subitens: informativos (acompanham o item pai, nao sao escolha separada).
   NAO renomear de volta para `.kv-sub`: esse nome ja e o do subtitulo do hero,
   e a colisao pintava um retangulo cinza atras da frase de abertura da tela. */
.kv-subitens { margin: 9px 0 0; padding: 8px 10px; border-radius: var(--r-xs); background: var(--surface-2); }
.kv-subitens-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); }
.kv-subitens ul { margin: 5px 0 0; padding-left: 16px; font-size: 12px; color: var(--ink-600); }

/* Credito do item padrao da construcao (regra A9): verde enquanto o credito
   ainda e concedido, cinza depois que a janela fechou. */
.kv-credito {
  margin-top: 9px; padding: 8px 10px; border-radius: var(--r-xs);
  background: var(--success-bg); color: var(--success-ink);
  font-size: 11.5px; line-height: 1.4; font-weight: 600;
}
.kv-credito.off { background: var(--surface-3); color: var(--ink-500); font-weight: 500; }

.kv-ate { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-600); margin-top: 9px; font-weight: 600; }
.kv-ate svg { width: 14px; height: 14px; color: var(--ink-400); flex-shrink: 0; }
.kv-item.off .kv-ate { color: var(--danger-ink); }
.kv-item.off .kv-ate svg { color: var(--danger-ink); }

.kv-alerta {
  font-size: 11.5px; line-height: 1.4; margin-top: 9px; padding: 7px 9px;
  border-radius: var(--r-xs); background: var(--danger-bg); color: var(--danger-ink);
}

.kv-acao { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.kv-acao .btn { width: 100%; }
.kv-det {
  background: none; border: none; color: var(--brand); font-size: 12.5px; font-weight: 600;
  text-decoration: underline; cursor: pointer; padding: 0; font-family: inherit;
}
.kv-item.off .kv-det { color: var(--ink-500); }

.kv-vazio { color: var(--ink-400); font-size: 12.5px; padding: 18px 2px; }

/* -------------------------------------------------------------- RESUMO ---- */
/* Fixo no rodape: a lista de itens fica longa e o cliente perde de vista o
   total e o botao de avancar (mesma decisao ja tomada na vitrine legada). */
.kv-resumo { position: sticky; bottom: 10px; margin-top: 18px; box-shadow: var(--shadow-3); padding: 14px 16px; z-index: 5; }
.kv-resumo-l { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kv-resumo-tot { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.kv-resumo-btn { margin-left: auto; }
.kv-resumo ul {
  margin: 12px 0 0; padding-left: 18px; color: var(--ink-600); font-size: 12.5px;
  border-top: 1px solid var(--border); padding-top: 12px;
}
.kv-resumo li { margin-bottom: 3px; }
.kv-resumo li.credito { color: var(--success-ink); }
.kv-resumo li.nota { list-style: none; margin-left: -18px; margin-top: 8px; color: var(--ink-400); font-size: 11.5px; }
.kv-resumo-open {
  background: none; border: none; color: var(--brand); font-size: 12.5px; font-weight: 700;
  cursor: pointer; padding: 0; text-decoration: underline; font-family: inherit;
}

/* ------------------------------------------------ ETAPA DE PAGAMENTO ------ */
.kv-passos { display: flex; gap: 8px; flex-wrap: wrap; }
.kv-passo {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
  color: var(--ink-400); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 6px 13px;
}
.kv-passo-n {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--surface-3); color: var(--ink-500); font-size: 11px; font-weight: 800;
}
.kv-passo.ok { color: var(--success-ink); border-color: #CFE5DB; }
.kv-passo.ok .kv-passo-n { background: var(--success); color: #fff; }
.kv-passo.atual { color: var(--ink-900); border-color: var(--brand); }
.kv-passo.atual .kv-passo-n { background: var(--brand); color: #fff; }

.kv-pg-titulo { font-size: 22px; margin-top: 18px; }
.kv-pg-sub { color: var(--ink-600); font-size: 13px; margin: 6px 0 0; }
.kv-pg-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.kv-pg-total span { font-size: 12.5px; color: var(--ink-500); font-weight: 600; }
.kv-pg-total strong { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.kv-pg-op {
  display: flex; align-items: flex-start; gap: 12px; border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: 14px 15px; cursor: pointer; margin-bottom: 10px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.kv-pg-op:hover { border-color: var(--ink-300); }
.kv-pg-op.sel { border-color: var(--brand); background: var(--brand-50); }
.kv-pg-op input { margin-top: 3px; accent-color: var(--brand); width: 16px; height: 16px; flex-shrink: 0; }
.kv-pg-op-c { flex: 1; min-width: 0; }
.kv-pg-op-t { font-weight: 700; font-size: 13.5px; }
.kv-pg-op-d { font-size: 12.5px; color: var(--ink-500); margin-top: 3px; line-height: 1.45; }
.kv-pg-parc { display: flex; align-items: flex-end; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.kv-pg-parc label { font-size: 12px; font-weight: 700; color: var(--ink-600); }
.kv-pg-parc select { margin-top: 6px; width: 120px; }
.kv-pg-parc-v strong { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.kv-pg-acoes { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.kv-pg-tab td.nw, .kv-pg-tab th.nw { white-space: nowrap; }
.kv-pg-tab td.dir, .kv-pg-tab th.dir { text-align: right; }
.kv-pg-tab tr.credito td { color: var(--success-ink); }

/* ------------------------------------------------- FASES (ACOMPANHAMENTO) - */
.kv-fases { padding: 6px 4px; }
.kv-fase { display: flex; gap: 14px; padding: 14px 14px; position: relative; }
.kv-fase-m { position: relative; flex-shrink: 0; }
.kv-fase-dot {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border-strong);
  color: var(--ink-400); font-family: var(--font-display); font-weight: 800; font-size: 13px;
}
.kv-fase:not(:last-child) .kv-fase-m::after {
  content: ""; position: absolute; left: 50%; top: 34px; bottom: -20px; width: 2px;
  transform: translateX(-50%); background: var(--border-strong);
}
.kv-fase.ok .kv-fase-dot { background: var(--success); border-color: var(--success); color: #fff; }
.kv-fase.ok .kv-fase-m::after { background: var(--success); }
.kv-fase.atual .kv-fase-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.kv-fase.atual { background: var(--brand-50); border-radius: var(--r-md); }
.kv-fase.parada .kv-fase-dot { background: var(--danger); border-color: var(--danger); color: #fff; }
.kv-fase.parada { background: var(--danger-bg); border-radius: var(--r-md); }
.kv-fase-c { min-width: 0; }
.kv-fase-t { font-weight: 700; font-size: 14px; font-family: var(--font-display); }
.kv-fase-d { font-size: 12.5px; color: var(--ink-600); margin-top: 4px; line-height: 1.5; }
.kv-fase-meta { font-size: 11.5px; color: var(--ink-400); margin-top: 6px; }
.kv-fase-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ------------------------------ COMPARATIVO "VER DETALHES" ---------------- */
/* Cabe no modal padrao do portal (#modalGeneric, max-width 560px) de proposito:
   nao ha override de largura, nenhum outro modal do portal e afetado. Duas
   colunas SEMPRE, inclusive em 375px — comparacao que empilha deixa de ser
   comparacao, porque o cliente nao ve as duas opcoes ao mesmo tempo. */
.kv-cmp-wrap { padding: 12px 0 2px; }
.kv-cmp { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: stretch; gap: 0; }
.kv-cmp-col { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; background: var(--surface-2); min-width: 0; }
.kv-cmp-col.escolha { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-100); }
.kv-cmp-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; background: var(--brand); color: #fff; padding: 2px 8px;
  border-radius: var(--r-full); margin-bottom: 9px;
}
.kv-cmp-tag.neutro { background: var(--surface-3); color: var(--ink-600); }
.kv-cmp-img { height: 84px; border-radius: var(--r-sm); border: 1px solid var(--border); overflow: hidden; background: var(--surface-3); }
.kv-cmp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-cmp-nome { font-family: var(--font-display); font-weight: 800; font-size: 13px; margin-top: 9px; line-height: 1.25; overflow-wrap: break-word; }
.kv-cmp-cod { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; overflow-wrap: break-word; }
.kv-cmp-linha { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
.kv-cmp-linha span { color: var(--ink-500); }
.kv-cmp-linha b { text-align: right; overflow-wrap: break-word; min-width: 0; }
.kv-cmp-total { margin-top: 8px; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--brand-700); line-height: 1.2; }
.kv-cmp-total.neutro { color: var(--ink-600); font-size: 13.5px; }
.kv-cmp-total.credito { color: var(--success-ink); }
.kv-cmp-vazio { font-size: 12px; color: var(--ink-500); line-height: 1.45; }
/* O selo "troca por" ocupa a coluna do meio; em telas estreitas vira so a seta
   para nao roubar largura das colunas. */
.kv-cmp-vs {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-400); text-align: center;
}
.kv-cmp-vs svg { width: 17px; height: 17px; }
.kv-cmp-vs span { display: none; }
.kv-cmp-extra { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.kv-cmp-extra-l { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 8px; }
.kv-cmp-extra-l span { color: var(--ink-500); }
.kv-cmp-extra p { margin: 0; font-size: 12.5px; color: var(--ink-600); line-height: 1.5; }

/* ------------------------------------------------------- TERMO DO KIT ----- */
.kv-termo { padding: 12px 0 2px; }
.kv-termo p { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-600); line-height: 1.5; }
/* O visualizador embutido e um CONFORTO, nao o caminho unico: navegador sem
   leitor de PDF (muito comum no celular) simplesmente nao mostra o quadro, e o
   botao de baixar continua ali. Por isso ele some abaixo de 700px. */
.kv-termo-frame { display: none; }
.kv-qualificacao {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px;
}
.kv-qualificacao label {
  display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-600);
}
.kv-qualificacao input {
  font: inherit; font-size: 13px; padding: 8px 10px; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface-1); color: var(--ink-900);
}
.kv-aceite {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
  font-size: 12.5px; line-height: 1.45; cursor: pointer;
}
.kv-aceite input { margin-top: 2px; accent-color: var(--brand); width: 16px; height: 16px; flex-shrink: 0; }
.kv-erro { color: var(--danger-ink); font-size: 12.5px; margin-top: 10px; min-height: 1px; }
/* Widget Embedded da Clicksign (assinatura do contrato dentro do portal):
   altura inicial de espera; o próprio widget redimensiona via evento "resized". */
.kv-widget-assinatura { min-height: 420px; margin-top: 8px; }

/* ------------------------------------------------ NORMA DO KIT ---------- */
/* Caixa com altura limitada e rolagem própria: é a rolagem DELA que libera a
   ciência (ver ligarNorma em kitV2.js). Texto corrido legível, sem PDF. */
.kv-norma-intro { margin: 0 0 12px; font-size: 13px; color: var(--ink-600); line-height: 1.5; }
.kv-norma-texto {
  max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-1); font-size: 13px; line-height: 1.6; color: var(--ink-800);
}
.kv-norma-texto:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.kv-norma-bloco { margin-bottom: 14px; }
.kv-norma-bloco:last-of-type { margin-bottom: 6px; }
.kv-norma-fim {
  margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border);
  text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-400);
}
.kv-norma-progresso { margin-top: 10px; font-size: 12.5px; color: var(--ink-500); }
.kv-norma-progresso.ok { color: var(--success-ink, #1F7A45); font-weight: 600; }
.kv-aceite-bloq { opacity: .55; cursor: not-allowed; }
.kv-norma-card .kv-pg-acoes { margin-top: 14px; }

/* Origem de cada dado do contrato no envio para a Personalização. */
.kv-qualificacao label > span { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kv-qc-origem { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-400); }
.kv-qc-origem.falta { color: var(--danger-ink); }
.kv-qc-falta input { border-color: var(--danger-ink); }

/* ------------------------------------------------------------ DESKTOP ---- */
@media (min-width: 700px) {
  .kv-hero-inner { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 26px 26px 24px; }
  .kv-hero h2.kv-hero-t { font-size: 27px; max-width: 520px; }
  .kv-hero p.kv-sub { font-size: 13.5px; }
  .kv-unidade { min-width: 210px; flex-shrink: 0; }
  .kv-grid { grid-template-columns: repeat(2, 1fr); }
  .kv-cmp { grid-template-columns: 1fr 58px 1fr; }
  .kv-cmp-col { padding: 14px; }
  .kv-cmp-img { height: 108px; }
  .kv-cmp-nome { font-size: 14px; }
  .kv-cmp-total { font-size: 18px; }
  .kv-cmp-vs span { display: block; }
  .kv-termo-frame { display: block; width: 100%; height: 380px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
  .kv-qualificacao { grid-template-columns: 1fr 1fr; }
  .kv-norma-texto { max-height: 58vh; padding: 18px 22px; }
  .kv-qc-full { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  .kv-body { grid-template-columns: 250px 1fr; gap: 18px; }
  .kv-cats { display: block; overflow: visible; padding: 10px; }
  .kv-cat {
    display: flex; width: 100%; flex: 1 1 auto; white-space: normal;
    border-left: 3px solid transparent; border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px;
  }
  .kv-cat-n { margin-left: auto; }
  .kv-cat.active { border-left-color: var(--brand); }
  .kv-sec-t { font-size: 19px; }
  .kv-sec-d { font-size: 13.5px; }
}

@media (min-width: 1180px) {
  .kv-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Resumo da escolha: contratado x escolhido, categoria a categoria ──────
   Três colunas em telas largas (rótulo · item · valor) e empilhado no celular,
   onde a coluna do meio é a que precisa de espaço. */
.kv-res{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.kv-res-cat{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)}
.kv-res-cat-t{padding:9px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-600)}
.kv-res-l{display:grid;grid-template-columns:148px 1fr auto;gap:12px;align-items:baseline;
  padding:11px 14px;border-top:1px solid var(--border)}
.kv-res-cat-t + .kv-res-l{border-top:0}
.kv-res-rot{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-400)}
.kv-res-item{font-size:14px;color:var(--ink-800);min-width:0;overflow-wrap:break-word}
.kv-res-img{position:relative;width:46px;height:46px;border-radius:var(--r-xs);overflow:hidden;
  background:var(--surface-3);flex-shrink:0;display:inline-block;vertical-align:middle;margin-right:8px}
.kv-res-img img{width:100%;height:100%;object-fit:cover;display:block}
.kv-res-img .kv-lupa{width:22px;height:22px;right:2px;bottom:2px}
.kv-res-img .kv-lupa svg{width:11px;height:11px}
.kv-res-item-l{display:flex;align-items:center;min-width:0}
/* Filho de flex não encolhe por padrão (min-width:auto) mesmo com o pai em
   min-width:0 — é isso que fazia nome de item comprido estourar a caixa e
   sobrepor o cabeçalho da categoria seguinte. */
.kv-res-item-txt{min-width:0;overflow-wrap:break-word}
.kv-res-comp{display:block;font-style:normal;font-size:12px;color:var(--ink-500);margin-top:2px}
.kv-res-val{font-size:14px;white-space:nowrap;text-align:right}

/* O item que saiu fica apagado e riscado: a troca precisa ser óbvia sem ler. */
.kv-res-antes{background:var(--surface-2)}
.kv-res-antes .kv-res-item,.kv-res-antes .kv-res-val{color:var(--ink-400);text-decoration:line-through}
.kv-res-depois .kv-res-rot{color:var(--brand)}
.kv-res-cred .kv-res-item,.kv-res-cred .kv-res-val{color:var(--success-ink)}
.kv-res-cred .kv-res-rot{color:var(--success-ink)}

.kv-res-sub{border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.kv-res-sub .kv-res-l{grid-template-columns:1fr auto}

@media (max-width:700px){
  .kv-res-l{grid-template-columns:1fr auto;gap:4px 10px}
  .kv-res-rot{grid-column:1 / -1;margin-bottom:-2px}
}

/* ── Acréscimo por parcelamento ───────────────────────────────────────────
   O cliente vê o valor final e, separado, quanto do valor é financiamento —
   é a única taxa que a escolha dele muda, então é a única que merece linha. */
.kv-pg-acr{color:var(--ink-500);font-size:12.5px}
.kv-pg-acr-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;font-size:13px;color:var(--ink-600);border-top:1px solid var(--border)}
.kv-pg-acr-l b{white-space:nowrap}
.kv-pg-acr-tot{color:var(--ink-900);font-size:14.5px;font-weight:600}

/* ── Painel "como o pagamento é protegido" ────────────────────────────────
   <details> fechado por padrão: quem já confia não precisa ler, quem quer
   confirmar clica e vê. Fica dentro do próprio modal do cartão. */
.kv-seg{border:1px solid var(--border);border-radius:8px;background:var(--surface-2);
  padding:2px 14px;margin-bottom:14px;font-size:12.5px;color:var(--ink-600)}
.kv-seg summary{cursor:pointer;padding:9px 0;font-weight:600;color:var(--ink-800);
  list-style:none;display:flex;align-items:center;gap:6px}
.kv-seg summary::-webkit-details-marker{display:none}
.kv-seg summary::before{content:"🔒";font-size:12px}
.kv-seg ul{margin:0 0 10px;padding-left:18px;line-height:1.5}
.kv-seg li{margin-bottom:8px}
.kv-seg li:last-child{margin-bottom:0}

/* ── Card do item clicavel (foco de teclado visivel) ──────────────────────── */
.kv-item-click { cursor: pointer; }
.kv-item-click:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Painel "padrao x escolha" em pagina (nao mais modal) ─────────────────── */
/* Pedido do usuario depois de ver em producao: uma coluna lateral de
   320-380px espreme demais a foto de planta baixa (tem letreiro fino, precisa
   de espaco). O painel deixou de ser uma 3a coluna do grid e virou uma TELA
   PROPRIA dentro da pagina: quando ctx.itemAberto existe, htmlVitrine troca
   categorias+grid pelo painel (ver kitV2.js#htmlVitrine), com botao "Voltar
   as opcoes" no topo — mesma ideia de pagina cheia em qualquer largura, sem
   precisar do overlay fixo exceto no celular (ver media query abaixo). */
.kv-painel {
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--shadow-2); padding: 20px; min-width: 0;
  max-width: 1280px; margin: 0 auto;
}
.kv-painel-voltar {
  background: none; border: none; cursor: pointer; color: var(--brand); font-size: 13px;
  font-weight: 700; padding: 0; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 6px;
}
.kv-painel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kv-painel-fechar {
  background: none; border: none; cursor: pointer; color: var(--ink-500); font-size: 20px;
  line-height: 1; padding: 2px 6px; flex-shrink: 0;
}
.kv-cmp-dif {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-xs); background: var(--surface-2);
  font-size: 13px; line-height: 1.5;
}
.kv-cmp-dif.credito { background: var(--success-bg); color: var(--success-ink); }

/* Imagens de comparacao bem maiores que o card do grid (planta baixa precisa
   de espaco) — sobrescreve o tamanho pequeno definido mais abaixo neste
   arquivo (84/108px), que era pensado para o modal antigo. */
.kv-painel .kv-cmp-img { height: 300px; position: relative; background: var(--surface-2); }
/* contain: a foto aparece INTEIRA (cover cortava as bordas); a lupa amplia. */
.kv-painel .kv-cmp-img img { object-fit: contain; }
@media (min-width: 640px) { .kv-painel .kv-cmp-img { height: 420px; } }
@media (min-width: 960px) { .kv-painel .kv-cmp-img { height: 560px; } }

/* Foto horizontal: segue LADO A LADO (pedido 2026-10-07); só a proporção da foto muda. */
.kv-painel .kv-cmp.paisagem .kv-cmp-img { height: auto; aspect-ratio: 16 / 10; max-height: 640px; }

/* <640px: a foto de planta some em duas colunas de 26px de gutter. Empilha
   "como e hoje" em cima de "sua escolha" para cada imagem ficar legivel. */
@media (max-width: 639px) {
  .kv-cmp { grid-template-columns: 1fr; gap: 14px; }
  .kv-cmp-vs { display: none; }
  .kv-painel { padding: 14px; border-radius: 0; }
}

/* So no celular o painel cobre a tela inteira (fixed); em tablet/desktop ele
   e uma secao normal da pagina — a pagina inteira rola, sem viewport travado. */
@media (max-width: 639px) {
  .kv-painel {
    position: fixed; inset: 0; z-index: 60; overflow: auto;
    padding-bottom: calc(56px + 24px);
  }
}

/* ── Barra inferior de selecao (substitui a lista expansivel antiga) ──────── */
.kv-bar { position: sticky; bottom: 10px; margin-top: 18px; box-shadow: var(--shadow-3); padding: 14px 16px; z-index: 5; }
@media (max-width: 860px) {
  .kv-bar { position: fixed; left: 10px; right: 10px; bottom: 56px; margin-top: 0; z-index: 40; }
}

/* ── Tela de revisao (antes de gravar no servidor) ─────────────────────────── */
.kv-rev { margin-top: 4px; }
.kv-rev-acoes { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

/* ── Lightbox de imagem ─────────────────────────────────────────────────────
   Acima do painel fullscreen (z-index 60) E do modal generico do portal
   (#modalGeneric, z-index 1000 em components.css) — o lightbox tambem abre a
   partir do modal "Itens escolhidos" das fases, entao precisa vencer os dois.
   Fica escondido por padrao (display:none) e so aparece com a classe .open;
   e criado uma vez e anexado a document.body (fora de #kvRaiz e do modal),
   entao sobrevive as repinturas de innerHTML de qualquer um dos dois. */
.kv-lightbox {
  position: fixed; inset: 0; z-index: 1200; background: rgba(15, 13, 10, .88);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.kv-lightbox.open { display: flex; }
.kv-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r-sm); object-fit: contain; }
.kv-lightbox-fechar {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1;
}

/* ── Passos do topo (1 Selecionar Itens / 2 Revisar Seleção / 3 Confirmação) ─ */
.kv-passos-sel { display: flex; align-items: center; gap: 10px; padding: 4px 2px 14px; flex-wrap: wrap; }
.kv-passo-sel { display: flex; align-items: center; gap: 8px; color: var(--ink-400); }
.kv-passo-sel-n {
  width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2);
  color: var(--ink-500); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kv-passo-sel-t { font-size: 12.5px; font-weight: 600; }
.kv-passo-sel.atual .kv-passo-sel-n { background: var(--brand); color: #fff; }
.kv-passo-sel.atual .kv-passo-sel-t { color: var(--ink-800); }
.kv-passo-sel.ok .kv-passo-sel-n { background: var(--brand-50); color: var(--brand-700); }
.kv-passo-sel.ok .kv-passo-sel-t { color: var(--ink-600); }

/* ── Busca por item (grade "Todos") ────────────────────────────────────────── */
.kv-busca {
  display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-full); padding: 9px 14px; margin-bottom: 14px;
}
.kv-busca svg { width: 16px; height: 16px; color: var(--ink-400); flex-shrink: 0; }
.kv-busca input { border: none; outline: none; background: transparent; width: 100%; font-size: 13.5px; color: var(--ink-800); }

.kv-lightbox-fechar:hover { background: rgba(255,255,255,.22); }

/* ── Editar categoria a partir da Revisão final ──────────────────────────── */
.kv-res-cat-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kv-res-editar { background: none; border: none; color: var(--brand); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.kv-res-editar:hover { text-decoration: underline; }

/* Zoom do comparativo: as duas fotos lado a lado em tela cheia (2026-10-07). */
.kv-lightbox-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; height: 100%; align-items: center; }
.kv-lightbox-cmp[hidden] { display: none; }
.kv-lb-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; max-height: 100%; }
.kv-lb-fig figcaption { color: #fff; font-size: 13px; font-weight: 600; text-align: center; }
.kv-lb-tag { display: inline-block; background: rgba(255,255,255,.18); border-radius: 999px; padding: 2px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.kv-lb-fig img { width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: var(--r-sm); background: #111; }
.kv-lightbox-img[hidden] { display: none; }
@media (max-width: 700px) {
  .kv-lightbox-cmp { grid-template-columns: 1fr; overflow-y: auto; align-items: start; }
  .kv-lb-fig img { max-height: 42vh; }
}
/* X sempre por cima da grade do comparativo (senão a grade engole o clique). */
.kv-lightbox-fechar { z-index: 2; }