/* ════════════════════════════════════════════════════════════════════
   ajustes-636-cards-unificados.css — card de escolha padrão (12/11/2026)

   Referência: montador de adesivos (.mat-kit). Este arquivo NÃO cria
   um sistema de design paralelo: reaproveita os mesmos tokens do
   ajustes-620-modulos.css e estende a mesma anatomia para os módulos
   que ainda não tinham o card completo.

   Anatomia (6 zonas + rodapé):
     mídia 168px → selo curto → título → apelido → chip de atributo
     → preço (valor + unidade) → faixas → até 2 bullets → rodapé
     "1 clique / Escolher" ↔ "Escolhido ✓".

   Escopo: só card de escolha dos módulos + barra de próxima etapa.
   NÃO toca em vitrine, catálogo, home, ficha, frete, ERP, preço,
   faixa, desconto, estoque, carrinho ou checkout.
   Para desfazer: apagar este arquivo, o .js e as linhas de include.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --vt636-ink:var(--vt-ink,#082040);
  --vt636-muted:var(--vt-muted,#5b6b7e);
  --vt636-muted2:var(--vt-muted2,#7b8aa0);
  --vt636-line:var(--vt-line,#e4eaf1);
  --vt636-ok:var(--vt-ok,#0f7a4d);
  --vt636-ok-bg:var(--vt-ok-bg,#e8f7ef);
  --vt636-brand:var(--vt-brand,#3B3A96);
  --vt636-r:var(--vt-r,18px);
}

/* ── 1. CARD ────────────────────────────────────────────────────────
   Aplicado por cima das classes existentes (.mat-kit, .fpc, .pol-kit,
   .ag-mat, .fd-doc-card, .etq-card). Não força `display` para não
   quebrar filtros que escondem cards via style inline. */
.vt636-card{
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
  padding:0 !important;
  background:#fff !important;
  border:1.5px solid var(--vt636-line) !important;
  border-radius:var(--vt636-r) !important;
  box-shadow:0 1px 2px rgba(8,32,64,.04) !important;
  overflow:hidden !important;
  text-align:left !important;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.vt636-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 40px -26px rgba(8,32,64,.45) !important;
  border-color:#cfe4f4 !important;
}
.vt636-card.on{
  border-color:var(--vt636-brand) !important;
  box-shadow:0 0 0 3px rgba(59,58,150,.14), 0 22px 40px -26px rgba(8,32,64,.45) !important;
}
.vt636-card[disabled], .vt636-card.off{
  opacity:.55; cursor:not-allowed !important;
}
.vt636-card[disabled]:hover, .vt636-card.off:hover{ transform:none; }

