/*ajustes-615.css*/
/* ══════════════════════════════════════════════════════════════════════
   VTDigital — portal do cliente · ajustes da versão 6.15.0
   Camada isolada: nada aqui reescreve regra existente de forma destrutiva.
   Para desfazer, basta remover este arquivo e as duas linhas de include
   nas páginas (index.html, fotos.html, polaroid.html).
   Nenhum preço, formato, kit ou regra de negócio é tocado.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. FOTOS · o botão rosa sai de cena ──────────────────────────────
   Era o único rosa do site (--pink), no meio do navy e do azul da casa.
   Passa a usar o azul do portal, com o mesmo hover de sempre. */
.btn.btn-f{background:var(--brand)}
.btn.btn-f:hover{background:#0a6ea3}

/* ── 2. FOTOS · pílulas de formato no celular ─────────────────────────
   Em tela estreita elas quebravam em três linhas tortas. Viram grade de
   duas colunas e o rótulo passa a caber inteiro. */
@media (max-width:680px){
  .ft-banner-pills{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ft-banner-pills .ft-pill{width:100%;text-align:center;white-space:normal;
    line-height:1.25;padding:8px 6px}
}

/* ── 3. RESUMO FLUTUANTE (fotos e adesivos) ───────────────────────────
   Só no celular: o total do pedido costumava ficar no fim de uma página
   longa. Uma pastilha discreta mostra o resumo e leva até ele. */
.jx-chip{display:none;position:fixed;left:50%;transform:translateX(-50%);
  bottom:14px;z-index:80;align-items:center;gap:10px;
  max-width:calc(100vw - 96px);padding:11px 16px;border:0;border-radius:999px;
  background:var(--ink,#082040);color:#fff;cursor:pointer;
  font:700 13px/1 Inter,system-ui,sans-serif;white-space:nowrap;
  box-shadow:0 14px 34px -12px rgba(8,32,64,.6)}
.jx-chip.show{display:inline-flex}
.jx-chip .jx-t{overflow:hidden;text-overflow:ellipsis}
.jx-chip .jx-go{font-weight:800;color:#7fd4ff}
body.jx-com-chip{padding-bottom:74px}
@media (min-width:901px){.jx-chip{display:none !important}}

/* ── 4. POLAROID · cartão do kit preenche o quadro ────────────────────
   A arte dos kits é 1200×515 (2,33:1) e a moldura do cartão era 150 px
   de altura numa largura de ~380 px (2,53:1) — comia a borda da cena.
   A moldura passa a ter exatamente a proporção da arte. */
.pol-kit .ph{height:auto;aspect-ratio:1200/515}

/* ── 5. POLAROID · slots do kit no celular ────────────────────────────
   Quatro quadros em 4:5 ocupavam quase duas telas. Quadrados, eles
   continuam mostrando a foto inteira e o total volta a caber na tela. */
@media (max-width:680px){
  .pol-slot{aspect-ratio:1/1}
  .pol-slots{gap:8px}
}

/* ── 6. POLAROID · trilha curta do construtor ─────────────────────────
   Só informa em que passo o cliente está. Não trava, não bloqueia. */
.jx-trilha{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px;padding:0;list-style:none}
.jx-trilha li{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:#fff;border:1px solid var(--line,#e9e2d8);color:#5a6472;
  font:600 11.5px/1 Inter,system-ui,sans-serif}
.jx-trilha li b{font-family:inherit;font-weight:800;color:#0f3f7a}
.jx-trilha li.on{background:#eef6fc;border-color:#bfe0f4;color:#0f3f7a}
.jx-trilha li.done{background:#eaf7f0;border-color:#cfe6d8;color:#16794a}
.jx-trilha li .jx-n{font-weight:800}

/* pílula com nome em cima e preço embaixo — altura igual para todas */
.ft-banner-pills .ft-pill b.jx-preco{display:block;margin-top:2px}
@media (max-width:680px){
  .ft-banner-pills .ft-pill{display:flex;flex-direction:column;justify-content:center;
    min-height:44px;padding:7px 6px}
}

/*ajustes-616.css*/
/* ════════════════════════════════════════════════════════════════════
   ajustes-616.css — a home do cliente depois do rabisco de 18/10/2026

   Camada por cima do pacote, do mesmo jeito que a ajustes-615: não mexe
   no app.js minificado nem no estilos.css. Para desfazer, apague este
   arquivo, o ajustes-616.js e as linhas de include nas páginas.

   Ajustes aqui (os 6 aprovados como baratos):
     1  título do herói sem o "pisca" de texto trocando
     3  barra de cookies em 1 linha
     4  nome do produto inteiro no card da vitrine
     6  "Onde está meu pedido?" sai da vitrine e vai para o topo
     7  preço visível na primeira tela do celular
     9  aviso de preço da vitrine em 1 linha

   Os ajustes 2, 5 e 8 (estrutura da vitrine) NÃO estão aqui: eles mexem
   no peso da página e vão ser mostrados em duas versões antes de decidir.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. herói: o texto troca sem "pisca" ─────────────────────────────
   O pacote abre com uma frase e o app troca pelo texto do painel quando
   a configuração do ERP chega. Medi os dois lados: o site no ar mudou
   de frase entre uma visita e outra no mesmo dia — ou seja, a troca não
   é rara, é o comportamento normal.

   A cura de verdade é fonte única (o pacote nascer com o texto do
   painel), e isso é mudança de build, não de camada. Aqui eu faço o que
   dá sem mexer no app.js: a troca acontece, mas suave — 180 ms de
   esmaecimento, sem pulo de linha.

   Tentei antes esconder o título até o texto do ERP chegar. Descartei:
   em rede lenta o herói ficava 2,1 s em branco, e herói em branco é
   pior que herói que troca de frase. */
#hero-titulo, #hero-sub {
  transition: opacity .18s ease;
}
html.jx-hero-trocando #hero-titulo,
html.jx-hero-trocando #hero-sub { opacity: .35; }

/* ── 7. preço na primeira tela ────────────────────────────────────────
   O primeiro preço da home ficava a 876 px numa tela de 844 px: nenhum
   preço na primeira dobra. Este selo mostra o menor preço REAL do
   catálogo — se o catálogo não carregar, ele simplesmente não aparece. */
.jx-ck-curta { display: none; }

.jx-hero-preco {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 2px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #eaf3fa;
  font-size: 13.5px;
  line-height: 1.2;
}
.jx-hero-preco b { color: #fff; font-size: 15px; font-weight: 800; }
.jx-hero-preco .jx-hp-de { color: #9fc3dd; font-size: 12px; text-transform: lowercase; }
@media (max-width: 680px) {
  .jx-hero-preco { font-size: 12.5px; padding: 5px 10px; gap: 6px; }
  .jx-hero-preco b { font-size: 13.5px; }
}

/* ── 3. barra de cookies em 1 linha ───────────────────────────────────
   Com 98 px ela cobria 2 dos 5 cards no desktop e ~12% da tela no
   celular, e só saía se o cliente clicasse. Vira faixa fina. */
.cookie-bar {
  padding: 7px 14px !important;
  align-items: center !important;
  gap: 10px !important;
}
.cookie-bar p {
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cookie-bar p b { font-weight: 700; }
.cookie-bar .cookie-bts { flex: 0 0 auto; gap: 6px !important; }
.cookie-bar .cookie-bts .btn {
  padding: 4px 11px !important;
  font-size: 12px !important;
  min-height: 0 !important;
  line-height: 1.5 !important;
}
/* No celular a conta é mais dura: cada pixel fixo é produto que o
   cliente não vê. Aqui a faixa fica em UMA linha — o texto encurta com
   reticência, o link da Política e os dois botões nunca encolhem. */
@media (max-width: 680px) {
  /* nowrap é o que impede os botões de caírem para a linha de baixo:
     sem isso a faixa fica com 56 px em vez de ~30 px. */
  .cookie-bar { padding: 5px 9px !important; gap: 7px !important; flex-wrap: nowrap !important; }
  .cookie-bar p {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: visible;
  }
  .cookie-bar p .jx-ck-long { display: none; }
  .cookie-bar p .jx-ck-curta { display: inline; }
  .cookie-bar p .jx-ck-txt { margin-right: 4px; }
  .cookie-bar p .jx-ck-txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cookie-bar p a { flex: 0 0 auto; white-space: nowrap; }
  .cookie-bar .cookie-bts { gap: 5px !important; }
  .cookie-bar .cookie-bts .btn {
    padding: 3px 7px !important;
    font-size: 10.5px !important;
    white-space: nowrap;
  }
  /* "Só essenciais" vira "Essenciais": 12 px a menos de largura fixa */
  .cookie-bar .cookie-bts .btn-o { font-size: 0 !important; }
  .cookie-bar .cookie-bts .btn-o::after { content: "Essenciais"; font-size: 11px; }
}

/* ── 4. nome do produto inteiro ───────────────────────────────────────
   O app corta o nome em 28 caracteres ("Bolinha de Natal em Acrílico…").
   Nome é exatamente o que o cliente procura. Aqui o card ganha duas
   linhas de 13,5 px e só corta depois da segunda. */
#grid-inicio .prod .bd > b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px !important;
  line-height: 1.28 !important;
  min-height: 2.56em;      /* reserva as 2 linhas: os cards alinham */
  word-break: break-word;
}

/* ── 6. "Onde está meu pedido?" no topo ───────────────────────────────
   Ele ocupava o mesmo espaço de um produto na vitrine de entrada. É
   serviço, não vitrine. Vira link discreto no topo e o grid volta a ter
   4 portas de produto. */
.jx-rastreio-topo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 9px;
  color: #0d2740;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.jx-rastreio-topo:hover { background: var(--brand-soft); color: var(--brand); }
.jx-rastreio-topo svg { flex: 0 0 auto; }
/* abaixo de 900 px o topo já está cheio: esconde da barra e deixa na tabbar */
@media (max-width: 900px) { .jx-rastreio-topo { display: none; } }

/* o card azul ("Onde está meu pedido?") sai da vitrine: o JS só o marca,
   o CSS esconde. Se o JS não rodar, o card continua lá — nada desaparece
   por acidente. */
.jx-mission-blue-movido { display: none !important; }

/* ── 9. aviso de preço em 1 linha ─────────────────────────────────────
   O pacote limita o aviso a 600 px, o que o joga em 2 linhas mesmo no
   desktop com 1.200 px livres. Aqui o limite sobe o suficiente para a
   frase caber inteira numa linha, sem mexer no texto.
   No celular não há largura para tanta palavra: entra uma redação curta
   (o CSS escolhe), e a promessa continua dita — "o final confirmamos no
   WhatsApp" — em vez de reticência no meio da frase. */
#home-destaques .intro { max-width: 860px !important; }
.jx-aviso-curto { display: none; }

@media (max-width: 680px) {
  #home-destaques .intro { max-width: 100% !important; font-size: 11.5px !important; line-height: 1.35 !important; }
  .jx-aviso-longo { display: none; }
  .jx-aviso-curto { display: inline; }
}

/*ajustes-617.css*/
/* ════════════════════════════════════════════════════════════════════
   ajustes-617.css — segunda revisão da home (18/10/2026, à noite)

   Camada por cima do 6.16.0, do mesmo jeito que as anteriores: não mexe
   no app.js nem no estilos.css. Para desfazer, apague este arquivo, o
   ajustes-617.js e as linhas de include nas páginas.

   O que entrou aqui, decidido pelo dono em 18/10:
     A. os três passos do herói ficam mais fortes (variante B do rabisco)
     B. o selo do Google vira "um por vez", girando
     C. o bloco de avaliações vira "um por vez", com setas e bolinhas
     D. o cartão da nota do Google cabe em duas linhas
   ════════════════════════════════════════════════════════════════════ */

/* ── A. os três passos, mais fortes ───────────────────────────────────
   Não era contraste (medi 14,2:1 no título e 7,9:1 na descrição — muito
   acima da norma). Era hierarquia: cinza sobre azul, sem peso, o olho
   passa direto. Aqui o fundo ganha corpo, o título cresce e a descrição
   clareia. O número vira o ponto de ancoragem da leitura. */
#passos .passo,
.hm-passos .passo {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .34) !important;
}
#passos .passo b,
.hm-passos .passo b {
  font-size: 15.5px !important;
  letter-spacing: .1px;
}
#passos .passo span:not(.p-n),
.hm-passos .passo span:not(.p-n) {
  font-size: 13.5px !important;
  color: #eaf2fb !important;
  line-height: 1.45 !important;
}
#passos .p-n,
.hm-passos .p-n {
  width: 38px !important;
  height: 38px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: #fbbf24 !important;
  color: #3b2a00 !important;
  border: 0 !important;
}
/* o número cresceu: a coluna do card precisa acompanhar, senão o texto
   encosta nele no celular */
@media (max-width: 900px) {
  #passos .passo,
  .hm-passos .passo { grid-template-columns: 38px 1fr !important; column-gap: 12px !important; }
}

/* ── B. selo do Google: um quadro por vez ─────────────────────────────
   Eram quatro informações na mesma linha (estrelas, nota, ícone do
   Google, retirada em Bangu) — 78 px no celular, duas linhas. Agora são
   dois quadros de uma linha cada, com bolinhas embaixo: 34 px.

   O JS monta a estrutura; aqui só o comportamento visual. Se o JS não
   rodar, o selo continua como está hoje — nada desaparece. */
#selo-google-capa { margin-top: 12px !important; }
#selo-google-capa .selo-google {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: auto !important;
  max-width: 100%;
  position: relative;
  min-height: 28px;
  align-items: center;
  padding: 6px 12px !important;
}
#selo-google-capa .jx-gslides {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  height: 20px;
}
#selo-google-capa .jx-gslide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
#selo-google-capa .jx-gslide.on { opacity: 1; transform: none; pointer-events: auto; }
#selo-google-capa .jx-gdots {
  display: flex;
  gap: 5px;
  margin-left: 9px;
  flex: 0 0 auto;
}
#selo-google-capa .jx-gdot {
  width: 5px; height: 5px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
}
#selo-google-capa .jx-gdot.on { background: #fbbf24; width: 14px; }

/* ── C e D. bloco de avaliações ───────────────────────────────────────
   No ar ele tem 5 depoimentos abertos: 1.346 px no celular e 589 px no
   computador. Vira um quadro só, com setas e bolinhas — 255 e 241 px.
   As cinco avaliações continuam todas na página. */
#prova-social { padding: 26px 0 6px !important; }

/* D. cartão da nota em duas linhas (era 93 px; fica 63 px) */
#prova-social .prova-nota {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  min-height: 0 !important;
  margin: 0 auto 12px !important;
  max-width: 640px !important;
}
#prova-social .prova-nota .pg-logo {
  width: 20px !important; height: 20px !important;
  flex: 0 0 auto; margin: 0 !important;
}
#prova-social .prova-nota .pg-logo svg { width: 20px !important; height: 20px !important; display: block; }
#prova-social .prova-nota .pg-txt {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}
#prova-social .prova-nota .pg-linha {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
#prova-social .prova-nota .pg-txt > span {
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
#prova-social .prova-nota .btn {
  padding: 5px 11px !important;
  font-size: 11.5px !important;
  line-height: 1.1 !important;
  flex: 0 0 auto;
}

/* C. os depoimentos, um por vez */
#prova-social .prova-deps {
  display: block !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}
#prova-social .jx-rv {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 50px 13px 15px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#prova-social .jx-rv-quadro { display: none; }
#prova-social .jx-rv-quadro.on { display: block; }
#prova-social .jx-rv .estrelas { color: #f2b01e; font-size: 12px; letter-spacing: 1px; line-height: 1; }
#prova-social .jx-rv blockquote {
  margin: 4px 0 8px !important;
  font-size: 13.5px !important;
  line-height: 1.42 !important;
  color: #233348 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#prova-social .jx-rv figcaption {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12px !important;
  color: #5b6b7e !important;
  margin: 0 !important;
}
#prova-social .jx-rv .av {
  width: 22px; height: 22px;
  border-radius: 99px;
  background: #e9f1f8;
  color: #0b63a8;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 10.5px;
  flex: 0 0 auto;
}
#prova-social .jx-rv-setas {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#prova-social .jx-rv-setas button {
  width: 26px; height: 26px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: #fff;
  color: #0d2740;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
#prova-social .jx-rv-setas button:hover { background: #eef4f9; }
#prova-social .jx-rv-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 9px;
}
#prova-social .jx-rv-dots button {
  width: 6px; height: 6px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: #cdd9e5;
  cursor: pointer;
}
#prova-social .jx-rv-dots button.on { background: #0b63a8; width: 16px; }
/* alvo de toque confortável sem engordar a bolinha */
#prova-social .jx-rv-dots button { position: relative; }
#prova-social .jx-rv-dots button::after {
  content: ""; position: absolute; inset: -8px -5px;
}

/* ── quem pediu menos movimento, recebe menos movimento ───────────────
   Sem giro automático: os dois carrosséis ficam parados no primeiro
   quadro e só andam no clique/toque. */
@media (prefers-reduced-motion: reduce) {
  #selo-google-capa .jx-gslide,
  #prova-social .jx-rv-quadro { transition: none !important; }
}

/* ── E. "Avaliar" vira botão de verdade ───────────────────────────────
   Era um contorno de 62×25 px com texto de 11,5 px — parecia legenda, não
   convite. O botão é o único caminho para o cliente deixar avaliação no
   Google, e avaliação é o que sustenta o 5,0 do perfil. Aqui ele ganha
   corpo: fundo azul cheio, 36 px de altura, texto branco em 12,5 px.
   Contraste medido: 6,24:1 (a norma pede 4,5:1 para texto pequeno). */
#prova-social .prova-nota .btn {
  background: #0b63a8 !important;
  border-color: #0b63a8 !important;
  color: #fff !important;
  padding: 9px 16px !important;
  min-height: 36px;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(11, 99, 168, .25);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
#prova-social .prova-nota .btn:hover,
#prova-social .prova-nota .btn:focus {
  background: #084d82 !important;
  border-color: #084d82 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11, 99, 168, .32);
}
#prova-social .prova-nota .btn:focus-visible {
  outline: 3px solid #0b63a8;
  outline-offset: 2px;
}

/* no celular o cartão é estreito: o texto pode quebrar em duas linhas em
   vez de virar reticência, e o botão desce se faltar espaço */
@media (max-width: 600px) {
  #prova-social .prova-nota { flex-wrap: wrap !important; padding: 10px 12px !important; }
  #prova-social .prova-nota .pg-txt { flex: 1 1 150px !important; }
  #prova-social .prova-nota .pg-txt > span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  #prova-social .prova-nota .btn { padding: 8px 13px !important; }
}

/* legenda do Google: duas redações, o CSS escolhe (ver ajustes-617.js) */
.jx-gtxt-curto { display: none; }
@media (max-width: 600px) {
  .jx-gtxt-longo { display: none; }
  .jx-gtxt-curto { display: inline; }
  /* Com a legenda curta o botão volta para a mesma linha. Para caber em
     342 px sem quebrar, as duas linhas de texto ficam em nowrap e o
     botão afina um pouco — o cartão fica com uma linha só. */
  #prova-social .prova-nota {
    flex-wrap: nowrap !important;
    gap: 7px !important;
    padding: 8px 11px !important;
  }
  #prova-social .prova-nota .pg-txt { flex: 1 1 auto !important; gap: 0 !important; }
  #prova-social .prova-nota .pg-linha { font-size: 13.5px !important; white-space: nowrap !important; }
  #prova-social .prova-nota .pg-txt > span { font-size: 10.5px !important; white-space: nowrap !important; }
  #prova-social .prova-nota .btn {
    padding: 7px 10px !important;
    font-size: 11.5px !important;
    min-height: 34px;
    flex: 0 0 auto;
  }
}

/* 6.17.0 — endereço no rodapé (vem do config, mesma coluna do Contato) */
.foot .f-col .f-end{align-items:flex-start;white-space:normal;line-height:1.45;max-width:30ch}
.foot .f-col .f-end::before{margin-top:2px}
@media(max-width:520px){ .foot .f-col .f-end{max-width:none} }

/*ajustes-620-modulos.css*/
/* ════════════════════════════════════════════════════════════════════
   ajustes-620-modulos.css — MÓDULOS (19/10/2026)
   Adesivos (#/montador), Fotos (/fotos.html) e Polaroid (/polaroid.html)

   Escopo: SÓ o card de escolha dos módulos + o cabeçalho de seção.
   1. .fpc (fotos) · .mat-kit (adesivos) · .pol-kit (polaroid)
      → mesma anatomia de 6 zonas, mesma altura de fileira
   2. .vt-shead — cabeçalho de seção numerado
   3. .ft-banner-eyebrow / garantias — ritmo das bandas de módulo

   NÃO toca em: vitrine, catálogo, home, ficha, frete, ERP.
   Não mexe em preço, faixa, desconto nem estoque.
   Para desfazer: apagar este arquivo, o .js e as linhas de include.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --vt-ink:#082040;
  --vt-muted:#5b6b7e;
  --vt-muted2:#7b8aa0;
  --vt-line:#e4eaf1;
  --vt-cream:#f4f1ea;
  --vt-ok:#0f7a4d;
  --vt-ok-bg:#e8f7ef;
  --vt-brand:#3B3A96;   /* 6.33.0: era #0888c8 (azul antigo) — o selecionado ficava azul no meio da loja índigo */
  --vt-r:18px;
}

