/**
 * Montador de computador completo.
 *
 * Arquivo separado, e não dentro do landing-pme.css, porque só o minhardo o
 * carrega — o site oficial nem chega a pedir este arquivo.
 *
 * Prefixo mt- em tudo: o landing-pme.css já usa .product, .card, .step e
 * .container, e repetir nome quebraria as duas telas.
 */

.mt-wrap { max-width: 1240px; margin: 0 auto; padding: 8px 0 40px; }

.mt-cabeca { text-align: center; margin-bottom: 26px; }
.mt-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rdo-blue, #23577d); margin-bottom: 8px;
}
.mt-h2 { font-size: 30px; margin: 0 0 10px; color: var(--fg-1, #143149); }
.mt-lead { color: var(--fg-2, #456); font-size: 15.5px; max-width: 640px; margin: 0 auto; line-height: 1.6; }

/* ── Palco: carrossel | escolha + escolha | carrossel ────────────────────── */
.mt-palco {
  display: grid;
  grid-template-columns: 190px 1fr 190px;
  gap: 18px;
  align-items: start;
}

.mt-carrossel {
  background: #fff; border: 1px solid var(--border-1, #dde5ec); border-radius: 12px;
  padding: 12px 10px; position: sticky; top: 90px;
}
.mt-carrossel-tit {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fg-3, #678398); text-align: center; margin-bottom: 10px;
}
/* ── Ordenar e filtrar, por coluna ───────────────────────────────────────── */
/* Cada carrossel tem o seu: quem procura gabinete Dell não está procurando
   monitor Dell. Por isso o controle mora aqui dentro, e não no topo da tela. */
.mt-filtro { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mt-sel {
  width: 100%; font-family: inherit; font-size: 12px; color: var(--fg-2, #456);
  background: #fff; border: 1px solid var(--border-1, #dde5ec); border-radius: 8px;
  padding: 6px 8px; cursor: pointer;
  /* Sem isto o select estoura a coluna de 190px no Chrome. */
  min-width: 0; max-width: 100%;
}
.mt-sel:focus { outline: 2px solid var(--rdo-blue, #23577d); outline-offset: 1px; }
.mt-filtro-n {
  font-size: 11px; color: var(--fg-3, #678398); text-align: center;
}
/* Altura fixa + rolagem: é o "carrossel vertical". Scrollbar fina para não
   roubar largura da miniatura. */
.mt-carrossel-lista {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 520px; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin;
}
.mt-carrossel-lista::-webkit-scrollbar { width: 6px; }
.mt-carrossel-lista::-webkit-scrollbar-thumb { background: #cfdae4; border-radius: 3px; }

.mt-opc {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 2px solid #eef2f6; border-radius: 10px;
  padding: 8px 6px; cursor: pointer; font-family: inherit; text-align: center;
  transition: border-color .15s, transform .15s;
}
.mt-opc:hover { border-color: var(--rdo-blue, #23577d); transform: translateY(-2px); }
.mt-opc.on { border-color: var(--rdo-blue, #23577d); background: #EDF4FB; }
.mt-opc img { width: 100%; height: 70px; object-fit: contain; }
.mt-opc-nome {
  font-size: 11.5px; line-height: 1.3; color: var(--fg-2, #456); font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mt-opc-preco { font-size: 12.5px; font-weight: 800; color: var(--rdo-blue, #23577d); }

/* ── Centro: as duas peças escolhidas + o kit, empilhados ────────────────── */
/* A coluna do meio é a configuração em si. O kit entra aqui embaixo das fotos,
   ocupando só esta largura — não a da tela inteira. */
.mt-centro-col { display: flex; flex-direction: column; gap: 14px; }
.mt-centro {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
}
/* ── Cartão da peça escolhida ────────────────────────────────────────────
 * É um <a> para a página do produto: a dica de tela mostra um resumo, e quem
 * quer a configuração completa clica. Os filhos são <span> (um <a> não deve
 * embrulhar bloco), por isso o display:block explícito. */
.mt-escolha {
  background: #fff; border: 1px solid var(--border-1, #dde5ec); border-radius: 14px;
  padding: 18px 16px; text-align: center; box-shadow: 0 8px 22px rgba(20,49,73,.06);
  display: block; position: relative; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.mt-escolha:hover { border-color: var(--rdo-blue, #23577d); box-shadow: 0 10px 26px rgba(20,49,73,.12); }
.mt-escolha-rot, .mt-escolha-nome, .mt-escolha-preco, .mt-escolha-ver { display: block; }

/* A deixa de que o cartão clica. Fica sempre visível, inclusive no celular,
   onde a dica de tela nunca aparece por não haver mouse. */
.mt-escolha-ver {
  margin-top: 8px; font-size: 12px; font-weight: 700;
  color: var(--rdo-blue, #23577d); opacity: .85;
}
.mt-escolha:hover .mt-escolha-ver { opacity: 1; text-decoration: underline; }

/* ── Dica de tela (hover) ───────────────────────────────────────────────── */
/* Nasce abaixo do cartão: ali há espaço livre, e acima ela cobriria o título
   da seção. pointer-events:none para a dica não roubar o clique do cartão. */
.mt-tip {
  position: absolute; left: 8px; right: 8px; top: calc(100% - 10px); z-index: 30;
  display: block; text-align: left; pointer-events: none;
  background: #143149; color: #fff; border-radius: 10px; padding: 12px 14px;
  font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 14px 34px rgba(20, 49, 73, .28);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.mt-tip-nome  { display: block; font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.mt-tip-specs { display: block; margin-bottom: 10px; }
.mt-tip-specs span {
  display: block; position: relative; padding-left: 12px; opacity: .92;
}
.mt-tip-specs span::before { content: '•'; position: absolute; left: 0; opacity: .55; }
.mt-tip-cta { display: block; font-weight: 800; color: #8ECBFF; }

/* Só onde existe mouse: no toque a dica piscaria no tap e atrapalharia o clique. */
@media (hover: hover) {
  .mt-escolha:hover .mt-tip { opacity: 1; visibility: visible; transform: translateY(0); }
}
.mt-escolha-rot {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-3, #678398); margin-bottom: 10px;
}
.mt-escolha img { width: 100%; height: 180px; object-fit: contain; margin-bottom: 12px; }
.mt-escolha-nome {
  font-size: 14px; font-weight: 700; color: var(--fg-1, #143149);
  line-height: 1.4; margin-bottom: 8px; min-height: 40px;
}
.mt-escolha-preco { font-size: 19px; font-weight: 800; color: var(--rdo-blue, #23577d); }
.mt-mais { font-size: 26px; color: #b7c6d4; font-weight: 300; }

.mt-vazio {
  background: #FAFBFC; border: 1px dashed var(--border-1, #dde5ec); border-radius: 14px;
  padding: 40px 16px; text-align: center; color: var(--fg-3, #678398);
}
.mt-vazio strong { display: block; color: var(--fg-2, #456); margin-bottom: 6px; }
.mt-vazio span { font-size: 13px; }
.mt-nada { color: var(--fg-3, #678398); font-size: 13px; text-align: center; }

/* ── Blocos de acessório (teclado/mouse e som/webcam) ────────────────────── */
.mt-bloco { margin-top: 26px; }
.mt-bloco-tit {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-1, #143149); margin-bottom: 12px; text-align: center;
}
.mt-bloco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* "Acrescente" tem três grupos; auto-fit evita a terceira caixa sozinha numa
   linha de duas. */
.mt-bloco-tres { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
/* Com um grupo só (ex.: há teclado mas não há mouse revisado), ocupa a largura
   inteira em vez de deixar metade da faixa vazia. */
.mt-bloco-grid > .mt-faixa:only-child { grid-column: 1 / -1; }
@media (max-width: 760px) { .mt-bloco-grid { grid-template-columns: 1fr; } }

.mt-faixa {
  background: #fff; border: 1px solid var(--border-1, #dde5ec);
  border-radius: 12px; padding: 14px 16px; transition: border-color .15s;
  /* Item de grid/flex não encolhe abaixo do próprio conteúdo por padrão, e o
     carrossel interno tem centenas de pixels: sem isto a faixa empurrava a
     largura da página e o celular ganhava rolagem lateral. */
  min-width: 0;
}
/* Marcado = entra na conta. A borda azul é o aviso visual de que o item
   está somando, sem precisar reler o total. */
.mt-faixa.ativa { border-color: var(--rdo-blue, #23577d); }
.mt-faixa-topo {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; gap: 10px;
}
.mt-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; color: var(--fg-1, #143149); font-size: 14.5px; }
.mt-check input { width: 17px; height: 17px; accent-color: var(--rdo-blue, #23577d); cursor: pointer; }
.mt-faixa-val { font-size: 13.5px; font-weight: 800; color: var(--rdo-blue, #23577d); }

/* Lista horizontal rolável: mesma ideia do carrossel lateral, deitada. */
.mt-faixa-lista { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.mt-faixa-lista::-webkit-scrollbar { height: 6px; }
.mt-faixa-lista::-webkit-scrollbar-thumb { background: #cfdae4; border-radius: 3px; }
.mt-opc-h { flex: 0 0 128px; }
.mt-opc-h img { height: 62px; }

/* ── Resumo e total ──────────────────────────────────────────────────────── */
.mt-resumo {
  margin-top: 28px; background: #fff; border: 1px solid var(--border-1, #dde5ec);
  border-radius: 14px; overflow: hidden;
}
.mt-resumo-itens { padding: 16px 20px; }
.mt-linha {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid #f1f5f8;
  font-size: 14px; color: var(--fg-2, #456);
}
.mt-linha:last-child { border-bottom: none; }
.mt-linha b { color: var(--fg-1, #143149); white-space: nowrap; }

.mt-total {
  background: var(--rdo-blue, #23577d); color: #fff; padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.mt-total-rot { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.mt-total-val { font-size: 28px; font-weight: 800; line-height: 1.2; }
.mt-total-parc { font-size: 13px; opacity: .9; }
.mt-comprar {
  background: #25D366; color: #fff; border: none; border-radius: 10px;
  padding: 15px 28px; font-size: 16px; font-weight: 800; cursor: pointer; font-family: inherit;
  box-shadow: 0 8px 20px rgba(37,211,102,.3);
}
.mt-comprar:hover { background: #1fb557; }
.mt-comprar:disabled { opacity: .6; cursor: default; }

/* Só aparece num formato ou no outro: a instrução "nas colunas ao lado" é
   mentira no celular, onde tudo é uma pilha. */
.mt-so-cel { display: none; }

/* ─────────────────────────── Celular e tablet ─────────────────────────────
 * No desktop o palco é "carrossel | escolha + escolha | carrossel", e isso
 * funciona porque os seletores ficam ao alcance do olho. Empilhado, a mesma
 * ordem do HTML colocava o seletor de monitor DUAS telas abaixo do monitor
 * escolhido: você trocava a peça sem ver o que mudou.
 *
 * Aqui a pilha é remontada em pares — cartão da peça e logo embaixo o seletor
 * dela:
 *
 *   [ Gabinete escolhido ]      [ Monitor escolhido ]
 *   ‹ trocar gabinete ›    →    ‹ trocar monitor ›      →   [ kit ]
 *
 * O `display: contents` existe para isso: ele sobe os dois cartões e o kit
 * para o nível do palco, que é o único lugar onde `order` consegue intercalar
 * os cartões com os carrosséis. Em navegador que não suporte, os elementos
 * continuam agrupados e o resultado é a pilha de hoje — degrada, não quebra.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .mt-so-pc { display: none; }
  .mt-so-cel { display: inline; }

  .mt-wrap { padding-bottom: 28px; }
  .mt-cabeca { margin-bottom: 18px; }
  .mt-h2 { font-size: 23px; }
  .mt-lead { font-size: 14.5px; }

  /* `align-items: stretch` tem de voltar: no desktop o palco usa `start`, e
     em coluna isso faz cada item ser medido pelo CONTEÚDO — a faixa de
     miniaturas ficava com 836px e a página inteira rolava para o lado. */
  .mt-palco { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
  .mt-centro-col, .mt-centro { display: contents; }

  .mt-escolha[data-tipo="cpu"],     .mt-vazio[data-tipo="cpu"]     { order: 1; }
  .mt-carrossel[data-tipo="cpu"]                                   { order: 2; }
  .mt-escolha[data-tipo="monitor"], .mt-vazio[data-tipo="monitor"] { order: 3; }
  .mt-carrossel[data-tipo="monitor"]                               { order: 4; }
  /* Seletor pelo DOM, não pelo resultado do `display: contents`: no DOM a
     faixa continua filha da coluna do meio. */
  .mt-centro-col > .mt-faixa                                       { order: 5; margin-top: 8px; }
  .mt-mais { display: none; }

  /* Item de flex não encolhe abaixo do próprio conteúdo por padrão. Sem
     isto a faixa de miniaturas (7 × 112px) empurrava a largura da página
     inteira e o título saía cortado na direita. */
  .mt-escolha, .mt-vazio, .mt-carrossel { min-width: 0; }
  .mt-carrossel-lista, .mt-faixa-lista { min-width: 0; }

  /* Cartão mais baixo: ele e o seletor precisam caber na mesma tela, senão o
     emparelhamento acima não serve para nada. */
  .mt-escolha { padding: 14px 12px; }
  .mt-escolha img { height: 132px; margin-bottom: 8px; }
  .mt-escolha-nome { font-size: 13.5px; min-height: 0; margin-bottom: 6px; }
  .mt-escolha-preco { font-size: 18px; }
  .mt-vazio { padding: 26px 14px; }

  /* O carrossel perde a moldura: o cartão logo acima já delimita a seção, e
     borda dentro de borda come a largura que falta para a miniatura. */
  .mt-carrossel { position: static; background: none; border: 0; padding: 0; }
  .mt-carrossel-tit { text-align: left; margin-bottom: 7px; }
  /* Deitados: no celular sobra largura e sobra falta de altura. */
  .mt-filtro { flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
  .mt-sel { width: auto; flex: 1 1 140px; font-size: 13px; padding: 8px; }
  .mt-filtro-n { flex: 0 0 auto; }
  .mt-carrossel-lista {
    flex-direction: row; max-height: none; overflow-x: auto;
    padding: 2px 2px 8px; gap: 8px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* não puxa o "voltar" do navegador */
  }
  .mt-opc, .mt-opc-h { flex: 0 0 112px; scroll-snap-align: start; }
  .mt-opc img { height: 62px; }

  .mt-bloco { margin-top: 20px; }
  .mt-bloco-tit { font-size: 12.5px; }
  .mt-faixa { padding: 12px; }
  .mt-faixa-topo { flex-wrap: wrap; }

  .mt-resumo { margin-top: 20px; }
  .mt-linha { font-size: 13.5px; }
  .mt-total { flex-direction: column; align-items: stretch; text-align: center; padding: 16px; }
  .mt-total-val { font-size: 26px; }
  .mt-comprar { width: 100%; padding: 16px; }
}

/* Dedo não tem hover: sem isso a miniatura tocada ficava "presa" levantada e
   com borda azul, imitando seleção que não existe. */
@media (hover: none) {
  .mt-opc:hover { transform: none; border-color: #eef2f6; }
  .mt-opc.on:hover { border-color: var(--rdo-blue, #23577d); }
}

/* Telas estreitas (até ~iPhone SE): três miniaturas visíveis em vez de duas e
   meia, que é o que dá a dica de que a faixa rola. */
@media (max-width: 420px) {
  .mt-h2 { font-size: 21px; }
  .mt-escolha img { height: 116px; }
  .mt-opc, .mt-opc-h { flex: 0 0 100px; }
  .mt-opc img { height: 56px; }
  .mt-opc-nome { font-size: 11px; }
  .mt-total-val { font-size: 24px; }
}