/* mídia */
.vt636-card .vt636-media,
.vt636-card .mat-photo,
.vt636-card .fpc-photo,
.vt636-card .ph,
.vt636-card .ag-mat-photo{
  position:relative !important;
  width:100% !important;
  height:168px !important;
  aspect-ratio:auto !important;
  border-radius:0 !important;
  background-size:cover !important;
  background-position:center !important;
  flex:0 0 auto !important;
}
.vt636-card .vt636-media::after,
.vt636-card .mat-photo::after,
.vt636-card .fpc-photo::after,
.vt636-card .ph::after,
.vt636-card .ag-mat-photo::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(0deg,rgba(8,32,64,.18),rgba(8,32,64,0));
  pointer-events:none;
}
.vt636-media.vt636-icon{
  display:grid; place-items:center;
  background:linear-gradient(160deg,#eef2f7,#dfe7f1);
  color:var(--vt636-brand);
}
.vt636-media.vt636-icon svg{ width:64px; height:64px; }

/* selo + check */
.vt636-card .vt636-badge,
.vt636-card .mat-badge,
.vt636-card .fpc-badge,
.vt636-card .ag-mat-badge{
  position:absolute; top:10px; left:10px;
  max-width:calc(100% - 60px);
  font:800 9.5px/1 Inter,system-ui,sans-serif;
  letter-spacing:.04em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:2;
}
.vt636-badge.pop, .mat-badge.pop, .fpc-badge.pop, .ag-mat-badge.pop{ background:#2563eb; }
.vt636-badge.transp, .mat-badge.transp{ background:#0f172a; }
.vt636-badge.eco, .mat-badge.eco, .ag-mat-badge.alt{ background:#16a34a; }
.vt636-badge.gold, .fpc-badge.gold{ background:#b45309; }
.vt636-card .vt636-check,
.vt636-card .mat-check,
.vt636-card .fpc-check,
.vt636-card .fd-doc-check{
  position:absolute; top:10px; right:10px; left:auto;
  width:24px; height:24px; display:grid; place-items:center;
  border-radius:999px; background:#fff; color:transparent;
  font-size:12px; font-weight:900;
  box-shadow:0 1px 4px rgba(8,32,64,.2); z-index:2;
}
.vt636-card.on .vt636-check,
.vt636-card.on .mat-check,
.vt636-card.on .fpc-check,
.vt636-card.on .fd-doc-check{ background:var(--vt636-brand); color:#fff; }

/* corpo */
.vt636-card .vt636-body,
.vt636-card .mat-body,
.vt636-card .fpc-body,
.vt636-card .corpo,
.vt636-card .ag-mat-body{
  display:flex !important; flex-direction:column !important;
  gap:0 !important; padding:14px 15px 0 !important;
  flex:1 1 auto !important; min-width:0 !important;
}
.vt636-card .vt636-name,
.vt636-card .mat-name,
.vt636-card .fpc-n,
.vt636-card .ag-mat-name,
.vt636-card .fd-doc-tit,
.vt636-card h2{
  font:600 15px/1.34 Sora,system-ui,sans-serif !important;
  letter-spacing:-.015em !important; color:var(--vt636-ink) !important;
  margin:0 !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important; overflow:hidden !important;
  min-height:2.68em !important;
}
.vt636-card .vt636-apelido,
.vt636-card .mat-apelido,
.vt636-card .fpc-apelido,
.vt636-card .apelido,
.vt636-card .ag-mat-sub,
.vt636-card .fd-doc-uso{
  font:500 11.5px/1.4 Inter,system-ui,sans-serif !important;
  color:var(--vt636-muted) !important; margin:4px 0 0 !important;
  min-height:1.4em !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
.vt636-chips{ display:flex; gap:5px; margin:9px 0 0; overflow:hidden; white-space:nowrap; height:21px; flex:0 0 auto; }
.vt636-chips span{
  font:600 10.5px/1.5 Inter,sans-serif; color:#33506e;
  background:#eff5fb; border:1px solid #e0ebf6; border-radius:999px;
  padding:2px 8px; white-space:nowrap;
}
.vt636-card .vt636-price,
.vt636-card .mat-price-row,
.vt636-card .fpc-price-row,
.vt636-card .pr,
.vt636-card .ag-mat-price,
.vt636-card .fd-doc-price-row{
  margin:13px 0 0 !important; padding-top:12px !important;
  border-top:1px solid #eef2f7 !important;
  display:flex !important; align-items:baseline !important;
  flex-wrap:nowrap !important; gap:3px !important; white-space:nowrap !important;
}
.vt636-card .vt636-price,
.vt636-card .mat-price,
.vt636-card .fpc-p,
.vt636-card .ag-mat-price,
.vt636-card .fd-doc-price{
  font:800 24px/1 Sora,system-ui,sans-serif !important;
  letter-spacing:-.03em !important; color:var(--vt636-ink) !important;
  font-variant-numeric:tabular-nums !important;
  display:flex !important; align-items:baseline !important; gap:3px !important;
}
.vt636-card .vt636-price small,
.vt636-card .mat-price small,
.vt636-card .fpc-p small,
.vt636-card .pr small, .vt636-card .pr span,
.vt636-card .ag-mat-price span,
.vt636-card .fd-doc-price small{
  font:600 11.5px/1 Inter,system-ui,sans-serif !important;
  color:var(--vt636-muted2) !important; letter-spacing:0 !important; white-space:nowrap !important;
}
.vt636-card .mat-tiers,
.vt636-card .fpc-tiers,
.vt636-card .ag-mat-tiers{
  display:flex !important; gap:5px !important; flex-wrap:nowrap !important;
  overflow:hidden !important; margin:9px 0 0 !important;
  height:24px !important; align-items:center !important;
}
/* Faixas geradas pela camada (cartões/etiquetas): preços mais longos
   quebram em 2 linhas em vez de cortar a pílula no meio do valor. */
.vt636-tiers{
  display:flex !important; gap:5px !important; flex-wrap:wrap !important;
  overflow:visible !important; margin:9px 0 0 !important;
  min-height:24px !important; height:auto !important; align-items:center !important;
}
.vt636-tiers span,
.vt636-card .mat-tier,
.vt636-card .fpc-tier,
.vt636-card .ag-mat-tier{
  font:700 10.5px/1 Inter,sans-serif !important;
  background:var(--vt636-ok-bg) !important; color:var(--vt636-ok) !important;
  border:1px solid #c6ebd6 !important; border-radius:999px !important;
  padding:3px 8px !important; white-space:nowrap !important;
}
.vt636-tiers b, .vt636-card .mat-tier b, .vt636-card .fpc-tier b, .vt636-card .ag-mat-tier b{
  font:inherit !important; font-weight:800 !important; color:var(--vt636-ok) !important;
}
.vt636-bullets,
.vt636-card .mat-bullets,
.vt636-card .fpc-bullets,
.vt636-card .ag-mat-bullets,
.vt636-card ul{
  margin:9px 0 0 !important; padding:0 !important; list-style:none !important;
  display:flex !important; flex-direction:column !important; gap:3px !important;
}
.vt636-bullets li,
.vt636-card .mat-bullets li,
.vt636-card .fpc-bullets li,
.vt636-card .ag-mat-bullets li,
.vt636-card ul li{
  position:relative !important;
  font:400 11px/1.45 Inter,system-ui,sans-serif !important;
  color:var(--vt636-muted) !important; padding-left:14px !important;
  /* até 2 linhas por bullet (referência): não corta palavra no meio */
  white-space:normal !important; overflow:hidden !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important;
  overflow-wrap:anywhere !important;
}
.vt636-bullets li::before,
.vt636-card .mat-bullets li::before,
.vt636-card .fpc-bullets li::before,
.vt636-card .ag-mat-bullets li::before,
.vt636-card ul li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:7px; height:7px; border-radius:2px; background:#bcd2e6;
}
.vt636-bullets li:nth-child(n+3),
.vt636-card .mat-bullets li:nth-child(n+3),
.vt636-card .fpc-bullets li:nth-child(n+3),
.vt636-card .ag-mat-bullets li:nth-child(n+3),
.vt636-card ul li:nth-child(n+3){ display:none !important; }

/* rodapé */
.vt636-card .vt-cardfoot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:13px; padding:9px 15px 11px;
  border-top:1px solid #eef2f7;
  font-family:Inter,system-ui,sans-serif;
}
.vt636-card .vt-cardfoot .pra{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:600; color:var(--vt636-muted2); white-space:nowrap;
}
.vt636-card .vt-cardfoot .go{
  font-size:11.5px; font-weight:800; color:var(--vt636-brand);
  display:inline-flex; align-items:center; gap:4px; transition:gap .2s;
}
.vt636-card:hover .vt-cardfoot .go{ gap:8px; }
.vt636-card.on .vt-cardfoot .go{ color:var(--vt636-ok); }
.vt636-card.on .vt-cardfoot .go::after{ content:"✓"; }

/* ── 2. BARRA DE PRÓXIMA ETAPA ──────────────────────────────────────
   Faixa discreta logo abaixo da grade de cards. Não é sticky, não
   tampa o palco, não cria pedido. Só leva o cliente ao próximo bloco
   que o módulo já tem. */
.vt636-next{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:14px 0 0; padding:12px 16px;
  background:#fff; border:1.5px solid var(--vt636-line);
  border-radius:14px; box-shadow:0 1px 2px rgba(8,32,64,.04);
}
.vt636-next .vt636-next-info{
  font:500 12.5px/1.4 Inter,system-ui,sans-serif; color:var(--vt636-muted);
  min-width:0;
}
.vt636-next .vt636-next-info b{ color:var(--vt636-ink); font-weight:800; }
.vt636-next button{
  flex:0 0 auto;
  font:800 13px/1 Inter,system-ui,sans-serif;
  padding:12px 20px; border-radius:13px; border:0;
  background:var(--vt636-brand); color:#fff; cursor:pointer;
  transition:background .18s ease;
}
.vt636-next button:hover{ background:#2E2D7A; }
.vt636-next button:disabled{ background:#c9cfe0; cursor:not-allowed; }
@media(max-width:640px){
  .vt636-next{ flex-direction:column; align-items:stretch; text-align:center; }
  .vt636-next button{ width:100%; }
}
@media(prefers-reduced-motion:reduce){
  .vt636-card, .vt636-card .vt-cardfoot .go, .vt636-next button{ transition:none; }
}

/* ── 3. FOTO-DOCUMENTO · faixa de atalhos por tipo (3 cards) ──────────
   O passo 1 ganha 3 cards-atalho (Documentos 3×4 · Passaporte 5×7 ·
   Vistos EUA/ICAO) acima da lista completa dos 8 documentos. Render e
   seleção são nativos do foto-documento.js; aqui só o layout da faixa
   e o tamanho da prévia da folha 10×15. A anatomia do card é a mesma
   .vt636-card acima. Reversível junto com a camada. */
.fd-destaques{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:0 0 18px;
}
.fd-destaque{
  position:relative;
  display:flex;
  width:100%;
  cursor:pointer;
  font:inherit;
  color:inherit;
}
.fd-destaque .vt636-media svg{ width:118px; height:79px; }
@media(max-width:960px){
  .fd-destaques{ gap:10px; }
  .fd-destaque .vt636-media svg{ width:96px; height:64px; }
}
@media(max-width:720px){
  .fd-destaques{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:12px; margin:0 0 14px; padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .fd-destaque{ flex:0 0 80%; scroll-snap-align:start; }
  .fd-destaque .vt636-media svg{ width:118px; height:79px; }
}