/* ── 1. CARD DE ESCOLHA ────────────────────────────────────────────
   Mesma anatomia nos três módulos:
     mídia 4:3 → selo curto → título 2 linhas → apelido 1 linha
     → preço (valor + unidade) → faixas → até 2 bullets → rodapé
   A altura de cada zona é reservada, então as fileiras fecham retas.
   ───────────────────────────────────────────────────────────────── */

.fpc, .mat-kit, .pol-kit{
  /* sem `display` aqui de propósito: o módulo de Fotos esconde os cards
     da outra aba com style inline (display:none). Forçar display quebrava
     o filtro "Só a Foto no Papel" / "Com Porta-Retrato". O card já nasce
     flex no portal, então não perdemos nada. */
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
  padding:0 !important;
  background:#fff !important;
  border:1.5px solid var(--vt-line) !important;
  border-radius:var(--vt-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;
}
.fpc:hover, .mat-kit:hover, .pol-kit:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 22px 40px -26px rgba(8,32,64,.45) !important;
  border-color:#cfe4f4 !important;
}
.fpc.on, .mat-kit.on, .pol-kit.on{
  border-color:var(--vt-brand) !important;
  box-shadow:0 0 0 3px rgba(8,136,200,.14), 0 22px 40px -26px rgba(8,32,64,.45) !important;
}

/* mídia: no módulo a foto é ambiente (sangrada, 4:3) */
.fpc .fpc-photo,
.mat-kit .mat-photo,
.pol-kit .ph{
  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;
}
/* véu suave embaixo, igual ao card do catálogo */
.fpc .fpc-photo::after,
.mat-kit .mat-photo::after,
.pol-kit .ph::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;
}

/* selo curto — o texto comprido vira chip no corpo (ver ajustes-620.js) */
.fpc .fpc-badge,
.mat-kit .mat-badge{
  top:10px !important; left:10px !important;
  max-width:calc(100% - 60px) !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-size:9.5px !important; font-weight:800 !important; letter-spacing:.04em !important;
  text-transform:uppercase !important;
  padding:4px 9px !important; border-radius:999px !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
/* check de selecionado: sempre no mesmo canto, sempre do mesmo tamanho */
.fpc .fpc-check,
.mat-kit .mat-check{
  top:10px !important; right:10px !important; left:auto !important;
  width:24px !important; height:24px !important;
  display:grid !important; place-items:center !important;
  border-radius:999px !important;
  font-size:12px !important; font-weight:900 !important;
}

/* corpo: mesma escada tipográfica nos três */
.fpc .fpc-body{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:14px 15px 16px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
.mat-kit .mat-body,
.pol-kit .corpo{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:14px 15px 0 !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
.fpc .fpc-n,
.mat-kit .mat-name,
.pol-kit h2{
  font-family:Sora,system-ui,sans-serif !important;
  font-size:15px !important; font-weight:600 !important;
  line-height:1.34 !important; letter-spacing:-.015em !important;
  color:var(--vt-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;
}
.fpc .fpc-apelido,
.mat-kit .mat-apelido,
.pol-kit .apelido{
  font-family:Inter,system-ui,sans-serif !important;
  font-size:11.5px !important; font-weight:500 !important;
  line-height:1.4 !important; color:var(--vt-muted) !important;
  margin:4px 0 0 !important;
  min-height:1.4em !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}

/* chips de atributo (o que era a segunda metade do selo) */
.vt-chips{display:flex; gap:5px; margin:9px 0 0; overflow:hidden; white-space:nowrap; height:21px; flex:0 0 auto}
.vt-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}

/* preço: rótulo pequeno + valor + unidade discreta — nunca quebra */
.fpc .fpc-price-row,
.mat-kit .mat-price-row,
.pol-kit .pr{
  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;
}
.fpc .fpc-p,
.mat-kit .mat-price,
.pol-kit .pr{
  font-family:Sora,system-ui,sans-serif !important;
  font-size:24px !important; font-weight:800 !important;
  line-height:1 !important; letter-spacing:-.03em !important;
  color:var(--vt-ink) !important;
  font-variant-numeric:tabular-nums !important;
  display:flex !important; align-items:baseline !important; gap:3px !important;
}
.fpc .fpc-p small,
.mat-kit .mat-price small,
.pol-kit .pr small,
.pol-kit .pr span{
  font-family:Inter,system-ui,sans-serif !important;
  font-size:11.5px !important; font-weight:600 !important;
  color:var(--vt-muted2) !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

/* faixas: pílulas em uma linha só, com respiro */
.fpc .fpc-tiers,
.mat-kit .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;
}
.fpc .fpc-tier,
.mat-kit .mat-tier{
  font-family:Inter,system-ui,sans-serif !important;
  font-size:10.5px !important; font-weight:700 !important;
  background:var(--vt-ok-bg) !important; color:var(--vt-ok) !important;
  border:1px solid #c6ebd6 !important; border-radius:999px !important;
  padding:3px 8px !important; white-space:nowrap !important;
}
.fpc .fpc-tier b,
.mat-kit .mat-tier b{font:inherit !important; font-weight:800 !important; color:var(--vt-ok) !important; letter-spacing:0 !important}

/* bullets: no máximo 2, uma linha cada */
.fpc .fpc-bullets,
.mat-kit .mat-bullets,
.pol-kit ul{
  margin:9px 0 0 !important; padding:0 !important;
  list-style:none !important;
  display:flex !important; flex-direction:column !important; gap:3px !important;
}
.fpc .fpc-bullets li,
.mat-kit .mat-bullets li,
.pol-kit ul li{
  position:relative !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-size:11px !important; line-height:1.45 !important;
  color:var(--vt-muted) !important;
  padding-left:14px !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
.fpc .fpc-bullets li::before,
.mat-kit .mat-bullets li::before,
.pol-kit ul li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:7px; height:7px; border-radius:2px;
  background:#bcd2e6;
}
.fpc .fpc-bullets li:nth-child(n+3),
.mat-kit .mat-bullets li:nth-child(n+3),
.pol-kit ul li:nth-child(n+3){display:none !important}
.mat-kit .mat-bullets li::before{content:"" !important}

/* rodapé do card: mesma altura em todos, com a ação */
.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;
}
.vt-cardfoot .pra{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:var(--vt-muted2); white-space:nowrap}
.vt-cardfoot .pra::before{
  content:""; width:12px; height:12px; flex:0 0 12px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8aa0' stroke-width='2.4' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5V12l3 2'/></svg>") center/contain no-repeat;
}
.vt-cardfoot .go{font-size:11.5px; font-weight:800; color:var(--vt-brand); display:inline-flex; align-items:center; gap:4px; transition:gap .2s}
.fpc:hover .vt-cardfoot .go, .mat-kit:hover .vt-cardfoot .go, .pol-kit:hover .vt-cardfoot .go{gap:8px}
.fpc.on .vt-cardfoot .go, .mat-kit.on .vt-cardfoot .go, .pol-kit.on .vt-cardfoot .go{color:var(--vt-ok)}
.fpc.on .vt-cardfoot .go::after, .mat-kit.on .vt-cardfoot .go::after, .pol-kit.on .vt-cardfoot .go::after{content:"✓"}

/* nota única do grupo (substitui o bullet repetido em cada kit) */
.vt-nota-grupo{
  margin:10px 0 0; font-family:Inter,system-ui,sans-serif;
  font-size:11.5px; line-height:1.5; color:var(--vt-muted2);
  display:flex; align-items:flex-start; gap:6px;
}
.vt-nota-grupo::before{content:"ⓘ"; font-weight:800; color:#9fb2c6}

/* ── 2. CABEÇALHO DE SEÇÃO ────────────────────────────────────────
   Mesmo desenho do rabisco: número + título + linha de apoio.
   ───────────────────────────────────────────────────────────────── */
.vt-shead{display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:start; margin:26px 0 14px}
.vt-shead .n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--vt-brand); border-top:2px solid var(--vt-brand); padding-top:8px}
.vt-shead h2, .vt-shead .h{font-family:Sora,system-ui,sans-serif !important; font-size:19px !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--vt-ink) !important; margin:0 !important; line-height:1.2 !important}
.vt-shead p{margin:5px 0 0 !important; font-size:12.8px !important; line-height:1.5 !important; color:var(--vt-muted) !important; max-width:70ch}

/* ── 3. BANDA DE MÓDULO (cabeçalho das telas) ─────────────────────
   Só iguala ritmo: eyebrow mono, título serif, tags, CTA, garantias.
   ───────────────────────────────────────────────────────────────── */
.ft-banner-eyebrow, .pb-eyebrow, .mont-eyebrow{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size:10px !important; letter-spacing:.14em !important;
  text-transform:uppercase !important; font-weight:700 !important;
  color:#64748b !important; margin:0 0 8px !important;
}
.ft-banner-garantias, .pb-garantias, .mont-garantias{
  display:flex !important; gap:14px !important; flex-wrap:wrap !important;
  margin-top:14px !important; padding-top:12px !important;
  border-top:1px solid rgba(8,32,64,.10) !important;
  font-size:11.5px !important; color:#4a5d73 !important;
}
.ft-banner-garantias b, .pb-garantias b, .mont-garantias b{color:var(--vt-ok) !important}

/* telas estreitas: card de escolha em 2 e depois 1 coluna */
@media(max-width:1024px){
  .fpc, .mat-kit, .pol-kit{min-width:0}
}

/*ajustes-625-padrao.css*/
/* ════════════════════════════════════════════════════════════════════
   ajustes-625-padrao.css — PADRONIZAÇÃO DE ESTILO (21/10/2026 · 6.25.1)
   Rabisco aprovado: RABISCO-PADRONIZACAO-COMPONENTES.html (D1–D5)

   Escopo: SÓ estilo — nenhuma foto e nenhum texto de página é trocado.
     D2+D3 · banner claro (polaroid, fotos, cartões) = raio 22 + sombra
             suave do montador, que é a base de design
     D1    · CTA do herói das páginas = roxo da identidade, raio 12
             (a home mantém a pílula rosa; agendas têm o próprio override)
     D4    · estado selecionado das pills = índigo da identidade (6.33.0)
             o mesmo azul que o ajustes-620-modulos.css já usa nos cards
     D5    · selo "a partir de" sobre a foto dos banners e da banda
             escura da home (.vt-selo-preco)

   Os cards de produto NÃO estão aqui: o padrão deles (.pol-kit da
   polaroid) já vive em ajustes-620-modulos.css + ajustes-620-modulos.js
   e cobre .fpc / .mat-kit / .pol-kit nas quatro páginas.

   NÃO toca em: vitrine, catálogo, ficha, frete, ERP, agendas.
   Não mexe em preço, faixa, desconto nem estoque.
   Para desfazer: apagar este arquivo e as 4 linhas de include.
   ════════════════════════════════════════════════════════════════════ */

/* ── D2+D3 · banner claro: raio e sombra do montador (a base) ───── */
.pol-banner,
.ft-banner{
  border-radius:22px !important;
  box-shadow:0 12px 32px rgba(15,23,42,.06) !important;
}

/* ── D1 · CTA do herói das páginas: roxo identidade, raio 12 ────── */
.ades-banner .btn-hero-dark,
.ft-banner .btn-hero-dark{
  background:#3b3a96;
  border-radius:12px;
}
.ades-banner .btn-hero-dark:hover,
.ft-banner .btn-hero-dark:hover{
  background:#2e2d7a;
}

/* ── D4 · seleção das pills: azul da loja (como os cards e o ──────
   .ab-pill.on do montador). Só o estado selecionado — o texto de
   preço de cada página mantém a cor da sua identidade. ──────────── */
.pb-pill.on,
.ft-pill.on{
  border-color:var(--brand) !important;
  background:#f0f9ff !important;
}

/* ── D5 · selo "a partir de" sobre a foto ─────────────────────────
   Vai dentro do elemento de foto do banner (.pb-foto, .ft-banner-img)
   e da banda escura da home (.photo-entry-art). Só CSS: o texto do
   selo é markup estático em cada página, com o preço real dela. ── */
.vt-selo-preco{
  position:absolute; left:14px; bottom:14px; z-index:3;
  display:inline-flex; align-items:baseline; gap:5px;
  background:rgba(8,32,64,.82); color:#fff;
  border-radius:999px; padding:7px 13px;
  font-family:Inter,system-ui,sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.01em;
  backdrop-filter:blur(4px);
  box-shadow:0 6px 16px -8px rgba(8,32,64,.6);
  pointer-events:none;
}
.vt-selo-preco b{
  font-family:Sora,system-ui,sans-serif;
  font-size:13.5px; font-weight:800; letter-spacing:-.01em;
}
.photo-entry-art{ position:relative; }
@media(max-width:760px){
  .vt-selo-preco{ left:10px; bottom:10px; padding:6px 11px; font-size:10.5px; }
  .vt-selo-preco b{ font-size:12.5px; }
}

/*camada-621-identidade.css*/
/* ════════════════════════════════════════════════════════════════
   camada 6.21-B — IDENTIDADE (paleta do logo, regra 19 da casa)
   #3B3A96 · #EC0F8C · #F4F1EA · #FFF
   ─────────────────────────────────────────────────────────────────
   contraste com texto branco:  brand 9,41 ✓   pink 4,19 (só texto grande)
   contraste ink/paper: 14,89 ✓
   ════════════════════════════════════════════════════════════════ */
:root{
  --ink:#191842;            /* azul-tinta da família do logo, não o navy frio */
  --ink-2:#292862;
  --paper:#F4F1EA;          /* papel quente do logo */
  --brand:#3B3A96;
  --brand-2:#5C5AC8;
  --brand-soft:#ECEBF9;
  --pink:#EC0F8C;
  --indigo:#3B3A96;
  --line:#E3DED2;
  --muted:#5F5C6B;
  --gold:#F5C518;
}
a{color:var(--brand)}
.btn-b{background:var(--brand);color:#fff}
.btn-y{background:linear-gradient(180deg,#F53BA6,#EC0F8C);color:#fff;box-shadow:0 10px 22px -12px rgba(236,15,140,.6)}
.btn-wa,.btn-wa-topo{background:#25d366!important;border-color:#25d366!important;color:#0d3a1e!important}
/* superfícies quentes */
body,.page,.home,.catalogo,polaroid,main{background:var(--paper)}
.card,.prod,.fpc,.pd-card,.tl-card,.at-card,.fr-op{background:#fff}

/*ajustes-626-menumega.css*/
/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL VTDIGITAL v6.29.5 — MEGA-MENU EXECUTIVO + GAVETA MOBILE + BARRA NAVY
   1. Mega-Menu Desktop (≥ 961px): 7 categorias organizadas em 1 linha:
      Catálogo (só miniatura 42×42 antes do nome, sem foto maior lateral) ·
      Gráfica & Papelaria · Adesivos & Etiquetas · Fotos & Polaroid ·
      Brindes · Impressão 3D (separado) · Atendimento (com Gabaritos).
   2. Gaveta Mobile (≤ 960px): todas as seções sincronizadas sem páginas órfãs
      e sem emojis quebrados (zero 🪪 / ▯).
   3. Página #/catalogo: filtro e 3 cards visuais de Fotos & Polaroid c/ fotos.
   4. Barra Executiva Navy (.vtx-exec-foot / .polx-exec-foot): padronizada e
      visível desde a abertura em todos os módulos do Portal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. BARRA DE TOPO DO MEGA-MENU (escondida no celular ≤ 960px) ── */
.aj626-bar {
  display: none;
}

.aj626-mae {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  height: 34px;
  padding: 0 9px;
  border-radius: 9px;
  font: 600 12px/1 var(--font-b, Inter, system-ui, sans-serif);
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.14s ease, color 0.14s ease;
}
.aj626-mae:hover,
.aj626-mae.hv {
  color: #082040;
  background: #F1F5F9;
}
.aj626-mae.on {
  color: #3B3A96;
  background: #EEF0FF;
  font-weight: 700;
}
.aj626-mae .st {
  font-size: 8px;
  color: #7B8AA0;
  transition: transform 0.15s ease;
}
.aj626-mae.hv .st {
  transform: rotate(180deg);
}

/* ── PAINEL DROPDOWN DO MEGA-MENU ── */
.aj626-p {
  position: fixed;
  z-index: 9400;
  width: 530px;
  max-width: calc(100vw - 16px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 205px;
  background: #FFFFFF;
  border: 1px solid #DCE3EC;
  border-radius: 16px;
  box-shadow: 0 24px 48px -20px rgba(8, 32, 64, 0.32);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.aj626-p.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Modo Catálogo: SÓ a miniatura antes do nome, SEM foto maior na lateral */
.aj626-p.single-col {
  width: 520px;
  grid-template-columns: minmax(0, 1fr);
}
.aj626-p.single-col .aj626-foto {
  display: none !important;
}

.aj626-p::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--seta, 24px);
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  border-left: 1px solid #DCE3EC;
  border-top: 1px solid #DCE3EC;
  transform: rotate(45deg);
  z-index: 3;
}

.aj626-esq {
  padding: 10px 11px 11px;
  min-width: 0;
}
.aj626-tit {
  display: block;
  font: 800 9.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8A9BB0;
  padding: 2px 8px 7px;
}
.aj626-p ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.aj626-p li a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #1E293B;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background 0.12s ease, color 0.12s ease;
  min-width: 0;
}
.aj626-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: #F1F5F9;
  background-size: cover;
  background-position: center;
  border: 1px solid #E2E8F0;
  flex: 0 0 36px;
}
.aj626-p.single-col .aj626-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex: 0 0 42px;
}
.aj626-txwrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.aj626-p li a .tx {
  font: 700 12.5px/1.22 var(--font-b, Inter, sans-serif);
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aj626-sub {
  font: 500 10.5px/1.25 var(--font-b, Inter, sans-serif);
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aj626-prc {
  font: 700 10px/1 var(--font-b, Inter, sans-serif);
  color: #475569;
  background: #F1F5F9;
  padding: 4px 8px;
  border-radius: 999px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.aj626-p li a .n {
  font: 800 9.5px/1 ui-monospace, monospace;
  color: #3B3A96;
  background: #EEF0FF;
  border: 1px solid #D6DAFF;
  border-radius: 999px;
  padding: 3px 7px;
  flex: 0 0 auto;
}
.aj626-p li a::after {
  content: "›";
  color: #CBD5E1;
  font-weight: 800;
  font-size: 14px;
  flex: 0 0 auto;
}
.aj626-p li a:hover,
.aj626-p li a.on {
  background: #F4F5FF;
  color: #3B3A96;
}
.aj626-p li a:hover .tx,
.aj626-p li a.on .tx {
  color: #3B3A96;
}
.aj626-p li a:hover::after,
.aj626-p li a.on::after {
  color: #3B3A96;
}

.aj626-foto {
  min-height: 210px;
  background: #082040 center / cover no-repeat;
  border-left: 1px solid #EEF2F7;
  border-radius: 0 15px 15px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
}
.aj626-cap {
  background: linear-gradient(to top, rgba(8, 32, 64, 0.92) 0%, rgba(8, 32, 64, 0.65) 68%, rgba(8, 32, 64, 0) 100%);
  color: #FFFFFF;
  padding: 28px 12px 12px;
}
.aj626-cap b {
  display: block;
  font: 700 12.5px/1.25 var(--font-b, Inter, sans-serif);
  color: #FFFFFF;
}
.aj626-cap span {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font: 700 10.5px/1.1 var(--font-b, Inter, sans-serif);
  color: #FFFFFF;
}

.aj626-fade {
  animation: aj626fade 0.16s ease;
}
@keyframes aj626fade {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@media (min-width: 961px) {
  html.aj626 .deptbar .dept-inner > #nav-main,
  html.aj626 .deptbar .dept-inner > #dept-links {
    display: none !important;
  }
  html.aj626 .aj626-bar {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html.aj626 .aj626-bar::-webkit-scrollbar {
    display: none;
  }
}

/* ── 2. GAVETA MOBILE ORGANIZADA (≤ 960px, #drawer-itens) ── */
.aj626-drw-sec {
  display: block;
  padding: 10px 14px 4px;
  margin-top: 4px;
  font: 800 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3B3A96;
  border-top: 1px solid #EEF2F7;
}
.aj626-drw-sec:first-child {
  border-top: 0;
  margin-top: 0;
}
.drawer-nav a.aj626-drw-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #082040;
  text-decoration: none;
  border-radius: 10px;
}
.drawer-nav a.aj626-drw-link small {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  flex-shrink: 0;
}
.drawer-nav a.aj626-drw-link.on {
  background: #EEF0FF;
  color: #3B3A96;
}

/* ── 3. CARDS DE FOTOS & POLAROID DENTRO DE #/catalogo ── */
.vtx-cat-studio-card {
  cursor: pointer;
}
.vtx-cat-studio-card .c623-photo {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative;
}
.vtx-cat-studio-card .c623-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.vtx-cat-studio-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(8, 32, 64, 0.86);
  color: #FFFFFF;
  font: 800 9.5px/1 var(--font-b, Inter, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
}

/* ── 4. BARRA EXECUTIVA NAVY UNIFICADA EM TODOS OS MÓDULOS ── */
.vtx-exec-foot,
.polx-exec-foot {
  background: linear-gradient(125deg, #082040 0%, #0F3562 100%) !important;
  color: #FFFFFF !important;
  border-radius: 18px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  box-shadow: 0 16px 32px -20px rgba(8, 32, 64, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-sizing: border-box !important;
}
.vtx-exec-foot-wrap {
  max-width: 1200px;
  margin: 18px auto 26px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
.vtx-foot-left,
.polx-foot-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 280px;
}
.vtx-foot-kicker,
.polx-foot-kicker {
  font: 800 10px/1.2 var(--font-b, Inter, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93C5FD !important;
}
.vtx-foot-price-row,
.polx-foot-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.vtx-foot-price,
.polx-foot-price b.gr {
  font: 800 26px/1.05 var(--font-d, Sora, Inter, sans-serif) !important;
  color: #FFFFFF !important;
  letter-spacing: -0.02em;
}
.vtx-foot-info,
.polx-foot-price span {
  font: 500 12.5px/1.35 var(--font-b, Inter, sans-serif);
  color: #CBD5E1 !important;
}
.vtx-foot-sub {
  font: 500 11.5px/1.35 var(--font-b, Inter, sans-serif);
  color: #93C5FD;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vtx-foot-lgpd {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font: 500 11.5px/1.35 var(--font-b, Inter, sans-serif);
  color: #E2E8F0;
  cursor: pointer;
  margin-top: 3px;
}
.vtx-foot-lgpd input {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  accent-color: #22C55E;
  flex-shrink: 0;
}

.vtx-foot-actions,
.polx-foot-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vtx-btn-ghost,
.polx-exec-foot .pol-env {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  min-height: 44px;
  font: 700 12.5px/1.1 var(--font-b, Inter, sans-serif) !important;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vtx-btn-ghost:hover,
.polx-exec-foot .pol-env:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}
.vtx-btn-main,
.polx-exec-foot .pol-add {
  appearance: none;
  background: #FFFFFF !important;
  color: #082040 !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  min-height: 44px;
  font: 800 13px/1.1 var(--font-b, Inter, sans-serif) !important;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vtx-btn-main:disabled,
.vtx-btn-main.is-disabled,
.polx-exec-foot .pol-add:disabled {
  background: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
.vtx-btn-close,
.polx-exec-foot .pol-close {
  appearance: none;
  background: #22C55E !important;
  color: #052E16 !important;
  border: 1px solid #22C55E !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  min-height: 44px;
  font: 800 13px/1.1 var(--font-b, Inter, sans-serif) !important;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vtx-btn-close.is-subtle,
.polx-exec-foot .pol-close.is-subtle {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #BBF7D0 !important;
  border: 1px solid rgba(34, 197, 94, 0.42) !important;
}

/* Revelação de Fotos: barra original fica oculta visualmente (mas funcional para fotos.js)
   enquanto a Barra Executiva #vtx-bar-fotos fica sempre visível desde 0 fotos */
body.vtx-has-fotos-bar #barra {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Foto 3×4 Passo 4 (#fd-p4): transforma .fd-qty-bar na Barra Executiva Navy */
#fd-p4 .fd-qty-bar {
  background: linear-gradient(125deg, #082040 0%, #0F3562 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 32px -20px rgba(8, 32, 64, 0.55) !important;
}
#fd-p4 .fd-qty-bar .fd-qty-head b {
  color: #93C5FD !important;
  font-size: 10.5px !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
}
#fd-p4 .fd-qty-bar #fd-qty-total,
#fd-p4 .fd-qty-bar #fd-qty-total b {
  color: #FFFFFF !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#fd-p4 .fd-qty-bar .fd-qty-stepper {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}
#fd-p4 .fd-qty-bar .fd-qty-stepper b {
  color: #FFFFFF !important;
}
#fd-p4 .fd-qty-bar .fd-qty-stepper button {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}
#fd-p4 .fd-qty-bar #fd-p4-next {
  background: #22C55E !important;
  color: #052E16 !important;
  border-color: #22C55E !important;
  font-weight: 800 !important;
}
#fd-p4 .vtx-fd-sub {
  font-size: 11.5px;
  color: #93C5FD;
  margin: 4px 0 10px;
}

@media (max-width: 1180px) and (min-width: 961px) {
  .foot .f-grid.f2,
  .f-grid.f2 {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) minmax(0, 1.5fr) !important;
  }
}

@media (max-width: 680px) {
  .vtx-exec-foot,
  .polx-exec-foot {
    padding: 14px !important;
    border-radius: 16px !important;
  }
  .vtx-foot-actions,
  .polx-foot-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .vtx-btn-ghost,
  .vtx-btn-main,
  .vtx-btn-close,
  .polx-exec-foot .pol-env,
  .polx-exec-foot .pol-add,
  .polx-exec-foot .pol-close {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aj626-p,
  .aj626-mae .st,
  .aj626-fade {
    transition: none;
    animation: none;
  }
}

/* Início separado dos botões indexados por departamento. */
#aj626-bar .aj626-inicio {
  height:34px; display:inline-flex; align-items:center; flex:0 0 auto;
  border-radius:9px; padding:0 11px; text-decoration:none; white-space:nowrap;
  font:700 12px/1 var(--font-b,Inter,system-ui,sans-serif); color:#3b3a96;
}
#aj626-bar .aj626-inicio.on,#aj626-bar .aj626-inicio:hover { background:#eef0ff; }
@media(min-width:961px) and (max-width:1100px){
  #aj626-bar{gap:0!important}
  #aj626-bar .aj626-mae{padding:0 3px!important;gap:2px!important;font-size:10px!important}
  #aj626-bar .aj626-inicio{padding:0 5px;font-size:10px}
}

/*ajustes-627-cards.css*/
/* ─────────────────────────────────────────────────────────────────
   6.27 — CARDS PADRÃO v2 (o dono viu o fotos.html no preview e
   cravou: "faz os cards assim para todas"). O desenho dos cards de
   foto virou a régua global, somado ao que o 627 já trouxe (selos
   fixos, zoom sutil, sem-foto com emoji, skeleton, altura igual).
   · A RÉGUA (medida no fotos.html + print aprovado):
     foto 4:3 no topo com selos · título Sora 800 · sublinha muted
     · DIVISÓRIA PONTILHADA antes do preço · preço grande Sora +
     sufixo "/ un" muted · pílulas de faixa VERDES em fila ·
     bullets com quadradinho (língua do 620) · rodapé com relógio +
     ação, respiro 16px.
   · FAMÍLIAS VESTIDAS: .prod (home #grid-inicio + #grid-cat),
     .ag-mat (agendas.html), .fpc.fpc-card (fotos.html — a dona da
     régua, recebe só os acréscimos) e pílulas de faixa dos módulos
     620 (.mat-tiers/.pol-tiers) pra ficar tudo na mesma língua.
   · SÓ ESTILO: preço/lógica/JS de compra intocados; tirou a linha
     do HTML, o portal volta ao que era.
   ───────────────────────────────────────────────────────────────── */

/* ═══ 1. .prod — home e catálogo ═══════════════════════════════ */
.prod {
  display: flex; flex-direction: column;
  border-radius: 14px; border: 1px solid var(--line, #e3e9f0);
  box-shadow: var(--shadow, 0 1px 2px rgba(8,32,64,.05), 0 10px 26px -14px rgba(8,32,64,.18));
}
.prod:hover { box-shadow: var(--shadow-lg, 0 22px 44px -22px rgba(8,32,64,.30)); }
.prod .thumb {
  height: auto; aspect-ratio: 4/3; overflow: hidden;
  background: linear-gradient(135deg, #fde8f0, #e8f4fb 60%, #fff);
  font-size: 44px;
}
.prod .thumb .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.prod:hover .thumb .ph { transform: scale(1.03); }

/* selos nos lugares fixos */
.prod .thumb .store-badge, .prod .thumb .tag {
  position: absolute; top: 8px; left: 8px;
  background: rgba(255,255,255,.94); border: 1px solid var(--line, #e3e9f0);
  color: var(--ink, #082040); border-radius: 999px;
  font: 800 9px var(--font-b, Inter, sans-serif); letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px;
}
.prod .thumb .store-badge.eco { top: auto; left: auto; bottom: 8px; right: 8px; background: #166534; border: 0; color: #fff; }
.prod .thumb .ph-count {
  position: absolute; top: 8px; right: 8px;
  font: 800 9px monospace; color: var(--brand-ink, #0369a1);
  background: var(--brand-soft, #e6f5fc); border: 1px solid #bfe0f2;
  border-radius: 999px; padding: 2px 7px;
}
.prod .thumb .selo-pers, .prod .selo-pers {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(255,255,255,.94); border: 1px solid #f0abfc;
  color: #a21caf; border-radius: 999px;
  font: 800 9px var(--font-b, Inter, sans-serif); letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 8px;
}

/* sem foto: nunca buraco */
.prod .thumb.sem-foto, .fig.sem-foto { background: linear-gradient(135deg, #fde8f0, #e8f4fb 60%, #fff); }
.vt-ph { display: grid; place-items: center; gap: 3px; }
.vt-ph b {
  font: 800 10px ui-monospace, monospace; letter-spacing: .1em;
  color: var(--brand-ink, #0369a1); background: var(--brand-soft, #e6f5fc);
  border: 1px solid #bfe0f2; border-radius: 999px; padding: 2px 8px;
}
.vt-ph i { font: 700 9px var(--font-b, Inter, sans-serif); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #9fb2c6; }
.thumb .vt-emoji, .fig .vt-emoji { font-size: 44px; line-height: 1; display: block; }

/* corpo na régua do fotos.html */
.prod .bd { padding: 14px 16px 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.prod .bd > b, .prod .bd b {
  font: 800 16px/1.25 var(--font-d, Sora, sans-serif); color: #0b2340;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prod .desc {
  font: 400 11.5px/1.45 var(--font-b, Inter, sans-serif); color: var(--muted, #5b6b7e);
  margin: 4px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prod .price {
  margin-top: auto; padding-top: 8px; margin-bottom: 0;
  border-top: 1px dashed var(--line, #e3e9f0);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.prod .bd > .price:first-of-type { margin-top: 12px; }
.prod .price span {
  font: 700 10px var(--font-b, Inter, sans-serif); letter-spacing: .06em;
  text-transform: uppercase; color: #9fb2c6;
}
.prod .price b {
  font: 800 22px/1 var(--font-d, Sora, sans-serif) !important;
  letter-spacing: -.01em; color: #0b2340;
}
.prod .price em {
  font: 700 11.5px var(--font-b, Inter, sans-serif) !important;
  font-style: normal; color: var(--muted, #5b6b7e);
}

/* rodapé na régua: relógio + ação, respiro 16px */
.prod .store-card-cta {
  margin-top: 12px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  border-top: 1px solid #eef2f7; padding: 9px 16px 16px;
}
.prod .store-card-cta .product-ref {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0; /* esconde o "preço de referência" nativo — ao lado do
     relógio vai o PRAZO, como o dono pediu ("exemplo: 3 dias úteis") */
  color: var(--muted2, #7b8aa0); white-space: nowrap;
}
.prod .store-card-cta .product-ref::after {
  content: "3 dias úteis";
  font: 600 10.5px var(--font-b, Inter, sans-serif);
}
.prod .store-card-cta .product-ref::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8aa0' stroke-width='2.4' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5V12l3 2'/></svg>") center/contain no-repeat;
}
.prod .store-card-cta .btn {
  background: none !important; border: 0; box-shadow: none !important;
  transform: none !important; padding: 0; margin: 0;
  color: var(--brand, #0888c8);
  font: 800 11.5px var(--font-b, Inter, sans-serif);
  display: inline-flex; align-items: center; gap: 4px;
}
.prod .store-card-cta .btn:hover { color: #066ea3; gap: 8px; }
.prod .store-card-cta .btn::after { content: "›"; font-weight: 800; }

/* ═══ 2. ag-mat — agendas.html ═════════════════════════════════ */
.ag-mat {
  border: 1px solid var(--line, #e3e9f0) !important; border-radius: 14px !important;
  box-shadow: var(--shadow, 0 1px 2px rgba(8,32,64,.05), 0 10px 26px -14px rgba(8,32,64,.18));
  transition: transform .16s ease, box-shadow .16s ease;
}
.ag-mat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 22px 44px -22px rgba(8,32,64,.30)); }
.ag-mat-badge {
  top: 8px !important; left: 8px !important; border-radius: 999px !important;
  padding: 4px 9px !important; letter-spacing: .05em; text-transform: uppercase;
}
.ag-wrap .ag-mat-name, .ag-mat-name { font: 800 16px/1.25 var(--font-d, Sora, sans-serif) !important; color: #0b2340 !important; }
.ag-wrap .ag-mat-price, .ag-mat-price {
  border-top: 1px dashed var(--line, #e3e9f0); padding-top: 8px; margin-top: 8px;
  display: flex; align-items: baseline; gap: 5px;
  font: 800 22px/1 var(--font-d, Sora, sans-serif) !important; color: #0b2340 !important;
}
.ag-wrap .ag-mat-price span, .ag-mat-price span {
  font: 700 11.5px/1 var(--font-b, Inter, sans-serif) !important;
  color: var(--muted, #5b6b7e) !important; margin-left: 0 !important;
}

/* ═══ 3. fpc.fpc-card — fotos.html (a dona da régua) ════════════ */
.fpc.fpc-card {
  border: 1px solid var(--line, #e3e9f0) !important; border-radius: 14px !important;
  box-shadow: var(--shadow, 0 1px 2px rgba(8,32,64,.05), 0 10px 26px -14px rgba(8,32,64,.18));
  transition: transform .16s ease, box-shadow .16s ease;
}
.fpc.fpc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 22px 44px -22px rgba(8,32,64,.30)); }
.fpc.fpc-card.on {
  border-color: var(--brand, #0888c8) !important;
  box-shadow: 0 0 0 2px rgba(8,136,200,.14), var(--shadow-lg, 0 22px 44px -22px rgba(8,32,64,.30));
}
.fpc-badge {
  top: 8px !important; left: 8px !important; border-radius: 999px !important;
  padding: 4px 9px !important; letter-spacing: .05em; text-transform: uppercase;
}

/* ═══ 4. a mesma língua em todas as famílias ═══════════════════ */
/* pílulas de faixa verdes (tiers) em .prod, fotos e módulos 620 */
.store-tiers > *, .fpc-tiers > *, .mat-tiers > *, .pol-tiers > * {
  background: #ecfdf3 !important; color: #166534 !important;
  border: 1px solid #bbf7d0 !important; border-radius: 999px !important;
  padding: 3px 8px !important;
  font: 700 10.5px var(--font-b, Inter, sans-serif) !important;
}
/* bullets com quadradinho (língua do 620 aprovado) em todas */
.ag-mat-bullets li, .fpc-bullets li {
  list-style: none; position: relative; padding-left: 14px;
  font: 400 11.5px/1.45 var(--font-b, Inter, sans-serif) !important; color: #334155 !important;
}
.ag-mat-bullets li::before, .fpc-bullets li::before {
  content: "" !important; position: absolute; left: 0; top: .42em;
  width: 7px; height: 7px; border-radius: 2px; background: #bcd2e6;
}

/* ═══ 6. peças enriquecidas do .prod (injeta o 627 js) ═══════════
   O template vivo do card (app.js) é thumb + título + price (+kit):
   sublinha, pílulas de faixa e rodapé entram por JS com dado vivo
   de PRODS — aqui mora só o visual delas, na régua fotos.html. */
.p627-sub {
  font: 400 11.5px/1.45 var(--font-b, Inter, sans-serif);
  color: var(--muted, #5b6b7e); margin: 4px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p627-tiers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.p627-tiers span {
  background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0;
  border-radius: 999px; padding: 3px 8px;
  font: 700 10.5px var(--font-b, Inter, sans-serif);
}
.p627-foot {
  margin: 12px -16px 0; border-top: 1px solid #eef2f7;
  padding: 9px 16px 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.p627-foot .pra {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 10.5px var(--font-b, Inter, sans-serif);
  color: var(--muted2, #7b8aa0); white-space: nowrap;
}
.p627-foot .pra::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8aa0' stroke-width='2.4' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5V12l3 2'/></svg>") center/contain no-repeat;
}
.p627-foot .go {
  border: 0; background: none; cursor: pointer; padding: 0;
  color: var(--brand, #0888c8);
  font: 800 11.5px var(--font-b, Inter, sans-serif);
  display: inline-flex; align-items: center; gap: 4px; transition: gap .15s;
}
.p627-foot .go::after { content: "›"; font-weight: 800; }
.p627-foot .go:hover { gap: 8px; color: #066ea3; }

/* ═══ 7. família c623 (home/catálogo) na régua aprovada ═════════
   Medido no vivo (rodada 100): o módulo 623 repinta os cards da
   home/catálogo com markup próprio (c623-*) e INJETA o css dele
   DEPOIS do nosso (ordem de sheets medida no jsdom). Por isso esta
   camada de sobreposição usa !important em cada declaração (uma
   por linha) — é só estilo: tirou o arquivo, voltou ao original. */
.prod.card623 {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid var(--line, #e3e9f0) !important;
  background: #fff !important;
  box-shadow: var(--shadow, 0 1px 2px rgba(8,32,64,.05), 0 10px 26px -14px rgba(8,32,64,.18)) !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .prod.card623 {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid var(--line, #e3e9f0) !important;
  background: #fff !important;
  box-shadow: var(--shadow, 0 1px 2px rgba(8,32,64,.05), 0 10px 26px -14px rgba(8,32,64,.18)) !important;

  padding: 0 !important;
  border-radius: 18px !important;
  min-width: 0 !important;
}
.prod.card623:hover { box-shadow: var(--shadow-lg, 0 22px 44px -22px rgba(8,32,64,.30)) !important; }
.card623 .c623-photo {
  aspect-ratio: 4/3 !important;
  height: auto !important;
  overflow: hidden !important;
  position: relative !important;
  background: linear-gradient(135deg, #fde8f0, #e8f4fb 60%, #fff) !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-photo {
  aspect-ratio: 7/3 !important;
  height: auto !important;
  overflow: hidden !important;
  position: relative !important;
  background: linear-gradient(135deg, #fde8f0, #e8f4fb 60%, #fff) !important;

  margin: 0 !important;
  border-radius: 0 !important;
}
.card623 .c623-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .3s ease !important;
}
.prod.card623:hover .c623-photo img { transform: scale(1.03) !important; }
.card623 .c623-fotos {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  font: 800 9px ui-monospace, monospace !important;
  color: var(--brand-ink, #0369a1) !important;
  background: var(--brand-soft, #e6f5fc) !important;
  border: 1px solid #bfe0f2 !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
}
.card623 .c623-photo.sem-foto {
  display: grid !important;
  place-items: center !important;
  gap: 3px !important;
}
.card623 .c623-photo.sem-foto > span:not(.vt-emoji):not(.c623-fotos) {
  font: 700 9px var(--font-b, Inter, sans-serif) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #9fb2c6 !important;
}
.card623 .c623-cat {
  margin: 14px 16px 0 !important;
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-cat {
  margin: 8px 15px 0 !important;
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;

  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.card623 .c623-catname {
  background: #f1f5f9 !important;
  border: 1px solid var(--line, #e3e9f0) !important;
  color: #334155 !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font: 700 10px var(--font-b, Inter, sans-serif) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.card623 .c623-pers {
  display: inline-flex !important;
  color: #a21caf !important;
  background: #fdf4ff !important;
  border: 1px solid #f0abfc !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font: 700 10px var(--font-b, Inter, sans-serif) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.card623 .c623-title {
  margin: 5px 16px 0 !important;
  font-family: var(--font-d, Sora, sans-serif) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #0b2340 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-title {
  margin: 12px 15px 0 !important;
  font-family: var(--font-d, Sora, sans-serif) !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #0b2340 !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: vertical !important;
  overflow: visible !important;

  min-height: 0 !important;
  max-height: none !important;
  overflow-wrap: anywhere;
}
.card623 .c623-sub {
  margin: 5px 16px 0 !important;
  font: 400 11.5px/1.45 var(--font-b, Inter, sans-serif) !important;
  color: var(--muted, #5b6b7e) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-sub {
  margin: 5px 15px 0 !important;
  font: 400 11.5px/1.45 var(--font-b, Inter, sans-serif) !important;
  color: var(--muted, #5b6b7e) !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: vertical !important;
  overflow: visible !important;

  min-height: 0 !important;
  max-height: none !important;
  overflow-wrap: anywhere;
}
.card623 .c623-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 5px 16px 0 !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 7px 15px 0 !important;

  min-height: 0 !important;
  overflow: visible !important;
}
.card623 .c623-pills span {
  background: #ecfdf3 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font: 700 10.5px var(--font-b, Inter, sans-serif) !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-pills span {
  background: #ecfdf3 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font: 700 10.5px var(--font-b, Inter, sans-serif) !important;

  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
}
.card623 .c623-div {
  height: 0 !important;
  background: none !important;
  border-top: 1px dashed var(--line, #e3e9f0) !important;
  margin: 6px 16px 0 !important;
}
.card623 .c623-from {
  margin: 8px 16px 0 !important;
  font: 700 10px var(--font-b, Inter, sans-serif) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #9fb2c6 !important;
}
.card623 .c623-price {
  margin: 2px 16px 0 !important;
  font: 800 22px/1 var(--font-d, Sora, sans-serif) !important;
  color: #0b2340 !important;
}
.card623 .c623-price small {
  font: 700 11.5px var(--font-b, Inter, sans-serif) !important;
  color: var(--muted, #5b6b7e) !important;
  margin-left: 4px !important;
}
.card623 .c623-kit {
  margin: 6px 16px 0 !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  font: 600 11px var(--font-b, Inter, sans-serif) !important;
  color: #334155 !important;
}
.card623 .c623-off {
  background: #fff1f2 !important;
  color: #be123c !important;
  border: 1px solid #fecdd3 !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  font: 800 9.5px var(--font-b, Inter, sans-serif) !important;
  text-transform: uppercase !important;
}
.card623 .c623-foot {
  margin-top: auto !important;
  border-top: 1px solid #eef2f7 !important;
  padding: 9px 16px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-foot {
  margin-top: auto !important;
  border-top: 1px solid #eef2f7 !important;
  padding: 12px 15px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;

}
.card623 .c623-prazo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font: 600 10.5px var(--font-b, Inter, sans-serif) !important;
  color: var(--muted2, #7b8aa0) !important;
  white-space: nowrap !important;
}
.card623 .c623-prazo svg {
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
}
.card623 .c623-ver {
  color: var(--brand, #0888c8) !important;
  font: 800 11.5px var(--font-b, Inter, sans-serif) !important;
}

:is(#grid-inicio, #grid-cat) .card623 .c623-sub:empty { display: none !important; }
/* sequência idêntica à do fotos.html: foto, título, sublinha, tag,
   divisória, preço, faixas, kit, rodapé */
.card623 .c623-photo { order: 0 !important; }
.card623 .c623-title { order: 1 !important; }
.card623 .c623-sub { order: 2 !important; }
.card623 .c623-cat { order: 3 !important; }
.card623 .c623-div { order: 4 !important; }
.card623 .c623-from { order: 5 !important; }
.card623 .c623-price { order: 6 !important; }
.card623 .c623-pills { order: 7 !important; }
.card623 .c623-bullets {
  order: 8 !important;
  margin: 6px 16px 0 !important;
  list-style: none !important;
  padding: 0 !important;
  display: grid !important;
  gap: 3px !important;
}
.card623 .c623-bullets li {
  position: relative !important;
  padding-left: 14px !important;
  font: 400 11.5px/1.45 var(--font-b, Inter, sans-serif) !important;
  color: #334155 !important;
}
.card623 .c623-bullets li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .42em !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 2px !important;
  background: #bcd2e6 !important;
}
.card623 .c623-kit { order: 9 !important; }
.card623 .c623-foot { order: 10 !important; }

/* ═══ 5. skeleton de carregamento ══════════════════════════════ */
.vt-sk { background: #fff; border: 1px solid var(--line, #e3e9f0); border-radius: 14px; overflow: hidden; }
.vt-sk .sk-foto { aspect-ratio: 4/3; }
.vt-sk .sk-l { height: 10px; border-radius: 6px; margin: 10px 16px 0; }
.vt-sk .sk-l.w40 { width: 40%; }
.vt-sk .sk-l.w60 { width: 60%; }
.vt-sk .sk-l.w80 { width: 80%; }
.vt-sk .sk-foot { border-top: 1px solid #eef2f7; margin-top: 14px; padding: 12px 16px 16px; display: flex; justify-content: space-between; gap: 8px; }
.vt-sk .sk-dot { height: 10px; width: 64px; border-radius: 6px; }
.vt-sk .sk-foto, .vt-sk .sk-l, .vt-sk .sk-dot {
  background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%);
  background-size: 200% 100%; animation: vtsk 1.2s ease infinite;
}
@keyframes vtsk { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .prod .thumb .ph, .ag-mat, .fpc.fpc-card { transition: none; }
  .prod:hover .thumb .ph, .ag-mat:hover, .fpc.fpc-card:hover { transform: none; }
  .vt-sk .sk-foto, .vt-sk .sk-l, .vt-sk .sk-dot { animation: none; }
}

/* ── 8. respiro acima da linha do rodapé (dono, 22/10) ───────────────
   A linha do .c623-foot colava no tier/bullets (0px acima), enquanto a
   pontilhada da régua tem 6px acima / 8px abaixo. Devolve 8px acima da
   linha sem perder o margin-top:auto que alinha rodapés (R112). */
.card623 .c623-kit:has(+ .c623-foot) { margin-bottom: 8px !important; }
.card623 .c623-bullets:has(+ .c623-foot) { margin-bottom: 8px !important; }

/* ── 9. 6.27.8 — rodada 118 (22/10/2026) ────────────────────────────
   Bloco medido e reversível (itens 1, 2, 3, 4 e 5 da prancheta 6.27.8).
   Apagar da linha "9. 6.27.8" até o fim do arquivo = volta a 6.27.7.
   · .i6278/.i6278w: ícones SVG no lugar dos emojis que viravam □ em
     aparelho sem fonte de emoji (menu-mãe, popover, texto do catálogo).
   · .b627-q: seletor de quantidade do card único do botton espelho.
   · .pol-kit .ph: as 3 artes novas dos kits polaroid (medidas no
     rabisco aprovado: 12×8 paisagem, 5×9 grade 3×3, tira tripla blush).
   · #grid-inicio: trilho da home em 3 colunas (card 275→372px medido
     no rabisco prancheta-3-colunas.html, régua do fotos).            */
.i6278 { width: 1.05em; height: 1.05em; vertical-align: -0.18em; display: inline-block; }
.i6278w { display: inline-block; line-height: 0; }
.drawer-nav a.l6278 { display: flex; align-items: center; gap: 8px; color: var(--brand-ink, #0369a1); font-weight: 700; }
.drawer-nav a.l6278 .i6278 { flex-shrink: 0; }

/* botton espelho: seletor de pacote dentro do card único */
/* o card623 traz display:flex !important no próprio 627 — esconder o
   card sobrando por style.display inline PERDE pra esse important
   (medido no ar 22/10: os 3 pacotes seguiam visíveis). A regra por
   atributo abaixo empata o important e vence por vir depois. */
.prod.card623[data-b6278off="1"] { display: none !important; }
.b627-q { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 8px 0 2px; }
.b627-q button { font: 700 11px/1.15 var(--font-b); padding: 6px 2px; border: 1.5px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 1px; align-items: center; }
.b627-q button small { font-weight: 600; font-size: 9.5px; color: var(--muted); }
.b627-q button.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink, #0369a1); }
.b627-q button.on small { color: inherit; }

/* polaroid v6.29.4: sem !important fixo em site_img_pola_* — respeita o upload do ERP e o fallback de polaroid.html */

/* home: trilho em 3 colunas no desktop (aprovado no rabisco).
   Medido no ar (22/10): quem manda hoje é #p-inicio #grid-inicio do
   ajustes-624-vitrine.css (repeat(4,1fr), carregado DEPOIS do 627) —
   por isso o seletor aqui sobe um id + classe pra vencer na cascata. */
@media (min-width: 1025px) {
  #p-inicio #grid-inicio.store-rail-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; }
  #p-inicio #grid-inicio.store-rail-grid .prod.home-prod { max-width: none; }
}

/* ── 10. 6.27.10 — arredondamento unificado (dono, rodada 119, 22/10) ──
   Medido no ar em 22/10: as pílulas de preço estavam rachadas em duas
   linguagens — 999px (fotos .ft-pill, agendas .ab-pill) contra 11px
   (polaroid/cartões .pb-pill, a pílula da captura do dono); o CTA
   principal das agendas estava 999px contra 12px das outras três;
   e o card do catálogo (.card623 + foto) estava 14px contra 18px dos
   kits (.pol-kit/.mat-kit, já iguais entre si).
   Os wrappers cremes JÁ estavam unificados em 22px (.pol-banner,
   .ft-banner, .ades-banner — medido) — não mexe. O estádio 999px
   continua só onde é linguagem de selo: "a partir de", chips de
   departamento, pílulas verdes do card e link de voltar.
   Só CSS, cinco linhas: apagou o bloco, voltou ao estado de hoje. */
.ft-pill { border-radius: 11px; }
.ab-pill { border-radius: 11px; }
.btn-hero-dark { border-radius: 12px; }
.prod.card623 { border-radius: 18px !important; }
.card623 .c623-photo { border-radius: 18px !important; }

/* ═══ 11. R125 (23/10): chip verde de volta a uma linha só ═══════
   O núcleo tem `.mont-mats b{display:block}` (feito pro texto dos
   atalhos de quantidade) que atropelava o <b> do preço dentro da
   pílula de faixa (.mat-tier/.fpc-tier/.ag-mat-tier): o valor caía
   em segunda linha e a pílula estourava a fileira de 24px do 620.
   Aqui o <b> do chip volta a ser inline — valor, lógica de compra
   e JS intocados; a pílula reassume a língua aprovada do 620.     */
.mat-tier b, .fpc-tier b, .ag-mat-tier b { display: inline !important; }

/* ═══ 12. R125 (23/10): vitrine da home — 4 landings em 2×2 ═════
   A antiga grade de 7 cards misturava landing com serviço. Agora:
   .home-landings = bloco 2×2 só com os 4 cards que levam aos HTMLs
   próprios, na língua do card (foto sangrada + selo + raio 18);
   .home-servicos = fileira de 3 pra quem é serviço (ícone, sem foto).
   Réguas: wrapper 22 não se aplica (seção aberta); card 18; selo é o
   .rl-selo da regua-landing.css. Textos/links de hoje, mesmos.     */
.home-landings {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 760px) { .home-landings { grid-template-columns: 1fr; } }
.home-landings .lc {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line, #e3e9f0);
  border-radius: 18px; overflow: hidden; text-decoration: none;
  box-shadow: var(--shadow, 0 1px 2px rgba(8,32,64,.05), 0 10px 26px -14px rgba(8,32,64,.18));
  transition: transform .16s ease, box-shadow .16s ease;
}
.home-landings .lc:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(8,32,64,.06), 0 16px 34px -16px rgba(8,32,64,.24); }
.home-landings .lc .ph { position: relative; height: 150px; overflow: hidden; display: block; }
.home-landings .lc .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.home-landings .lc .bd { display: flex; flex-direction: column; gap: 5px; padding: 13px 16px 15px; flex: 1; }
.home-landings .lc .eyebrow {
  font: 800 9.5px/1.2 var(--font-b, Inter, sans-serif);
  letter-spacing: .12em; text-transform: uppercase; color: #64748b;
}
.home-landings .lc b { font-family: var(--font-d, Sora, Inter, sans-serif); font-size: 16.5px; font-weight: 800; color: #082040; }
.home-landings .lc small { font-size: 12.5px; line-height: 1.5; color: #5b6b7e; }
.home-landings .lc strong { margin-top: auto; padding-top: 10px; font: 700 12px/1 var(--font-b, Inter, sans-serif); color: #3B3A96; }
.home-servicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 760px) { .home-servicos { grid-template-columns: 1fr; } }
.home-servicos .sv {
  display: flex; gap: 12px; align-items: flex-start; text-decoration: none;
  background: #fff; border: 1px solid var(--line, #e3e9f0); border-radius: 18px;
  padding: 14px 16px;
}
.home-servicos .sv .ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; background: #eef2f7; color: #3B3A96;
}
.home-servicos .sv .ic svg { width: 19px; height: 19px; }
.home-servicos .sv b { display: block; font-size: 13.5px; color: #082040; margin-bottom: 2px; }
.home-servicos .sv small { font-size: 11.5px; line-height: 1.45; color: #5b6b7e; display: block; }

/* ═══ 13. R128 (23/10): agendas.html — últimos fora-da-régua ═════
   (a) seção 2 "Também no balcão" nasce vazia e exibia ao cliente um
       recado interno ("rascunho · ainda não está no ERP"): escondida
       até o ERP ganhar os produtos (pra reabrir, tire .ag-sec-draft);
   (b) CTA de meio de página era rosa #D60C7E — a cor da casa é o
       índigo #3B3A96 (mesma língua do herói e das outras landings);
   (c) cards de miolo .ag-mat com raio 14 → 18, o raio de card da casa
       (foto com cantos presos via overflow).                        */
.ag-sec-draft { display: none !important; }
#ag-novos:empty { display: none !important; }
.ag-wrap .ag-btn-principal { background: #3B3A96 !important; }
.ag-wrap .ag-btn-principal:hover { background: #2E2D7A !important; }
.ag-wrap .ag-mat { border-radius: 18px !important; overflow: hidden; }

/* ============================================================
   14) Página de produto — régua da casa (R129)
   galeria .fig 20px→18 (foto de card); .pd-trust-strip 14px→12 (barra)
   ============================================================ */
.pd .fig{border-radius:18px;overflow:hidden}
.pd .fig img{border-radius:18px}
.pd-trust-strip{border-radius:12px}
.pd{border-radius:22px}

/* ============================================================
   15) R131 — respiros pedidos pelo dono na página de produto
   - .pd-cta: botões "colados" (gap 12) -> 16px + quebra limpa
   - .from > small vazio: slot da msg de tier que fica só com as
     linhas quando o produto não tem tiers -> some sem deixar vão
   ============================================================ */
.pd-cta{gap:16px;flex-wrap:wrap;margin-top:16px}
#produto-corpo .from > small:empty,
.pd .from > small:empty{display:none !important}

/* R137 (23/10, noite): card LARGO de Brindes na vitrine da home — o bloco
   .home-landings é 2×2 com 4 cards; o 5º (copo long drink, produto e não
   landing) entra ocupando as 2 colunas pra não ficar órfão. Foto sangrada
   à esquerda, texto à direita; no mobile empilha como os irmãos.        */
.home-landings .lc.lc-wide { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.home-landings .lc.lc-wide .ph { width: 38%; flex: 0 0 38%; height: 190px; min-height: 0; }
.home-landings .lc.lc-wide .bd { justify-content: center; }
@media (max-width: 760px) {
  .home-landings .lc.lc-wide { flex-direction: column; }
  .home-landings .lc.lc-wide .ph { width: 100%; flex: none; height: 150px; min-height: 0; }
}

/*regua-landing.css*/
/* ═════════════════════════════════════════════════════════════
   REGUA-LANDING.CSS — a mesma língua pra toda landing (6.27.12)
   ─────────────────────────────────────────────────────────────
   DONA DA RÉGUA: o herói do polaroid.html. Toda landing (página
   HTML própria ou herói de rota do index) veste estes slots:

     .rl            wrapper do herói (raio 22, foto + texto)
     .rl-eyebrow    sobrancelha: SEM emoji, caixa alta via CSS
     .rl h1         título Georgia 42 com <em>/<span> colorido
     .rl-pills      fileira única, no MÁXIMO 4 pílulas
     .rl-pill       pílula: raio 11, 11px, borda linha, fundo branco
     .rl-cta        par: .rl-btn (marca, raio 12) + .rl-wa
     .rl-wa         "ou falar no WhatsApp →" (12px, muted)
     .rl-extra      link utilitário opcional (gabaritos, polaroid…)
     .rl-selos      fileira de ✓ verdes, 11,5px
     .rl-photo      foto sangrada + .rl-selo (badge verde)

   CHECKLIST DOS 7 CONFERES (landing nova ou mexida):
     1 sobrancelha sem emoji (o CSS caixa-alta sozinho)
     2 título Georgia com palavra colorida
     3 ≤ 4 pílulas em uma fileira
     4 CTA da marca + "ou falar no WhatsApp →"
     5 selos ✓ presentes
     6 foto sangrada com selo (ou .rl.sem-foto justificada)
     7 wrapper 22 / card 18 / pílula 11 / CTA 12
   Quem não passar, não sobe. Manual vivo: este cabeçalho +
   portal/modelo-landing.html + PADRAO-DA-CASA seção 7.
   ───────────────────────────────────────────────────────────── */

.rl { border-radius: 22px !important; overflow: hidden; }

.rl .rl-eyebrow {
  display: inline-block;
  font: 800 10px/1.2 var(--font-b, Inter, sans-serif) !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: #64748b !important; background: none !important;
}

.rl h1 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(30px, 3.4vw, 42px) !important;
  line-height: 1.08 !important; font-weight: 700 !important;
  letter-spacing: -0.01em !important; color: #082040 !important;
}
.rl h1 em, .rl h1 span {
  font-style: normal !important;
  color: var(--rl-accent, #3B3A96) !important;
}

.rl .rl-pills {
  display: flex !important; flex-wrap: wrap !important;
  gap: 6px !important; margin: 12px 0 0 !important;
}
.rl .rl-pills > * {
  border-radius: 11px !important;
  font: 700 11px/1 var(--font-b, Inter, sans-serif) !important;
  padding: 7px 10px !important;
  border: 1px solid #d8dee8 !important; background: #fff !important;
  color: #0b2340 !important; white-space: nowrap !important;
}
.rl .rl-pills > .on, .rl .rl-pills > [class*="on"] {
  border-color: var(--rl-accent, #3B3A96) !important;
  color: var(--rl-accent, #3B3A96) !important; background: #fff !important;
}

.rl .rl-cta { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; margin-top: 14px !important; }
.rl .rl-cta .rl-btn,
.rl .rl-cta a.rl-btn,
.rl .rl-cta button.rl-btn {
  border-radius: 12px !important;
  font: 700 13.5px/1 var(--font-b, Inter, sans-serif) !important;
  padding: 14px 22px !important;
  background: var(--rl-accent, #3B3A96) !important; color: #fff !important;
  border: 0 !important; cursor: pointer; text-decoration: none !important;
}
.rl .rl-wa {
  font: 700 12.5px/1.2 var(--font-b, Inter, sans-serif) !important;
  color: #1d8a4e !important; text-decoration: none !important;
}
.rl .rl-wa:hover { text-decoration: underline !important; }
.rl .rl-extra {
  font: 600 11.5px/1.2 var(--font-b, Inter, sans-serif) !important;
  color: #5b6b7e !important; text-decoration: none !important;
}
.rl .rl-extra:hover { text-decoration: underline !important; }

.rl .rl-selos { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 12px !important; }
.rl .rl-selos > * {
  font: 600 11.5px/1.3 var(--font-b, Inter, sans-serif) !important;
  color: #334155 !important;
}
.rl .rl-selos b, .rl .rl-selos i {
  color: #15803d !important; font-style: normal !important; margin-right: 4px;
}

.rl .rl-photo { position: relative !important; background-size: cover !important; background-position: center 45% !important; }
.rl .rl-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.rl-selo {
  position: absolute !important; left: 12px !important; top: 12px !important;
  background: #166534 !important; color: #fff !important;
  font: 800 9.5px/1 var(--font-b, Inter, sans-serif) !important;
  letter-spacing: .07em !important; text-transform: uppercase !important;
  padding: 6px 10px !important; border-radius: 999px !important;
}

/*ajustes-6286-3telas.css*/
/* ════════════════════════════════════════════════════════════════════
   ajustes-6286-3telas.css — Régua 3 Telas + Fidelidade ao Painel ERP
   Versão 6.28.6 · PC (1366×820), Tablet (768×1024) e Celular (390×844)
   Escopo aditivo e seguro: zero alteração em cálculo de preço/estoque.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --cookie-h: 0px;
  --tabbar-h: 0px;
  --quickbar-h: 0px;
}

/* Safe first-paint fallback until JS measures the visible mobile bars. */
@media (max-width: 960px) {
  :root {
    --cookie-h: 55px;
    --tabbar-h: 57px;
    --quickbar-h: 0px;
  }
}

/* ── 1. TOPO GLOBAL: button.cart sem vazamento horizontal ─────────── */
@media (min-width: 1241px) {
  .topo .cart,
  .store-topo .cart {
    width: auto !important;
    min-width: 44px !important;
    height: 40px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  .topo .cart .n,
  .store-topo .cart .n {
    position: static !important;
    top: auto !important;
    right: auto !important;
    min-width: 18px !important;
    height: 18px !important;
    margin-left: 2px !important;
    flex: none !important;
  }
}
@media (max-width: 1240px) {
  .topo .cart,
  .store-topo .cart {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
  }
  .topo .cart .n,
  .store-topo .cart .n {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9.5px !important;
    padding: 0 3px !important;
    line-height: 1 !important;
  }
}

/* ── 2. COORDENAÇÃO DE BARRAS FIXAS (#cookie-bar × #wa-fab × rodapé) ─ */
#cookie-bar .cookie-bts .btn {
  min-height: 36px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#cookie-bar .cookie-bts .btn-o::after {
  content: none !important;
  display: none !important;
}
@media (min-width: 961px) {
  #cookie-bar {
    bottom: 0 !important;
  }
  #wa-fab,
  .wa-fab {
    bottom: calc(var(--cookie-h, 0px) + 20px) !important;
  }
  body:has(#cookie-bar:not([hidden])) {
    padding-bottom: calc(var(--cookie-h, 0px) + 12px) !important;
  }
}
@media (max-width: 960px) {
  #cookie-bar {
    bottom: calc(var(--tabbar-h, 64px) + var(--quickbar-h, 0px) + env(safe-area-inset-bottom, 0px)) !important;
  }
  #wa-fab,
  .wa-fab {
    /* On touch layouts the header already exposes WhatsApp. Removing this
       fixed overlay keeps it off filters, form fields and checkout actions. */
    display: none !important;
    bottom: calc(var(--tabbar-h, 64px) + var(--cookie-h, 0px) + var(--quickbar-h, 0px) + 16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body {
    padding-bottom: calc(var(--tabbar-h, 64px) + var(--cookie-h, 0px) + var(--quickbar-h, 0px) + 10px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── 3. BARRA RÁPIDA DE COMPRA NO CELULAR (#/produto "Ir Além") ────── */
.pd-quick-bar {
  display: none;
}
@media (max-width: 720px) {
  .pd-quick-bar:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px));
    z-index: 75;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line, #e3e9f0);
    box-shadow: 0 -8px 22px rgba(8, 32, 64, 0.12);
  }
  .pd-qb-info {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex: 1;
  }
  .pd-qb-info img {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--line, #e3e9f0);
    flex: none;
  }
  .pd-qb-txt {
    min-width: 0;
  }
  .pd-qb-txt small {
    display: block;
    font-size: 10.5px;
    color: var(--muted, #5b6b7e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pd-qb-txt b {
    display: block;
    font: 800 15px/1.15 var(--font-d, Sora, sans-serif);
    color: var(--ink, #082040);
  }
  .pd-qb-btn {
    flex: none;
    min-height: 38px;
    padding: 0 15px;
    border: 0;
    border-radius: 10px;
    background: #3B3A96;
    color: #fff;
    font: 700 12.5px var(--font-b, Inter, sans-serif);
    cursor: pointer;
    white-space: nowrap;
  }
}

/* ── 4. HOME: BANNERS E VITRINES FIÉIS AO PAINEL DO ERP (0 CORTE) ──── */
#p-inicio .mk-hero-art:has(.promo-slide.promo-img),
#p-inicio .mk-hero-art:has(.promo-slide.promo-img) .promo-in,
#p-inicio .mk-hero-art .promo-slide.promo-img {
  min-height: 0 !important;
  aspect-ratio: var(--hero-banner-ar, 1200 / 515) !important;
  width: 100% !important;
}
#p-inicio .mk-hero-art .promo-slide.promo-img {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #0b2240 !important;
}
/* Vitrine padronizada de 6 módulos da Home (.vb2-grid):
   - Opção 1 aprovada em 29/10/2026: muda somente o formato da foto.
   - PC (>= 961px): 2 colunas de cards; texto à esquerda e foto quadrada à direita.
   - Tablet (681..960px): 2 colunas; foto quadrada centralizada acima do texto.
   - Celular (<= 680px): 1 coluna; foto quadrada a 76%, centralizada acima do texto.
   - Textos, fotos, preços, links e banner não são alterados por este bloco.
   - Paleta Creme Editorial #FAF6F1 + Índigo #3B3A96 (aprovada pelo dono) */
#p-inicio .vb2-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
#p-inicio .vb2-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  align-items: center;
  padding-right: 16px;
  background: #FAF6F1;
  border: 1px solid #E5DEC9;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.14);
  min-width: 0;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
#p-inicio .vb2-card:hover {
  transform: translateY(-2px);
  border-color: #cfc6b0;
  box-shadow: 0 16px 34px -16px rgba(15, 23, 42, 0.22);
}
#p-inicio .vb2-body {
  order: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#p-inicio .vb2-art {
  order: 2;
  position: relative;
  display: block;
  width: 100%;
  max-width: 224px;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  align-self: center;
  justify-self: end;
  margin: 16px 0;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-color: #e6e2d8;
  text-decoration: none;
}
#p-inicio .vb2-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 32, 64, 0.22) 0%, rgba(8, 32, 64, 0) 36%, rgba(8, 32, 64, 0.30) 100%);
  pointer-events: none;
}
#p-inicio .vb2-cat {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  color: #191842;
  font: 800 10px/1 var(--font-b, Inter, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(8, 32, 64, 0.14);
}
#p-inicio .vb2-selo {
  position: absolute;
  left: 11px;
  bottom: 11px;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: rgba(8, 32, 64, 0.88);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font: 600 11px/1 var(--font-b, Inter, sans-serif);
  backdrop-filter: blur(4px);
}
#p-inicio .vb2-selo b {
  font: 800 13px/1 var(--font-d, Sora, sans-serif);
  color: #fff;
}
#p-inicio .vb2-eye {
  font: 800 9.5px/1.25 var(--font-b, Inter, sans-serif);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 5px;
}
#p-inicio .vb2-tit {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #082040;
  margin: 0 0 7px;
  min-height: 2.3em;
}
#p-inicio .vb2-tit em {
  font-style: normal;
  color: #3B3A96;
}
#p-inicio .vb2-desc {
  font-size: 12px;
  line-height: 1.48;
  color: #475569;
  margin: 0 0 11px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.44em;
}
#p-inicio .vb2-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 11px;
}
#p-inicio .vb2-pill {
  border-radius: 11px;
  font: 700 9.8px/1.2 var(--font-b, Inter, sans-serif);
  letter-spacing: -0.01em;
  padding: 6px 5px;
  background: #FFFFFF;
  border: 1px solid #D8DEE8;
  color: #0B2340;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
#p-inicio .vb2-cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 9px;
}
#p-inicio .vb2-btn1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: #3B3A96;
  color: #fff !important;
  font: 700 12.5px/1 var(--font-b, Inter, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
#p-inicio .vb2-btn1:hover {
  background: #2E2D7A;
}
#p-inicio .vb2-btn2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  font: 700 11.5px/1.2 var(--font-b, Inter, sans-serif);
  color: #3B3A96;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#p-inicio .vb2-checks {
  padding-top: 9px;
  border-top: 1px solid rgba(8, 32, 64, 0.09);
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  font: 600 10.5px/1.3 var(--font-b, Inter, sans-serif);
  color: #334155;
}
#p-inicio .vb2-checks b {
  color: #15803d;
  font-weight: 800;
  margin-right: 3px;
}

/* Tablet (681..960px): 2 colunas; foto 1:1 centralizada no topo. */
@media (max-width: 960px) and (min-width: 681px) {
  #p-inicio .vb2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  #p-inicio .vb2-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-right: 0;
  }
  #p-inicio .vb2-art {
    order: 0;
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    width: 76%;
    max-width: none;
    margin: 16px auto 0;
    flex-shrink: 0;
  }
  #p-inicio .vb2-body {
    order: 1;
    padding: 20px;
    flex: 1;
  }
  #p-inicio .vb2-tit {
    font-size: 19.5px;
  }
  #p-inicio .vb2-pill {
    font-size: 10px;
    padding: 6px 6px;
  }
  #p-inicio .vb2-btn2 {
    min-height: 32px;
  }
}

/* Celular (<= 680px): 1 coluna, foto 1:1 centralizada; pílulas 2×2 preservadas. */
@media (max-width: 680px) {
  #p-inicio .vb2-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #p-inicio .vb2-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-right: 0;
  }
  #p-inicio .vb2-art {
    order: 0;
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    width: 76%;
    max-width: none;
    margin: 16px auto 0;
    flex-shrink: 0;
  }
  #p-inicio .vb2-body {
    order: 1;
    padding: 20px;
    flex: 1;
  }
  #p-inicio .vb2-tit {
    font-size: 21px;
    min-height: 0;
  }
  #p-inicio .vb2-desc {
    min-height: 0;
  }
  #p-inicio .vb2-pill {
    white-space: normal;
    line-height: 1.25;
    padding: 7px 6px;
  }
  #p-inicio .vb2-btn1 {
    min-height: 44px;
  }
  #p-inicio .vb2-btn2 {
    min-height: 34px;
  }
}

/* Imagens verticais/quadradas protegidas contra corte > 38% (especificidade acima de ajustes-627-cards.css) */
.prod.card623 .c623-photo img.vt-img-contain,
.card623 .c623-photo img.vt-img-contain,
.home-landings .lc .ph img.vt-img-contain,
.ag-wrap .ag-grid img.vt-img-contain,
.ag-wrap .ag-novos-grid img.vt-img-contain,
img.vt-img-contain {
  object-fit: contain !important;
  background: linear-gradient(145deg, #f8fafc, #eef2f7) !important;
  padding: 6px !important;
}

/* ── 5. VITRINES E CARDS ALINHADOS NA RÉGUA (Δ = 0px NO PREÇO) ────── */
.prod.card623 .b627-q,
.card623 .b627-q {
  order: 7 !important;
  margin: 8px 16px 0 !important;
}
@media (min-width: 640px) {
  #grid-cat .prod.card623 .c623-title,
  #grid-inicio .prod.card623 .c623-title {
    min-height: 0 !important;
    max-height: none !important;
  }
  .ag-wrap .ag-grid .prod.card623 .c623-title,
  .ag-wrap .ag-novos-grid .prod.card623 .c623-title {
    min-height: 2.5em !important;
    max-height: 2.5em !important;
  }
  #grid-cat .prod.card623 .c623-sub,
  #grid-inicio .prod.card623 .c623-sub {
    min-height: 0 !important;
    max-height: none !important;
  }
  .ag-wrap .ag-grid .prod.card623 .c623-sub,
  .ag-wrap .ag-novos-grid .prod.card623 .c623-sub {
    min-height: 2.9em !important;
    max-height: 2.9em !important;
  }
  #grid-cat .prod.card623 .c623-cat,
  #grid-inicio .prod.card623 .c623-cat {
    flex-wrap: wrap !important;
    overflow: visible !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: center !important;
  }
  .ag-wrap .ag-grid .prod.card623 .c623-cat,
  .ag-wrap .ag-novos-grid .prod.card623 .c623-cat {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    min-height: 24px !important;
    max-height: 24px !important;
    align-items: center !important;
  }
}

/* ── 6. LANDINGS DE KITS E PACOTES EM 3 TELAS (PARTE 3) ───────────── */
/* cartoes.html (4 kits) e polaroid.html (3 kits): zero card órfão */
body[data-page="cartoes"] #kits.pol-kits,
.pol-kits[data-kits-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (min-width: 601px) and (max-width: 980px) {
  body[data-page="cartoes"] #kits.pol-kits,
  .pol-kits[data-kits-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  body[data-page="cartoes"] #kits.pol-kits,
  .pol-kits[data-kits-count="4"] {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 680px) {
  .pol-kits[data-kits-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 679px) {
  .pol-kits[data-kits-count="3"] {
    grid-template-columns: 1fr !important;
  }
}

/* Pílulas do herói em cartoes.html e polaroid.html no celular: zero estouro */
@media (max-width: 760px) {
  .rl .rl-pills.pb-pills {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .rl .rl-pills.pb-pills[data-pills-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .rl .rl-pills.pb-pills > .pb-pill {
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    padding: 8px 8px !important;
    box-sizing: border-box !important;
  }
  .rl .rl-pills.pb-pills[data-pills-count="3"] > .pb-pill {
    padding: 7px 5px !important;
  }
  .rl .rl-pills.pb-pills > .pb-pill i {
    display: block !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    font-size: 10.5px !important;
  }
}

/* agendas.html: 3 colunas quando há 3 itens no Tablet (zero órfão 2+1) e fim do bullet duplicado */
@media (min-width: 680px) and (max-width: 960px) {
  .ag-wrap .ag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .ag-wrap .ag-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .ag-wrap .ag-passos {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
.ag-wrap .ag-mat-bullets li::before {
  content: none !important;
  display: none !important;
}

/* etiquetas.html: 4 miniaturas simétricas + #etq-cor 2×2 no celular */
.etq-gal .thumbs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-width: 100% !important;
}
.etq-gal .thumbs img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  min-width: 0 !important;
  object-fit: cover !important;
}
@media (min-width: 680px) and (max-width: 960px) {
  .etq-sel,
  .etq-notas {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  #etq-cor {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #etq-cor .etq-chip {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }
}

/* fotos.html: raio 18 e check na cor institucional #3B3A96 */
.fpc.fpc-card {
  border-radius: 18px !important;
}
.fpc.on .fpc-check {
  background: #3B3A96 !important;
  border-color: #3B3A96 !important;
  color: #fff !important;
}

/* ── 7. ALVOS DE TOQUE >= 32–36px EM TABLET E CELULAR ─────────────── */
#prova-social .vt-dot {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 11px !important;
  box-sizing: border-box !important;
  background-clip: content-box !important;
}
.promo-dot {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}
a.ft-banner-back,
.cv-step {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
}
a.ft-banner-back {
  padding: 4px 10px !important;
}
#p-atendimento .at-canal .seta {
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#p-montador button,
.mont-builder button {
  min-height: 34px !important;
}
#p-pedido button {
  min-width: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#p-pedido a {
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
}
#p-pedido input[type="checkbox"],
#p-pedido input[type="radio"] {
  min-width: 30px !important;
  min-height: 30px !important;
  cursor: pointer !important;
}


/* v6.29.4: Home .vb2-grid permanece na regra canônica única de 2 colunas horizontais (linhas 185+) — sem sobrescrita 3 colunas. Mantém janelas 16:9 nos cards de material de Adesivos. */
#p-montador .ades-banner .ab-foto {
  aspect-ratio: 16 / 10 !important;
  min-height: 240px;
  background-size: cover !important;
  background-position: center center !important;
}
#p-montador .mat-grid.mont-mats .mat-photo,
.mat-grid.mont-mats .mat-photo {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
}
@media (max-width: 980px) {
  #p-montador .ades-banner .ab-foto {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* ── 9. v6.28.10: Fim do corte vertical em .ades-banner (#/montador + agendas.html) e Contraste Rodapé ── */
.ades-banner,
.ades-banner.rl {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
#p-montador .ades-banner .ab-foto,
.ag-wrap .ades-banner .ab-foto {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 340px !important;
  background-size: cover !important;
  background-position: center center !important;
}
@media (max-width: 900px) {
  .ades-banner,
  .ades-banner.rl {
    grid-template-columns: 1fr !important;
  }
  #p-montador .ades-banner .ab-foto,
  .ag-wrap .ades-banner .ab-foto {
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Contraste WCAG AA na faixa global de pagamento (#pay-strip) */
#pay-strip .ps-l,
.pay-strip .ps-l {
  color: #082040 !important;
  font-weight: 700 !important;
}
#pay-strip .ps-note,
.pay-strip .ps-note {
  color: #334155 !important;
}

/* Centralização exata do dígito em #cart-n quando visível (inline style="display:inline") */
.topo .cart .n:not([style*="none"]),
.store-topo .cart .n:not([style*="none"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* ── 10. v6.28.11: Identidade Vetorial Oficial no Cabeçalho e Rodapé ── */
.topo .logo,
.store-topo .logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.topo .brand-logo-wrap,
.store-topo .brand-logo-wrap,
.foot .brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
@media (min-width: 961px) {
  .topo .bar,
  .store-topo .bar {
    min-height: 78px;
    height: 78px;
  }
  .topo .logo img.erp-logo,
  .store-topo .logo img.erp-logo,
  .topo .logo img,
  .store-topo .logo img {
    height: 58px !important;
    width: auto !important;
    max-width: 210px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  .foot .f-brand .logo img.erp-logo,
  .foot .footer-logo img.erp-logo,
  .footer-logo .erp-logo {
    height: 56px !important;
    width: auto !important;
    max-width: 224px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  #p-conta .tabs { top: 88px; }
  #p-conta .exec-adm-side,
  #p-pedido .exec-ck-aside,
  .bprev,
  .mont-preview,
  .pd-gal-col { top: 96px; }
}
@media (min-width: 681px) and (max-width: 960px) {
  .topo .bar,
  .store-topo .bar {
    min-height: 70px;
    height: 70px;
  }
  .topo .logo img.erp-logo,
  .store-topo .logo img.erp-logo {
    height: 46px !important;
    width: auto !important;
    max-width: 176px !important;
  }
  .foot .f-brand .logo img.erp-logo,
  .foot .footer-logo img.erp-logo,
  .footer-logo .erp-logo {
    height: 52px !important;
    width: auto !important;
    max-width: 205px !important;
  }
}
@media (max-width: 680px) {
  .topo .logo img.erp-logo,
  .store-topo .logo img.erp-logo {
    height: 42px !important;
    width: auto !important;
    max-width: 158px !important;
  }
  .foot .f-brand .logo img.erp-logo,
  .foot .footer-logo img.erp-logo,
  .footer-logo .erp-logo {
    height: 48px !important;
    width: auto !important;
    max-width: 192px !important;
  }
}

/* ── 6.30.3 · A FOTO DO CARD PREENCHE A FAIXA (dono, 30/10/2026) ────
   O card padrão da vitrine e do catálogo tem a faixa em 7:3 e as fotos
   do catálogo são 4:3. A regra de "proteção contra corte > 38%" acima
   resolvia o corte deixando a foto INTEIRA só que pequena, centralizada
   em duas tarjas cinza-claro — na tela isso lê como "proporção errada":
   o card com foto não tem o mesmo peso visual do card SEM FOTO, que
   ocupa a faixa toda com o degradê.

   Aqui a foto passa a preencher a faixa (cover), do mesmo jeito que o
   placeholder preenche — os cards da grade ficam alinhados e o "4 fotos"
   do canto volta a ter foto embaixo. O corte fica no miolo da imagem
   (object-position center), nunca no topo.

   Escopo: só #grid-inicio e #grid-cat — as duas grades em que a faixa
   é 7:3. Nas telas de agenda/landing a faixa continua 4:3 e a foto
   continua inteira (contain, como estava). O seletor com :is(#id) tem
   especificidade de ID, então vence a regra de contain acima sem
   depender da ordem dos arquivos. */
:is(#grid-inicio, #grid-cat) .card623 .c623-photo img,
:is(#grid-inicio, #grid-cat) .card623 .c623-photo img.vt-img-contain {
  object-fit: cover !important;
  object-position: center !important;
  background: none !important;
  padding: 0 !important;
}

/* Compact desktop: the floating WhatsApp button otherwise covers right-edge
   actions (including the home-page Impressão e TCC entry). The sticky header
   keeps its own WhatsApp action available in this range. */
@media (min-width: 961px) and (max-width: 1366px) {
  #wa-fab,
  .wa-fab { display: none !important; }
}


/*ajustes-6294-estudios.css*/
/* ═══════════════════════════════════════════════════════════════════════════
   ajustes-6294-estudios.css — Camada Executiva Unificada (Portal v6.29.4)
   Restaura e blinda os 3 estúdios aprovados pelo dono:
     1. Polaroid (polaroid.html) — Gabarito Silhouette 1:1, 6/pág, lote + barra navy
     2. Revelação de Fotos (fotos.html) — Montagem Polaroid 6/pág + borda/moldura ao vivo
     3. Adesivos (index.html#/montador) — 2 colunas amplas + palco creme A4 + barra navy
   Zero scroll horizontal (scrollWidth <= clientWidth) em PC, Tablet e Celular.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --vtx-cream: #FAF6F1;
  --vtx-cream-2: #F3EDE3;
  --vtx-cream-line: #E5DEC9;
  --vtx-indigo: #3B3A96;
  --vtx-indigo-dark: #2C2B78;
  --vtx-indigo-soft: #EEF0FF;
  --vtx-navy: #082040;
  --vtx-navy-2: #0F3562;
  --vtx-ink: #0F172A;
  --vtx-muted: #5B6677;
  --vtx-line: #DCE3EC;
  --vtx-ok: #15803D;
  --vtx-ok-bg: #DCFCE7;
  --vtx-warn: #B45309;
  --vtx-warn-bg: #FEF3C7;
  --vtx-bad: #B91C1C;
  --vtx-bad-bg: #FEE2E2;
}

/* ───────────────────────────────────────────────────────────────────────────
   BLOCO 1 — COMPONENTES EXECUTIVOS COMPARTILHADOS (Polaroid + Fotos + Adesivos)
   ─────────────────────────────────────────────────────────────────────────── */
.vtx-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 14px;
}
.vtx-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid var(--vtx-line);
  min-width: 0;
  font: 600 12px/1.25 var(--font-b, Inter, sans-serif);
  color: var(--vtx-muted);
}
.vtx-step .num {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #E2E8F0;
  color: #334155;
  font: 800 11px/1 var(--font-d, Sora, sans-serif);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vtx-step .txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vtx-step .txt b {
  display: block;
  color: var(--vtx-ink);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vtx-step .txt small {
  display: block;
  font-size: 10.5px;
  color: var(--vtx-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.vtx-step.on {
  background: var(--vtx-indigo-soft);
  border-color: rgba(59, 58, 150, 0.38);
  color: var(--vtx-indigo);
}
.vtx-step.on .num {
  background: var(--vtx-indigo);
  color: #fff;
}
.vtx-step.done .num {
  background: var(--vtx-ok);
  color: #fff;
}

.vtx-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 12px 0;
  border-radius: 14px;
  background: #F8FAFC;
  border: 1px solid var(--vtx-line);
}
.vtx-pager-info {
  font: 600 12px/1.35 var(--font-b, Inter, sans-serif);
  color: #334155;
}
.vtx-pager-info b {
  color: var(--vtx-navy);
}
.vtx-pager-btns {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.vtx-pg-btn {
  appearance: none;
  border: 1px solid #CBD5E1;
  background: #fff;
  color: var(--vtx-navy);
  border-radius: 9px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  font: 700 12px/1 var(--font-b, Inter, sans-serif);
  cursor: pointer;
  transition: all 0.14s ease;
}
.vtx-pg-btn:hover:not(:disabled) {
  border-color: var(--vtx-indigo);
  color: var(--vtx-indigo);
}
.vtx-pg-btn.on {
  background: var(--vtx-indigo);
  border-color: var(--vtx-indigo);
  color: #fff;
}
.vtx-pg-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ───────────────────────────────────────────────────────────────────────────
   BLOCO 2 — ESTÚDIO POLAROID EXECUTIVO (polaroid.html)
   Calibrado 1:1 com Silhouette Studio:
     - 12×8: papel 84,13×115,67 mm | janela 71,52×70,40 mm
     - 5×9 : papel 54,75×88,56 mm  | janela 43,49×63,44 mm
     - Tripla: papel 77,56×255,25 mm | 3 janelas 65,91×64,94 mm
   ─────────────────────────────────────────────────────────────────────────── */
.pol-build.polx-studio {
  background: #fff;
  border: 1px solid var(--vtx-line);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 16px 38px -24px rgba(8, 32, 64, 0.18);
}
.polx-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid #EEF2F7;
}
.polx-eyebrow {
  display: block;
  font: 800 10.5px/1.2 var(--font-b, Inter, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vtx-indigo);
  margin-bottom: 4px;
}
.pol-build.polx-studio #btit {
  margin: 0;
  font: 700 22px/1.18 Georgia, "Times New Roman", serif;
  color: var(--vtx-navy);
}
.polx-sub {
  margin-top: 4px;
  font: 500 12.5px/1.4 var(--font-b, Inter, sans-serif);
  color: var(--vtx-muted);
}
.polx-batch-btn {
  appearance: none;
  border: none;
  border-radius: 12px;
  background: var(--vtx-indigo);
  color: #fff;
  padding: 11px 16px;
  font: 700 13px/1.1 var(--font-b, Inter, sans-serif);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 10px 22px -12px rgba(59, 58, 150, 0.65);
  transition: transform 0.14s ease, background 0.14s ease;
}
.polx-batch-btn:hover {
  background: var(--vtx-indigo-dark);
  transform: translateY(-1px);
}
.polx-qty-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--vtx-cream);
  border: 1px solid var(--vtx-cream-line);
  margin: 0 0 14px;
}
.polx-qty-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.polx-clear-btn {
  appearance: none;
  border: 1px solid #CBD5E1;
  background: #fff;
  color: #475569;
  border-radius: 9px;
  padding: 7px 11px;
  font: 700 11.5px/1 var(--font-b, Inter, sans-serif);
  cursor: pointer;
}
.polx-clear-btn:hover {
  border-color: var(--vtx-bad);
  color: var(--vtx-bad);
}

/* Grade paginada de até 6 Polaroids por página */
.pol-slots.polx-grid,
.pol-slots.polx-grid[data-kit="9x6"],
.pol-slots.polx-grid[data-kit="tripla"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 12px 0;
}
.polx-card {
  background: #fff;
  border: 1.5px solid var(--vtx-line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.polx-card.is-filled {
  border-color: #CBD5E1;
  box-shadow: 0 10px 24px -18px rgba(8, 32, 64, 0.22);
}
.polx-card:hover {
  border-color: var(--vtx-indigo);
}
.polx-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: #F8FAFC;
  border-bottom: 1px solid #EEF2F7;
  min-width: 0;
}
.polx-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--vtx-navy);
  color: #fff;
  font: 800 10.5px/1 var(--font-d, Sora, sans-serif);
  flex-shrink: 0;
}
.polx-lbl {
  font: 600 11.5px/1.2 var(--font-b, Inter, sans-serif);
  color: #475569;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.polx-rm {
  appearance: none;
  border: 1px solid #E2E8F0;
  background: #fff;
  color: #64748B;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.polx-rm:hover {
  background: var(--vtx-bad-bg);
  color: var(--vtx-bad);
  border-color: #FCA5A5;
}

/* Palco Creme Editorial com o Papel Polaroid Real */
.polx-stage {
  position: relative;
  background: var(--vtx-cream);
  padding: 16px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 215px;
  flex: 1;
}
.polx-stage.is-strip {
  min-height: 280px;
}
.polx-dpi {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 999px;
  font: 800 10px/1.1 var(--font-b, Inter, sans-serif);
  box-shadow: 0 3px 8px rgba(8, 32, 64, 0.12);
}
.polx-dpi.ok { background: var(--vtx-ok-bg); color: var(--vtx-ok); }
.polx-dpi.mid { background: var(--vtx-warn-bg); color: var(--vtx-warn); }
.polx-dpi.bad { background: var(--vtx-bad-bg); color: var(--vtx-bad); }

/* Estado sem fotos: mesmas posições e entradas, apenas grade mais compacta.
   Ao preencher qualquer janela, a apresentação original volta por inteiro. */
.pol-slots.polx-grid:not(:has(.polx-win.filled)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.pol-slots.polx-grid:not(:has(.polx-win.filled)) .polx-stage {
  min-height: 0;
  padding: 10px;
}
.pol-slots.polx-grid:not(:has(.polx-win.filled)) .polx-lbl {
  white-space: normal;
  overflow: visible;
}
@media (max-width: 960px) {
  .pol-slots.polx-grid:not(:has(.polx-win.filled)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Papel físico calibrado 1:1 */
.polx-paper {
  background: #FFFFFF;
  border-radius: 3px;
  box-shadow: 0 12px 26px -10px rgba(8, 32, 64, 0.34), 0 0 0 1px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease;
}
.polx-paper.k-12x8 {
  width: min(158px, 78%);
  aspect-ratio: 84.13 / 115.67;
  padding: 7.5% 7.5% 0;
}
.polx-paper.k-9x6 {
  width: min(134px, 70%);
  aspect-ratio: 54.75 / 88.56;
  padding: 10.29% 10.29% 0;
}
.polx-paper.k-tripla {
  width: min(106px, 56%);
  aspect-ratio: 77.56 / 255.25;
  padding: 7.51% 7.51% 0;
}
.polx-win {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 1.5px;
  background: #F1F5F9;
}
.polx-paper.k-12x8 .polx-win { aspect-ratio: 71.52 / 70.40; }
.polx-paper.k-9x6 .polx-win { aspect-ratio: 43.49 / 63.44; }
.polx-paper.k-tripla .polx-win {
  aspect-ratio: 65.91 / 64.94;
  margin-bottom: 8.2%;
}
.polx-paper.k-tripla .polx-win:last-of-type {
  margin-bottom: 0;
}
.polx-win img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.polx-win.filled {
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
}
.polx-win.empty {
  border: 1.5px dashed #CBD5E1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  color: #64748B;
  font: 700 10.5px/1.2 var(--font-b, Inter, sans-serif);
  cursor: pointer;
}
.polx-win.empty input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.polx-chin {
  flex: 1;
  min-height: 10px;
}

.polx-card-foot {
  padding: 10px 12px;
  border-top: 1px solid #EEF2F7;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.polx-card-actions {
  display: flex;
  gap: 6px;
}
.polx-btn-ed,
.polx-btn-pick,
.polx-btn-swap {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  padding: 8px 10px;
  font: 700 12px/1.15 var(--font-b, Inter, sans-serif);
  cursor: pointer;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
}
.polx-btn-ed {
  flex: 1;
  background: var(--vtx-navy);
  color: #fff;
  border: 1px solid var(--vtx-navy);
}
.polx-btn-ed:hover {
  background: var(--vtx-navy-2);
}
.polx-btn-swap {
  background: #F8FAFC;
  color: #334155;
  border: 1px solid #CBD5E1;
  padding: 8px 10px;
}
.polx-btn-pick {
  width: 100%;
  background: var(--vtx-indigo-soft);
  color: var(--vtx-indigo);
  border: 1px dashed rgba(59, 58, 150, 0.45);
}
.polx-btn-pick:hover {
  background: #E2E5FF;
}
.polx-btn-swap input[type="file"],
.polx-btn-pick input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Controles compactos das 3 fotos da Tira Tripla */
.polx-strip-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.polx-strip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 9px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  font: 600 11px/1.2 var(--font-b, Inter, sans-serif);
}
.polx-strip-row b {
  color: var(--vtx-navy);
}
.polx-strip-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}
.polx-mini-btn {
  position: relative;
  overflow: hidden;
  appearance: none;
  border: 1px solid #CBD5E1;
  background: #fff;
  color: var(--vtx-navy);
  border-radius: 7px;
  padding: 4px 8px;
  font: 700 10.5px/1.1 var(--font-b, Inter, sans-serif);
  cursor: pointer;
}
.polx-mini-btn.primary {
  background: var(--vtx-indigo);
  border-color: var(--vtx-indigo);
  color: #fff;
}
.polx-mini-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Palco Vitrine "É assim que seu kit vai chegar" */
.pol-build.polx-studio .pol-prev {
  background: var(--vtx-cream);
  border: 1px solid var(--vtx-cream-line);
  border-radius: 18px;
  padding: 18px 16px;
  margin: 14px 0;
}
.polx-prev-eye {
  display: block;
  font: 800 10px/1.2 var(--font-b, Inter, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A6D46;
  margin-bottom: 4px;
}
.pol-build.polx-studio .pol-prev h3 {
  font: 700 18px/1.2 Georgia, "Times New Roman", serif;
  color: var(--vtx-navy);
  margin: 0 0 3px;
}
.pol-build.polx-studio .pol-frame .f {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10px/1 var(--font-b, Inter, sans-serif);
  color: #94A3B8;
  margin: 0 !important;
}

/* Barra Executiva Navy do Polaroid */
.polx-exec-foot {
  background: linear-gradient(125deg, #082040 0%, #0F3562 100%);
  color: #fff;
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.polx-foot-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.polx-foot-kicker {
  font: 800 10px/1.2 var(--font-b, Inter, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93C5FD;
}
.polx-foot-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.polx-exec-foot #total {
  font: 800 26px/1.05 var(--font-d, Sora, sans-serif);
  color: #FFFFFF !important;
}
.polx-exec-foot #tinfo {
  font: 500 12px/1.3 var(--font-b, Inter, sans-serif);
  color: #CBD5E1 !important;
}
.polx-foot-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.polx-exec-foot .pol-env {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  padding: 11px 14px;
  font: 700 12.5px/1.1 var(--font-b, Inter, sans-serif);
}
.polx-exec-foot .pol-env:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.polx-exec-foot .pol-add {
  background: #FFFFFF;
  color: var(--vtx-navy);
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font: 800 13px/1.1 var(--font-b, Inter, sans-serif);
  cursor: pointer;
  min-height: 44px;
}
.polx-exec-foot .pol-add:disabled {
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.78);
  cursor: not-allowed;
}
.polx-exec-foot .pol-close {
  background: #22C55E;
  color: #052E16;
  text-decoration: none;
  border-radius: 12px;
  padding: 12px 16px;
  font: 800 13px/1.1 var(--font-b, Inter, sans-serif);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
}

/* ───────────────────────────────────────────────────────────────────────────
   BLOCO 3 — ESTÚDIO REVELAÇÃO DE FOTOS EXECUTIVO (fotos.html)
   Montagem visual estilo Polaroid com 6 fotos por página (1 · 2 · 3…)
   ─────────────────────────────────────────────────────────────────────────── */
body[data-page="fotos"].ftx-ready #area-upload {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body[data-page="fotos"].ftx-ready #ferramentas-avancadas {
  display: none !important;
}

.ftx-studio {
  background: #FFFFFF;
  border: 1px solid var(--vtx-line);
  border-radius: 22px;
  padding: 20px;
  margin: 14px 0 18px;
  box-shadow: 0 16px 38px -24px rgba(8, 32, 64, 0.18);
}
.ftx-studio.is-dragover {
  border-color: var(--vtx-indigo);
  box-shadow: 0 0 0 4px rgba(59, 58, 150, 0.16);
}
.ftx-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid #EEF2F7;
}
.ftx-eyebrow {
  display: block;
  font: 800 10.5px/1.2 var(--font-b, Inter, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vtx-indigo);
  margin-bottom: 4px;
}
.ftx-title {
  margin: 0;
  font: 700 22px/1.18 Georgia, "Times New Roman", serif;
  color: var(--vtx-navy);
}
.ftx-sub {
  margin-top: 4px;
  font: 500 12.5px/1.4 var(--font-b, Inter, sans-serif);
  color: var(--vtx-muted);
}
.ftx-upload-btn {
  border-radius: 12px;
  background: var(--vtx-indigo);
  color: #fff;
  padding: 11px 18px;
  font: 700 13px/1.1 var(--font-b, Inter, sans-serif);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  box-shadow: 0 10px 22px -12px rgba(59, 58, 150, 0.65);
  text-decoration: none;
}
.ftx-upload-btn:hover {
  background: var(--vtx-indigo-dark);
}

.ftx-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--vtx-cream);
  border: 1px solid var(--vtx-cream-line);
  margin-bottom: 14px;
}
.ftx-bulk-left,
.ftx-bulk-right {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}
.ftx-bulk-lbl {
  font: 800 11.5px/1.2 var(--font-b, Inter, sans-serif);
  color: var(--vtx-navy);
}
.ftx-select {
  border: 1px solid #CBD5E1;
  background: #fff;
  color: var(--vtx-navy);
  border-radius: 10px;
  padding: 7px 10px;
  font: 600 12px/1.2 var(--font-b, Inter, sans-serif);
  max-width: 100%;
}
.ftx-chip {
  appearance: none;
  border: 1px solid #CBD5E1;
  background: #fff;
  color: #334155;
  border-radius: 10px;
  padding: 7px 11px;
  font: 700 11.5px/1.1 var(--font-b, Inter, sans-serif);
  cursor: pointer;
  transition: all 0.14s ease;
}
.ftx-chip:hover {
  border-color: var(--vtx-indigo);
  color: var(--vtx-indigo);
}
.ftx-chip.on {
  background: var(--vtx-navy);
  border-color: var(--vtx-navy);
  color: #fff;
}

/* Grade de 6 fotos por página */
.ftx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ftx-card {
  background: #fff;
  border: 1.5px solid var(--vtx-line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ftx-card.is-selected {
  border-color: var(--vtx-indigo);
  box-shadow: 0 12px 26px -16px rgba(59, 58, 150, 0.35);
}
.ftx-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  background: #F8FAFC;
  border-bottom: 1px solid #EEF2F7;
  min-width: 0;
}
.ftx-name {
  font: 600 11.5px/1.2 var(--font-b, Inter, sans-serif);
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Palco Creme do Papel Revelado */
.ftx-stage {
  position: relative;
  background: var(--vtx-cream);
  padding: 16px 14px;
  min-height: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ftx-copies-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  background: rgba(8, 32, 64, 0.86);
  color: #fff;
  border-radius: 999px;
  padding: 3px 8px;
  font: 800 10px/1.1 var(--font-b, Inter, sans-serif);
}
.ftx-print {
  position: relative;
  width: min(190px, 84%);
  overflow: hidden;
  border-radius: 2px;
  background: #E2E8F0;
  box-shadow: 0 12px 24px -10px rgba(8, 32, 64, 0.36), 0 0 0 1px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
  cursor: pointer;
}
.ftx-print.is-portrait {
  width: min(136px, 64%);
}
.ftx-print.com-borda {
  background: #FFFFFF;
  padding: 7px;
}
.ftx-print.moldura-branca {
  background: #FFFFFF;
  padding: 6px;
  border: 7px solid #F8FAFC;
  box-shadow: 0 14px 28px -10px rgba(8, 32, 64, 0.45), inset 0 0 0 1px #CBD5E1, 0 0 0 1px #CBD5E1;
}
.ftx-print.moldura-preta {
  background: #FFFFFF;
  padding: 5px;
  border: 8px solid #1E293B;
  box-shadow: 0 14px 28px -10px rgba(8, 32, 64, 0.52);
}
.ftx-print-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 1px;
}

/* Slot vazio convidativo quando 0 fotos */
.ftx-card.is-empty-slot {
  grid-column: 1 / -1;
  border-style: dashed;
  border-color: #CBD5E1;
}
.ftx-empty-trigger {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ftx-empty-paper {
  width: min(168px, 76%);
  aspect-ratio: 3 / 2;
  background: #FFFFFF;
  padding: 7px;
  border-radius: 3px;
  box-shadow: 0 10px 22px -12px rgba(8, 32, 64, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.07);
  display: flex;
  box-sizing: border-box;
}
.ftx-empty-inner {
  flex: 1;
  border: 1.5px dashed #CBD5E1;
  background: #F8FAFC;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px;
  text-align: center;
  color: #64748B;
  font: 700 11px/1.25 var(--font-b, Inter, sans-serif);
}
.ftx-empty-foot {
  padding: 9px 12px;
  text-align: center;
  font: 700 11.5px/1.2 var(--font-b, Inter, sans-serif);
  color: var(--vtx-indigo);
  background: #F8FAFC;
  border-top: 1px solid #EEF2F7;
}

/* Controles individuais por card */
.ftx-controls {
  padding: 10px 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid #EEF2F7;
  background: #fff;
}
.ftx-controls .ftx-select {
  width: 100%;
  font-size: 11.5px;
  padding: 6px 8px;
}
.ftx-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  background: #F1F5F9;
  padding: 3px;
  border-radius: 10px;
}
.ftx-seg button {
  appearance: none;
  border: none;
  background: transparent;
  color: #475569;
  border-radius: 7px;
  padding: 6px 6px;
  font: 700 11px/1.15 var(--font-b, Inter, sans-serif);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ftx-seg button.on {
  background: #FFFFFF;
  color: var(--vtx-navy);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}
.ftx-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.ftx-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 9px;
  padding: 3px 6px;
}
.ftx-qty button {
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid #CBD5E1;
  background: #fff;
  color: var(--vtx-navy);
  font-weight: 800;
  cursor: pointer;
}
.ftx-qty b {
  min-width: 18px;
  text-align: center;
  font: 800 12px/1 var(--font-d, Sora, sans-serif);
  color: var(--vtx-navy);
}
.ftx-adj-btn {
  appearance: none;
  border: 1px solid var(--vtx-navy);
  background: var(--vtx-navy);
  color: #fff;
  border-radius: 9px;
  padding: 7px 11px;
  font: 700 11.5px/1.1 var(--font-b, Inter, sans-serif);
  cursor: pointer;
  flex: 1;
  text-align: center;
}
.ftx-adj-btn:hover {
  background: var(--vtx-navy-2);
}

/* Vitrine "É assim que suas fotos vão chegar" */
.ftx-showcase {
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  background: var(--vtx-cream);
  border: 1px solid var(--vtx-cream-line);
}
.ftx-showcase-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ftx-showcase-head h3 {
  margin: 0;
  font: 700 17px/1.2 Georgia, "Times New Roman", serif;
  color: var(--vtx-navy);
}
.ftx-showcase-strip {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ftx-mini-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.ftx-mini-print {
  background: #E2E8F0 center/cover no-repeat;
  border-radius: 2px;
  box-shadow: 0 8px 18px -8px rgba(8, 32, 64, 0.38), 0 0 0 1px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
}
.ftx-mini-print.borda {
  padding: 4px;
  background-color: #fff;
  background-clip: content-box;
}
.ftx-mini-print.m-branca {
  border: 5px solid #fff;
  box-shadow: 0 8px 18px -8px rgba(8, 32, 64, 0.45), 0 0 0 1px #CBD5E1;
}
.ftx-mini-print.m-preta {
  border: 5px solid #1E293B;
}
.ftx-mini-item small {
  font: 700 10px/1.1 var(--font-b, Inter, sans-serif);
  color: #64748B;
}

/* Gaveta opcional do inspetor avançado (gabarito / cor / IA do fotos.js) */
.ftx-adv-wrap {
  margin: 12px 0;
  border: 1px solid var(--vtx-line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.ftx-adv-sum {
  padding: 12px 16px;
  cursor: pointer;
  font: 700 12.5px/1.3 var(--font-b, Inter, sans-serif);
  color: var(--vtx-navy);
  background: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
}
.ftx-adv-sum::-webkit-details-marker { display: none; }
.ftx-adv-sum span.hint {
  font-weight: 500;
  font-size: 11.5px;
  color: var(--vtx-muted);
}
.ftx-adv-body {
  padding: 12px;
  border-top: 1px solid #EEF2F7;
}

/* Barra Executiva Navy do Fotos (#barra) */
body[data-page="fotos"] #barra {
  background: linear-gradient(125deg, #082040 0%, #0F3562 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 16px 20px !important;
  box-shadow: 0 18px 36px -20px rgba(8, 32, 64, 0.55) !important;
}
body[data-page="fotos"] #barra label {
  color: #E2E8F0 !important;
}
body[data-page="fotos"] #barra #resumo,
body[data-page="fotos"] #barra #resumo * {
  color: #FFFFFF !important;
}
body[data-page="fotos"] #barra #aviso {
  color: #BAE6FD !important;
}
body[data-page="fotos"] #barra #wa-fotos {
  border-color: rgba(255, 255, 255, 0.32) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}
body[data-page="fotos"] #barra #add-pedido {
  background: #FFFFFF !important;
  color: #082040 !important;
  border-color: #FFFFFF !important;
  font-weight: 800 !important;
}
body[data-page="fotos"] #barra #enviar {
  background: #22C55E !important;
  border-color: #22C55E !important;
  color: #052E16 !important;
  font-weight: 800 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   BLOCO 4 — MONTADOR DE ADESIVOS EXECUTIVO 2 COLUNAS (index.html#/montador)
   Esquerda: Passos numerados | Direita: Palco Creme A4 | Rodapé: Fechamento Navy
   ─────────────────────────────────────────────────────────────────────────── */
#p-montador .adx-exec-head {
  background: #FFFFFF;
  border: 1px solid var(--vtx-line);
  border-radius: 20px;
  padding: 16px 18px 14px;
  margin: 12px 0 14px;
  box-shadow: 0 12px 28px -20px rgba(8, 32, 64, 0.16);
}
#p-montador .adx-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
#p-montador .adx-eyebrow {
  display: block;
  font: 800 10.5px/1.2 var(--font-b, Inter, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vtx-indigo);
  margin-bottom: 3px;
}
#p-montador .adx-title {
  margin: 0;
  font: 700 20px/1.2 Georgia, "Times New Roman", serif;
  color: var(--vtx-navy);
}
#p-montador .adx-art-btn {
  appearance: none;
  border: none;
  border-radius: 12px;
  background: var(--vtx-indigo);
  color: #fff;
  padding: 10px 16px;
  font: 700 12.5px/1.1 var(--font-b, Inter, sans-serif);
  cursor: pointer;
}
#p-montador .adx-art-btn:hover {
  background: var(--vtx-indigo-dark);
}

/* Grade de 2 colunas amplas no PC + Fechamento de largura total embaixo */
#p-montador .builder.mont-builder.ades-studio {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  gap: 18px !important;
  align-items: start !important;
}
#p-montador .ades-studio > .mont-options.card {
  grid-column: 1 / 2 !important;
  min-width: 0 !important;
  border-radius: 20px !important;
  border: 1px solid var(--vtx-line) !important;
  padding: 18px !important;
  background: #FFFFFF !important;
}
#p-montador .ades-studio .mont-stage-col.card {
  grid-column: 2 / 3 !important;
  position: sticky;
  top: 86px;
  min-width: 0 !important;
  background: var(--vtx-cream) !important;
  border: 1px solid var(--vtx-cream-line) !important;
  border-radius: 20px !important;
  padding: 18px !important;
  box-shadow: 0 16px 34px -22px rgba(8, 32, 64, 0.18) !important;
}
#p-montador .ades-studio .mont-stage-col .mont-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--vtx-cream-line);
}
#p-montador .ades-studio .mont-stage-col .mont-preview-top > span {
  font: 800 11px/1.2 var(--font-b, Inter, sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7C5E38;
}
#p-montador .ades-studio .mont-stage-dual {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}
#p-montador .ades-studio .mont-stage-dual.so-cartela {
  grid-template-columns: minmax(0, 1fr) !important;
}
#p-montador .ades-studio .mont-stage-card {
  background: #FFFFFF !important;
  border: 1px solid #E5DEC9 !important;
  border-radius: 16px !important;
  padding: 12px !important;
  min-width: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#p-montador .ades-studio .mont-artboard,
#p-montador .ades-studio .mont-artboard-sheet {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#p-montador .ades-studio .mont-artboard svg,
#p-montador .ades-studio .mont-artboard-sheet svg {
  max-width: 100%;
  height: auto;
}
#p-montador .ades-studio .mont-util-bar {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
#p-montador .ades-studio .mont-util-bar > span {
  background: #FFFFFF !important;
  border: 1px solid #E5DEC9 !important;
  border-radius: 11px !important;
  padding: 8px 10px !important;
  font-size: 11.5px !important;
  min-width: 0;
}

/* Rodapé de Fechamento Full-Width do Montador de Adesivos */
#p-montador .ades-studio > aside.bprev.mont-preview.card {
  grid-column: 1 / -1 !important;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  border-radius: 20px !important;
  border: 1px solid var(--vtx-line) !important;
  padding: 18px !important;
  background: #FFFFFF !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
  gap: 16px !important;
  align-items: center !important;
}
#p-montador .ades-studio > aside.mont-preview > .mont-preview-top {
  grid-column: 1 / -1 !important;
  margin-bottom: -4px;
}
#p-montador .ades-studio > aside.mont-preview .mont-kpi-dark {
  background: linear-gradient(125deg, #082040 0%, #0F3562 100%) !important;
  color: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  margin: 0 !important;
}
#p-montador .ades-studio > aside.mont-preview #mont-contact-standard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
#p-montador .ades-studio > aside.mont-preview #mont-contact-standard > .mont-contact-head {
  grid-column: 1 / -1;
}
#p-montador .ades-studio > aside.mont-preview #mont-contact-standard > button {
  margin-top: 0 !important;
}
#p-montador .ades-studio > aside.mont-preview #mont-contact-standard > button.btn-b {
  grid-column: 1 / -1;
  background: var(--vtx-indigo) !important;
  border-color: var(--vtx-indigo) !important;
  color: #fff !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   BLOCO 5 — RESPONSIVIDADE 3 TELAS (Tablet <= 980px e Celular <= 680px)
   Garantia estrita: scrollWidth <= clientWidth em todos os viewports
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .vtx-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pol-slots.polx-grid,
  .pol-slots.polx-grid[data-kit="9x6"],
  .pol-slots.polx-grid[data-kit="tripla"],
  .ftx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #p-montador .builder.mont-builder.ades-studio {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #p-montador .ades-studio > .mont-options.card,
  #p-montador .ades-studio .mont-stage-col.card,
  #p-montador .ades-studio > aside.bprev.mont-preview.card {
    grid-column: 1 / -1 !important;
    position: static !important;
  }
  #p-montador .ades-studio > aside.bprev.mont-preview.card {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 680px) {
  .pol-build.polx-studio,
  .ftx-studio,
  #p-montador .adx-exec-head,
  #p-montador .ades-studio > .mont-options.card,
  #p-montador .ades-studio .mont-stage-col.card,
  #p-montador .ades-studio > aside.bprev.mont-preview.card {
    padding: 14px !important;
    border-radius: 16px !important;
  }
  .vtx-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .vtx-step {
    padding: 7px 9px;
    font-size: 11px;
  }
  .pol-slots.polx-grid,
  .pol-slots.polx-grid[data-kit="9x6"],
  .pol-slots.polx-grid[data-kit="tripla"],
  .ftx-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .polx-batch-btn,
  .ftx-upload-btn,
  #p-montador .adx-art-btn {
    width: 100%;
    justify-content: center;
  }
  .polx-foot-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .polx-exec-foot .pol-add,
  .polx-exec-foot .pol-close,
  .polx-exec-foot .pol-env {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  #p-montador .ades-studio .mont-stage-dual {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #p-montador .ades-studio .mont-stage-card {
    padding: 8px !important;
  }
  #p-montador .ades-studio .mont-stage-label {
    flex-direction: column;
    align-items: flex-start;
    font-size: 9.5px;
    letter-spacing: 0;
  }
  #p-montador .ades-studio .mont-stage-label b {
    font-size: 9px;
    text-transform: none;
    padding: 2px 4px;
    max-width: 100%;
  }
  #p-montador .ades-studio .mont-artboard,
  #p-montador .ades-studio .mont-artboard-sheet {
    min-height: 0;
  }
  #p-montador .ades-studio .mont-artboard svg,
  #p-montador .ades-studio .mont-artboard-sheet svg {
    max-height: 135px;
  }
  #p-montador .ades-studio .mont-options > .mont-stage-col.card {
    padding: 12px !important;
    margin: 14px 0;
  }
  #p-montador .ades-studio .mont-util-bar,
  #p-montador .ades-studio > aside.mont-preview #mont-contact-standard {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #p-montador .ades-studio > aside.mont-preview #mont-contact-standard > * {
    grid-column: 1 / -1 !important;
  }
}

.ftx-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; box-sizing: border-box; }
.ftx-sw.br { background: #FFFFFF; border: 1.5px solid #64748B; }
.ftx-sw.pt { background: #0F172A; border: 1.5px solid #0F172A; }

/*revisao-visual-aprovada.css*/
/* Revisão aprovada: preserva texto, imagens, valores e fluxos existentes. */
@media(max-width:480px){
  .pb-foto .vt-selo-preco{top:10px!important;right:10px!important;bottom:auto!important;left:auto!important}
}
@media(max-width:360px){
  #p-produto .pd-m-calc{width:100%!important;max-width:100%!important;min-width:0!important}
  #p-produto .pd-m-calc .pd-tiers-wrap,#p-produto .pd-m-calc .pd-tiers-head{width:100%!important;max-width:100%!important;min-width:0!important}
  #p-produto .pd-m-calc .tiers{display:table!important;width:100%!important;max-width:100%!important;table-layout:fixed!important}
  #p-produto .pd-m-calc .tiers th,#p-produto .pd-m-calc .tiers td{padding-left:5px!important;padding-right:5px!important;font-size:11px!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;letter-spacing:0!important}
  #p-produto .pd-m-calc .tiers th:nth-child(1){width:37%!important}
  #p-produto .pd-m-calc .tiers th:nth-child(2){width:30%!important}
  #p-produto .pd-m-calc .tiers th:nth-child(3){width:33%!important}
}
#p-montador .ades-studio .mont-stage-col .mont-util-bar > span{color:#34435c!important}
#p-montador .ades-studio .mont-stage-col .mont-util-bar > span b{color:#10233f!important}
#p-montador .ades-studio .mont-stage-col .mont-util-bar > span .ok{color:#087a3c!important}
#p-montador .ades-studio .mont-stage-col .mont-preview-name{color:#46546e!important}
@media(min-width:900px){#p-montador .ades-studio > .mont-stage-col.card{position:static!important;top:auto!important}}
#ag-grid .c623-photo{position:relative}
#ag-grid .c623-photo .c629-sem,#ag-novos .c623-photo .c629-sem{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f7f4ec,#efebdf);border-radius:inherit}
#ag-grid .c623-photo .c629-sem span,#ag-novos .c623-photo .c629-sem span{font:700 12px/1 var(--font-b,system-ui,sans-serif);color:#615d70;letter-spacing:.02em}
#ag-grid .c623-photo img[hidden],#ag-novos .c623-photo img[hidden]{display:none!important}

/* A arte permanece vinda do ERP: nenhum texto, preço ou foto é fixado aqui. */
#p-inicio #promo-hero:has(.promo-slide.promo-img){position:relative;isolation:isolate;height:auto!important;aspect-ratio:auto!important;overflow:hidden!important;border-radius:20px!important;background:#10233d!important;border:1px solid #ffffff48;box-shadow:0 18px 36px #04122555;--vt-x:0px;--vt-y:0px;--vt-scale:1}
#p-inicio #promo-hero:has(.promo-slide.promo-img) .promo-in{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;width:100%!important;aspect-ratio:auto!important;min-height:0!important}
#p-inicio #promo-hero:has(.promo-slide.promo-img) .promo-slide{grid-column:1!important;grid-row:1!important;display:flex!important;position:relative!important;align-items:center!important;min-width:0!important;min-height:280px!important;width:100%!important;aspect-ratio:auto!important;padding:18px 18px 60px!important;overflow:hidden!important;visibility:hidden!important;pointer-events:none!important;border-radius:0!important}
#p-inicio #promo-hero:has(.promo-slide.promo-img) .promo-slide.on{visibility:visible!important;pointer-events:auto!important}
#p-inicio #promo-hero .promo-slide.promo-img{background:#10233d!important}
#p-inicio #promo-hero .promo-slide.promo-img::after{content:''!important;display:block!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;background:linear-gradient(90deg,rgba(5,19,38,.97),rgba(5,19,38,.91) 31%,rgba(5,19,38,.64) 51%,rgba(5,19,38,.08) 78%),linear-gradient(0deg,rgba(5,18,36,.63),transparent 40%)!important}
#p-inicio #promo-hero .vt-photo-stage{position:absolute;inset:0;overflow:hidden;z-index:0;animation:none;pointer-events:none}
#p-inicio #promo-hero .vt-photo-blur{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:65% center;filter:blur(14px);opacity:.6;transform:scale(1.08)}
#p-inicio #promo-hero .vt-photo-focus{position:absolute;top:50%;left:0;width:100%;animation:vt-photo 8s ease-in-out infinite alternate;animation-play-state:paused;-webkit-mask-image:none;mask-image:none}
#p-inicio #promo-hero .vt-photo-focus .promo-bgimg{position:static!important;display:block!important;width:100%!important;height:auto!important;max-width:none!important;object-fit:initial!important;opacity:1!important;transform:none!important;transition:none}
#p-inicio #promo-hero .vt-banner-glimmer,#p-inicio #promo-hero .vt-banner-spark{display:none;animation:none;pointer-events:none}
#p-inicio #promo-hero .promo-slide.on .vt-photo-focus{animation-play-state:running}
#p-inicio #promo-hero:focus-within .vt-photo-focus{animation-play-state:paused}
#p-inicio #promo-hero .promo-img .promo-fx{position:relative!important;z-index:3!important;width:60%!important;max-width:315px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:5px!important;color:white!important;text-align:left!important;background:none!important;padding:0!important}
#p-inicio #promo-hero .promo-img .promo-tag{display:inline-flex!important;align-items:center;padding:5px 9px!important;border:1px solid #ffd36377!important;background:#161c2e99!important;color:#ffe08a!important;border-radius:99px!important;font-size:10px!important;font-weight:800!important;line-height:1!important}
#p-inicio #promo-hero .promo-img .promo-fx b{font-size:clamp(17px,2.1vw,24px)!important;line-height:1.08!important;letter-spacing:-.025em!important;text-shadow:0 2px 14px #001124!important;color:white!important}
#p-inicio #promo-hero .promo-img .promo-sub{font-size:clamp(11px,1.3vw,13px)!important;line-height:1.35!important;color:#f1f6ff!important}
#p-inicio #promo-hero .promo-img .promo-preco{font-size:clamp(14px,1.5vw,16px)!important;color:#ffe172!important}
#p-inicio #promo-hero .promo-img .promo-antigo{font-size:11px!important;color:#d2deea!important}
#p-inicio #promo-hero .promo-img .promo-go{border:0!important;border-radius:99px!important;padding:10px 14px!important;margin-top:5px!important;min-height:40px!important;background:#fff!important;color:#122a49!important;font-size:12px!important;font-weight:850!important;box-shadow:0 5px 15px #0005!important}
#p-inicio #promo-hero .promo-nav{position:absolute!important;z-index:4!important;right:11px!important;bottom:10px!important;left:auto!important;display:flex!important;align-items:center!important;gap:2px!important;padding:3px!important;background:#08192dc9!important;border:1px solid #ffffff3a!important;border-radius:99px!important}
#p-inicio #promo-hero .promo-nav .promo-set{border:0!important;background:transparent!important;color:#fff!important;min-width:34px!important;width:34px!important;height:34px!important;position:static!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;border-radius:50%!important;font-size:19px!important;line-height:1!important}
#p-inicio #promo-hero .promo-dots{display:flex!important;align-items:center!important;gap:0!important;margin:0!important}
#p-inicio #promo-hero .promo-dot{display:grid!important;place-items:center!important;min-width:22px!important;width:22px!important;height:34px!important;padding:0!important;background:transparent!important;border:0!important}
#p-inicio #promo-hero .promo-dot::before{content:'';width:6px;height:6px;border-radius:8px;background:#e7f0fa80;transition:width .25s,background .25s}
#p-inicio #promo-hero .promo-dot.on::before{width:14px;background:#ffcc43}
#p-inicio #promo-hero.vt-motion-paused .vt-photo-stage,#p-inicio #promo-hero.vt-motion-paused .vt-photo-focus,#p-inicio #promo-hero.vt-motion-paused .vt-banner-glimmer,#p-inicio #promo-hero.vt-motion-paused .vt-banner-spark{animation-play-state:paused!important}
/* A arte permanece inteira na largura, com aproximação máxima de 2,5%, sem giro. */
@keyframes vt-photo{0%{transform:translate3d(0,-50%,0) scale(1)}100%{transform:translate3d(0,-50%,0) scale(1.025)}}
@media(max-width:580px){#p-inicio #promo-hero .promo-img .promo-go{font-size:11px!important;white-space:nowrap!important}#p-inicio #promo-hero:has(.promo-slide.promo-img) .promo-slide{min-height:280px!important;padding:17px 15px 60px!important}#p-inicio #promo-hero .promo-img .promo-fx{width:62%!important}}
@media(prefers-reduced-motion:reduce){#p-inicio #promo-hero:not(.vt-motion-on) .vt-photo-stage,#p-inicio #promo-hero:not(.vt-motion-on) .vt-photo-focus,#p-inicio #promo-hero:not(.vt-motion-on) .vt-banner-glimmer,#p-inicio #promo-hero:not(.vt-motion-on) .vt-banner-spark{animation-play-state:paused!important}}
/* Em fontes de fallback as abas também precisam poder encolher em 320 px. */
@media(max-width:360px){#p-produto .pd-rich-grid,#p-produto .pd-rich-card{min-width:0!important;width:100%!important;max-width:100%!important}#p-produto .pd-rich-tabs{min-width:0}#p-produto .pd-rtab{min-width:0;overflow-wrap:normal}}

/*ajustes-631-acabamento.css*/
/* ════════════════════════════════════════════════════════════════════
   ajustes-631-acabamento.css — 6.31.0 (01/11/2026)

   Camada de ACABAMENTO: área do cliente, fotos e polaroid.
   Só aparência. Nenhuma regra aqui muda cálculo, preço, frete ou
   gravação — nada de JS, nada de markup novo.

   ── O que esta camada conserta ──────────────────────────────────────
   1. PALETA. O site tem hoje DUAS marcas conviventes: a identidade
      (índigo #3B3A96 sobre creme #F4F1EA, definida em
      camada-621-identidade.css) e uma paleta azul antiga que ainda
      vaza nos módulos por --vt-* (--vt-brand:#0888c8, em
      ajustes-620-modulos.css). Resultado visível: o card selecionado
      fica azul, o resto da loja é índigo. Aqui os --vt-* são
      reapontados para a identidade.

   2. A "tira arco-íris". O cartão de pedido desenhava uma barrinha
      com degradê amarelo→rosa→azul→violeta antes do número
      (.order .top b::before). Vira a barra da marca.

   3. HIERARQUIA. Número, data, valor e etapa tinham pesos parecidos.
      Aqui: número e valor em Sora, rótulos em caixa-alta de 10 px,
      números tabulares no dinheiro.

   4. AVALIAÇÃO. A caixa era rosa (#FFF9FC/#F3C4D8) e parecia erro.
      Vira creme dourado na pergunta e verde na confirmação. A marcação
      .aval-estrelas button[data-n] NÃO muda (o teste da estrela usa).

   5. DUAS TELAS. Em ≥1024 px os cartões de pedido e de balcão ficam em
      duas colunas e os cards de módulo ganham largura mínima maior.

   Rollback: remover o <link> desta camada dos HTML. Nada mais depende
   dela.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. a identidade manda ────────────────────────────────────────── */
:root{
  /* módulos (ajustes-620-modulos.css) passam a usar a marca da casa */
  --vt-brand:#3B3A96;
  --vt-ink:#191842;
  --vt-line:#E3DED2;
  --vt-cream:#F4F1EA;
  --vt-bg:#F4F1EA;
  --vt-muted:#5F5C6B;
  --vt-muted2:#8A8578;
  --vt-ok:#0F7A3D;
  --vt-ok-bg:#EAF6EE;

  /* azuis de apoio viram índigo/violeta da identidade */
  --brand-2:#5B5BD6;
  --brand-soft:#ECEBF8;
  --brand-ink:#2F2E7A;
}

/* ── 2. tipografia e números ──────────────────────────────────────── */
.money, .order .val, .fpc .fpc-p, .pol-kit .pr, .exec-status-grid b{
  font-variant-numeric:tabular-nums;
}
/* rótulo pequeno no padrão único: 10 px, caixa-alta, tracking */
.exec-status-grid small,
.balcao-meta,
.tabs + * .lab,
.ft-banner-eyebrow,
.pb-eyebrow{
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* ── 3. ÁREA DO CLIENTE ───────────────────────────────────────────── */

/* abas: controle segmentado, sem "esticar" o texto em 5 colunas */
.tabs{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:13px !important;
  padding:4px !important;
  gap:3px !important;
  box-shadow:none !important;
}
.tabs button{
  min-height:38px;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:-.01em;
  border-radius:10px !important;
  color:var(--muted) !important;
  padding:9px 6px !important;
}
.tabs button.on{
  background:var(--brand) !important;
  color:#fff !important;
  box-shadow:0 6px 14px -10px rgba(59,58,150,.9) !important;
}

/* cartão de pedido (orçamento do site) */
.order{
  border-left-width:3px !important;
  border-left-color:var(--brand-soft) !important;
  border-radius:15px !important;
  padding:16px 17px !important;
}
.order:hover{border-left-color:var(--brand) !important; transform:none !important}
/* a barrinha arco-íris vira a barra da marca */
.order .top b::before{
  background:var(--brand) !important;
  width:3px !important;
  height:17px !important;
  border-radius:99px !important;
}
.order .top b{font-size:14.5px !important; letter-spacing:-.01em !important}
.order .when{font-size:11.5px !important; color:var(--muted-2) !important}

.exec-status-grid{
  background:var(--paper) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  padding:11px 12px !important;
}
.exec-status-grid small{
  font-size:9px !important; font-weight:800 !important; color:var(--muted-2) !important; margin-bottom:3px;
}
.exec-status-grid b{font-size:12.5px !important; color:var(--ink) !important}
.exec-order-next{font-size:12px !important; line-height:1.5 !important; color:var(--muted) !important}

.exec-fin-status{
  border-radius:99px !important;
  font:800 9.5px/1 var(--font-b) !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  padding:6px 9px !important;
}

/* ações: um primário claro, o resto discreto */
.exec-row-actions{gap:7px !important}
.exec-row-actions .btn{min-height:38px; font-size:12px !important; border-radius:10px !important}

/* pedido de balcão */
.balcao-h b{font-size:14px !important; color:var(--ink) !important}
.balcao-h span{font-size:11.5px !important; line-height:1.5 !important}
.balcao-card{
  border-radius:14px !important;
  border:1px solid var(--line) !important;
  padding:13px 14px !important;
  box-shadow:0 1px 2px rgba(8,32,64,.04) !important;
}
.balcao-top b{font-size:13.5px !important; letter-spacing:-.01em !important}
.balcao-st{
  font-family:var(--font-b) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  padding:5px 8px !important;
  display:inline-flex !important;
  align-items:center;
  gap:5px;
}
.balcao-st::before{
  content:""; width:5px; height:5px; border-radius:99px; background:currentColor; display:block;
}
.balcao-meta{font-size:11.5px !important; color:var(--muted-2) !important; margin-top:4px !important}
.balcao-linha{
  background:var(--paper) !important;
  border-radius:9px !important;
  font-size:11.5px !important;
  color:#4a4a5e !important;
  padding:7px 10px !important;
}
.balcao-wa{
  font-size:12px !important;
  color:var(--brand) !important;
  display:inline-flex !important;
  align-items:center;
  gap:5px;
  min-height:32px;
}

/* avaliação: de rosa-choque para creme dourado */
.aval-l3{
  background:#FDFAF3 !important;
  border:1px solid #EADFC6 !important;
  border-radius:13px !important;
  padding:12px 13px !important;
}
.aval-top b{font-size:13px !important; color:#6B4A0B !important}
.aval-estrelas{gap:7px !important}
.aval-estrelas button{
  width:46px !important;
  flex:0 0 auto;
  height:44px !important;
  border-radius:10px !important;
  border:1px solid #E3D6BB !important;
  background:#fff !important;
  color:#C9B78F !important;
  font-size:18px !important;
  transition:transform .12s, border-color .12s, background .12s;
}
.aval-estrelas button:hover{border-color:#D9AE54 !important; transform:translateY(-1px)}
.aval-estrelas button.on{
  background:#FFF6E3 !important;
  border-color:#D9AE54 !important;
  color:#C08A16 !important;
}
.aval-dica{color:#8A6A2B !important; font-size:11px !important}
.aval-google{min-height:40px; border-radius:10px !important}

/* resumo da conta: números com peso, rótulo discreto */
.exec-conta-stats>div{
  border-radius:13px !important;
  padding:14px 16px !important;
  border:1px solid var(--line) !important;
}
.exec-conta-stats b{font-size:23px !important; letter-spacing:-.02em}
.exec-conta-stats span{
  font-size:9px !important; font-weight:800 !important; letter-spacing:.08em !important;
  text-transform:uppercase !important; color:var(--muted-2) !important; margin-top:2px;
}

/* estado vazio */
.empty{
  border-radius:14px !important;
  border:1px dashed #DDD6C7 !important;
  background:#fff !important;
}
.empty b{font-size:14px !important}

/* ── 4. MÓDULOS: FOTOS E POLAROID ─────────────────────────────────── */

/* banner: mesma pele nos dois módulos */
.ft-banner, .pol-banner{
  border-radius:18px !important;
  border:1px solid #EADFCB !important;
  box-shadow:0 16px 34px -28px rgba(8,32,64,.55) !important;
}
.ft-banner-eyebrow, .pb-eyebrow{
  font-family:var(--font-b) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  color:#8A8272 !important;
}
.ft-banner h1, .pb-tit{
  letter-spacing:-.015em !important;
  line-height:1.08 !important;
}
.ft-banner-sub, .pb-sub{
  font-size:13px !important;
  line-height:1.55 !important;
  color:#5F5A4E !important;
  max-width:52ch;
}
/* botões de faixa de preço: brancos, com o valor em índigo */
.ft-pill, .pb-pills > *{
  background:#fff !important;
  border:1px solid #E4DCCB !important;
  border-radius:9px !important;
  font-size:11px !important;
  font-weight:700 !important;
  color:#4A4438 !important;
  padding:8px 10px !important;
  box-shadow:none !important;
}
.ft-pill b, .pb-pills b{color:var(--brand) !important}
.ft-pill.on, .pb-pills .on{
  border-color:var(--brand) !important;
  box-shadow:0 0 0 2px rgba(59,58,150,.12) !important;
}
/* botão principal do banner + link do WhatsApp */
.btn-hero-dark, .pb-btn{
  background:var(--brand) !important;
  border-radius:11px !important;
  min-height:44px;
  font-size:13px !important;
  box-shadow:0 10px 20px -14px rgba(59,58,150,.95) !important;
}
.btn-hero-dark:hover, .pb-btn:hover{background:#2F2E7A !important}
.ft-banner-garantias, .pb-selos{font-size:11px !important; color:#6C6555 !important}
.ft-banner-garantias b, .pb-selos i{color:var(--ok) !important}

/* selo "a partir de R$ …" */
.vt-selo-preco{
  background:rgba(25,24,66,.92) !important;
  border-radius:99px !important;
  font:700 10.5px/1 var(--font-b) !important;
  padding:7px 11px !important;
  backdrop-filter:blur(4px);
}
.vt-selo-preco b{font-weight:800 !important}

/* card de escolha (fotos e polaroid) */
.fpc-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important}
.fpc, .pol-kit{
  border-radius:15px !important;
  border:1px solid var(--line) !important;
  box-shadow:0 1px 2px rgba(8,32,64,.04) !important;
  overflow:hidden;
}
.fpc:hover, .pol-kit:hover{border-color:#CFC7E6 !important; transform:none !important}
.fpc .fpc-photo, .pol-kit .ph{height:150px !important}
.fpc .fpc-n, .pol-kit h2{font-size:14px !important; letter-spacing:-.01em !important}
.fpc .fpc-apelido, .pol-kit .apelido{font-size:11px !important; color:var(--muted) !important}
.fpc .fpc-price-row, .pol-kit .pr{border-top:1px solid var(--line) !important}
.fpc .fpc-p, .pol-kit .pr b{font-size:22px !important; letter-spacing:-.025em !important; color:var(--ink) !important}
/* faixas de desconto: pílulas creme em vez de verde-água */
.fpc .fpc-tier{
  background:#F6F2E9 !important;
  color:#6B5A2E !important;
  border:1px solid #E9DFC9 !important;
  border-radius:7px !important;
  font-size:10px !important;
  font-weight:700 !important;
}
.fpc .fpc-tier b{color:#4A3D16 !important}
.fpc .fpc-bullets li::before, .pol-kit ul li::before{
  background:#CFC7E6 !important;
  border-radius:99px !important;
  width:5px !important; height:5px !important;
}
.fpc .fpc-check{border-radius:99px !important}
/* botão "escolher" no pé do card */
.vt-cardfoot .go, .fpc .vt-cardfoot .go{font-size:11.5px !important; font-weight:800 !important}
.fpc.on .vt-cardfoot .go, .pol-kit.on .vt-cardfoot .go{color:var(--ok) !important}

/* montador do polaroid: gabarito e resumo */
.pol-prev, .pol-build, .pol-slots{border-radius:14px !important}
.polx-clear-btn, .polx-batch-btn{border-radius:10px !important; font-size:11.5px !important}
.polx-foot-price b{font-variant-numeric:tabular-nums}

/* ── 5. DUAS TELAS ────────────────────────────────────────────────── */
@media (min-width:1024px){
  /* A área do cliente aproveita a largura — mas SEM virar grade.
     Tentativa descartada em 01/11: `*:has(> .order){display:grid}` pegava
     o .wrap inteiro (o cartão é filho direto dele) e jogava abas, números e
     pedidos de balcão em duas colunas. Duas colunas aqui exigem um
     contêiner próprio na marcação — fica para a próxima leva. */
  #p-conta .wrap, .wrap:has(.order){max-width:1120px}
  .balcao-card{margin-top:8px !important}

  /* cards de módulo mais largos, 3 por linha em tela cheia */
  .fpc-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important; gap:14px !important}
  .ft-banner, .pol-banner{min-height:330px}
  .ft-banner h1, .pb-tit{font-size:clamp(30px,3.2vw,40px) !important}
}
@media (max-width:560px){
  .exec-status-grid{grid-template-columns:1fr 1fr !important}
  .exec-conta-stats{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important}
  .exec-conta-stats>div{padding:11px 12px !important}
  .exec-conta-stats b{font-size:19px !important}
  .fpc-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important}
  .fpc .fpc-photo{height:110px !important}
  /* no celular as estrelas ocupam a largura toda (alvo grande para o dedo) */
  .aval-estrelas button{flex:1 1 0 !important; width:auto !important}
}

/*ajustes-633-kits.css*/
/* 6.32.4 — nada de texto cortado nos cards de produto
   (1) bullets dos kits: estavam com nowrap + overflow:hidden + ellipsis
       → "couchê 250 g · verniz UV total na…" em cartões (246 px),
         "Ideal para quadros de parede e…" em fotos (258 px).
   (2) apelido ("Tamanho Clássico · 15 × 10 cm"), faixas de preço
       ("3+ R$ 22,90 · 10+ R$ 19,90"), pílulas do polaroid na home
       ("4 fotos grandes · R$ 9,90") e o selo da foto também morriam em "…",
       principalmente no celular e em 1024 px.
   Regra: onde não cabe numa linha, quebra em duas — nunca "…". */
.fpc .fpc-bullets li,
.mat-kit .mat-bullets li,
.pol-kit .corpo ul li,
.pol-kit ul li{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  line-height:1.45 !important;
}

/* apelido do tamanho / material */
.fpc .fpc-apelido,
.mat-kit .mat-apelido,
.pol-kit .apelido{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  line-height:1.35 !important;
}

/* faixas de preço (3+, 10+, 30+) — antes a caixa tinha altura fixa de 24 px */
.fpc .fpc-tiers,
.mat-kit .mat-tiers,
.pol-kit .pol-tiers,
.pol-tiers,
.store-tiers{
  height:auto !important;
  min-height:24px !important;
  flex-wrap:wrap !important;
  overflow:visible !important;
  row-gap:4px !important;
  align-items:center !important;
}
.fpc .fpc-tier,
.mat-kit .mat-tier,
.store-tiers > *,
.pol-tiers > *{
  white-space:nowrap !important;
  flex:0 0 auto !important;
}

/* pílulas do card do polaroid na home */
#p-inicio .vb2-pill,
.vb2-pill{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  line-height:1.25 !important;
  height:auto !important;
}

/* selo em cima da foto (★ MAIS PEDIDO · …) */
.fpc-badge,
.fpc .fpc-badge{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.25 !important;
  max-width:calc(100% - 16px) !important;
}

/* etapas do montador do polaroid: "Polaroid 12×8 — kit com 4 fotos" saía "…" no celular */
.vtx-step .txt,
.vtx-step small,
.vtx-steps .txt,
.vtx-step.done .txt{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  line-height:1.3 !important;
}

/* 6.32.5 — preço e unidade no mesmo card, sem sair pela borda
   No celular o card tem 179 px: "R$ 14,90 / ampliação" passava 2 px da
   borda e o "o" final sumia; "R$ 2,49 / foto avulsa" passava 7 px. O card
   tem overflow:hidden, então o texto era cortado em silêncio — nenhum
   detector de estouro de página pegava isso. */
.fpc .fpc-price-row,
.mat-kit .mat-price-row,
.pol-kit .pr{
  flex-wrap:wrap !important;
  white-space:normal !important;
  row-gap:2px !important;
}
.fpc .fpc-p,
.mat-kit .mat-price,
.pol-kit .pr b{
  flex-wrap:wrap !important;
  max-width:100% !important;
}
.fpc .fpc-price-row small,
.mat-kit .mat-price-row small,
.fpc .fpc-p small,
.mat-kit .mat-price small,
.pol-kit .pr small,
.pol-kit .pr span{
  white-space:normal !important;
  overflow:visible !important;
  line-height:1.2 !important;
}

/*correcoes-layout.css*/
/* ============================================================================
   CORREÇÕES DE LAYOUT — VTDigital · 04/11/2026 · versão final
   Medido no site no ar com Chromium 1280×900 e 390×844.
   Entra só o que foi testado e não piorou nada. O que parecia correção e piorou
   ficou de fora, com a medição anotada — está tudo no fim do arquivo.
   Só CSS: nenhum HTML e nenhum JS precisam mudar.
   Instalação: subir este arquivo e incluir UMA linha em cada página, depois do
   último CSS de ajustes (ajustes-633-kits.css):
     <link rel="stylesheet" href="correcoes-layout.css?v=6.33.5">
   ========================================================================== */

/* ============================ 1. A PÁGINA QUE PULA AO TROCAR DE CARD ======
   Polaroid (e a página de cartões usa as mesmas peças).
   ANTES: altura da página 2.574 / 3.150 / 2.961 px conforme o kit escolhido
          → 576 px de sobe-e-desce. No celular: 5.097 / 6.048 / 5.021 → 1.027 px.
   DEPOIS: 0 px de variação nas duas larguras (medido, não estimado).
   ========================================================================= */

/* (a) os cards perdem a barra "prévia ao lado / Escolher" depois do primeiro
       clique e a linha encolhe 48 px — e o card escolhido desalinha a base */
.pol-kits { align-items: stretch; }
.pol-kit  { min-height: 365px; }

/* (b) a prévia da moldura tem altura de conteúdo: 192 / 361 / 369 px por kit */
#frames { min-height: 370px; }

/* (c) a grade de fotos cresce com o número de fotos (444 → 666 px) e a barra
       "Mostrando 1–6 de 9" só existe acima de 6 fotos (0 → 56 px):
       janela fixa com rolagem própria + barra sempre reservada */
#slots     { height: 520px; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
#pol-pager { min-height: 56px; }

@media (max-width: 760px) {
  .pol-kit           { min-height: 352px; }
  #frames            { min-height: 0; height: 430px; overflow-y: auto; overscroll-behavior: contain; }
  #slots             { height: 380px; }
  #pol-pager         { min-height: 98px; }
  #montar .polx-head { min-height: 225px; }   /* o nome do kit quebra uma linha a mais */
}

/* ============================ 2. ALVO DE TOQUE NO CELULAR =================
   Botões de 24 a 30 px de altura para o dedo. Medido antes de corrigir:
     foto-documento: 4 pastilhas de preço de 27 px + abas de 36 px
     agendas:        4 amostras de cor de 24 px
     fotos:          aba "Ver Todos" de 30 px
   Vai para 40 px (o ideal de acessibilidade é 44 — 40 já resolve o dedo sem
   engordar as pastilhas e quebrar o desenho do topo).
   ========================================================================= */
@media (max-width: 760px) {
  .rl-pills .pb-pill,
  .fd-hero-pill,
  .fd-tab,
  .ag-swatches button,
  .ft-ptab { min-height: 40px; }

  .ag-swatches button { padding-block: 8px; }
}

/* ==========================================================================
   O QUE FOI TESTADO E FICOU DE FORA (com o número que justifica)
   ==========================================================================

   1) RESERVAR A ALTURA DOS BLOCOS QUE CARREGAM DEPOIS (para matar o salto ao
      abrir). Não funciona: o conteúdo real fica MENOR que a reserva e o bloco
      encolhe na chegada — cria o salto que se queria evitar.
      Medido: fotos 0,18 → 0,39 (piorou 2×) · polaroid 0,01 → 0,29 (piorou).
      Na home e no catálogo quase não mexeu (0,93 → 0,95 / 0,92 → 0,93).

   2) ALINHAR A COLUNA EM 1180 EM TODAS AS PÁGINAS. Também piora o salto: o
      conteúdo é montado depois e, com a coluna mais estreita, ele re-quebra e
      empurra tudo.
      Medido: fotos 0,18 → 0,33 · foto 3×4 0,30 → 0,57.
      Ou seja: alinhar a coluna só faz sentido DEPOIS de resolver o item 3.

   3) O SALTO GRANDE (0,86) CONTINUA, e não é CSS. Aos ~900 ms o app troca o
      conteúdo inteiro do <main>: ele está com 21 px de altura e passa a 776 px,
      e o rodapé sai da tela. Enquanto a página não for pintada antes de buscar
      os dados (ou vier pronta do servidor), esse salto existe — reservar altura
      por bloco não resolve porque o problema é o <main> inteiro.
      É mudança no app.js, não no CSS.

   4) IMAGENS SEM LARGURA E ALTURA: 29 de 30 na home e 48 de 49 no catálogo
      vêm sem width/height. Isso se corrige no HTML de cada imagem, não aqui.
   ========================================================================== */

/* ======================= 3. A PÁGINA NÃO PODE "MUDAR" AO TROCAR O CARD ===
   Medido no ar (6.33.5), altura da página ao trocar entre os três kits:
     1024 px → 12x8 3162 · 9x6 3162 · tripla 3114  →  48 px de salto
     1100 px → 3132 ... 14 px de salto
     360 px  → 27 a 40 px de salto
   Três peças mudavam de altura conforme o kit escolhido:
     1) .polx-head        — o nome do kit leva 1, 2 ou 3 linhas   (77 / 126 / 143 px)
     2) #pol-steps        — "Faltam 9 foto(s)" quebra em 1..5 linhas (49 a 149 px)
     3) .polx-foot-price  — "R$ 12,90" + "1 kit × ..." quebra em 2 linhas (27 / 53 px)
   Cada faixa abaixo é o PIOR caso medido de 10 em 10 px, de 320 a 2560 px, nos 3 kits.
   Altura reservada = altura do conteúdo → a página nunca cresce nem encolhe ao trocar. */

#pol-steps        { min-height: 149px; }
.polx-foot-price  { min-height: 27px; }

@media (min-width: 340px)  { #pol-steps { min-height: 135px; } }
@media (min-width: 370px)  { #pol-steps { min-height: 121px; } }
@media (min-width: 380px)  { #pol-steps { min-height: 108px; } }
@media (min-width: 590px)  { #pol-steps { min-height: 94px;  } }
@media (min-width: 690px)  { #pol-steps { min-height: 106px; } }
@media (min-width: 990px)  { #pol-steps { min-height: 63px;  } }
@media (min-width: 1180px) { #pol-steps { min-height: 49px;  } }

@media (max-width: 760px)  { .polx-foot-price { min-height: 53px; } }
@media (min-width: 761px) and (max-width: 1179px) { .polx-foot-price { min-height: 53px; } }

/* cabeçalho do kit: 77 px de 1100 para cima; 126/143 nas larguras onde o nome quebra */
@media (min-width: 761px) and (max-width: 820px)  { #montar .polx-head { min-height: 143px; } }
@media (min-width: 821px) and (max-width: 1099px) { #montar .polx-head { min-height: 126px; } }

/* tira de prévia no celular: quadro proporcional à tela — em 390 px o kit de 9 fotos
   virava 5 linhas (913 px) dentro de uma janela de 430 px e 5 quadros saíam da caixa */
@media (max-width: 760px) {
  #frames .pol-frame                  { width: min(140px, calc(50% - 6px)); }
  #frames[data-kit="9x6"] .pol-frame  { width: min(84px, calc(33.333% - 8px)); }
  #frames[data-kit="9x6"] .pol-frame .f { height: 29.88px; }
  #frames[data-kit="tripla"] .pol-frame { width: min(112px, calc(50% - 6px)); }
}

/* barra de paginação das fotos: "Mostrando 1–6 de 9" só aparece com mais de 6 fotos e,
   em tela de 350 px para baixo, quebra em outra linha (98 → 137 px) */
@media (max-width: 350px) { #pol-pager { min-height: 137px; } }