/*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-vitrine.css*/
/* ════════════════════════════════════════════════════════════════════
ajustes-6202-vitrine.css — CATÁLOGO COM O CARD DA HOME
19/10/2026
O catálogo passa a usar o card da home (ver o .js). Parte do visual
desse card não vem de `.home-prod`: vem de #grid-inicio .prod.home-prod
no estilos.css, que só existe na trilha da home.
Aqui as mesmas declarações valem dentro de #grid-cat. Os números foram
medidos no card AO VIVO da home (1440 px), não deduzidos do CSS:
card 218 × 378 px · raio 18 px
.bd padding 11px 12px 13px · gap 5px · flex coluna
título 13.5 px / 17.28 px · peso 700 · 2 linhas · letter-spacing −.01em
rótulo 10 px · peso 800 · .08em · maiúsculas · #5b6b7e
preço 22 px · peso 800 · −.02em · Sora
pílula 11 px · peso 700 · #065f46 em #ecfdf5 · borda #a7f3d0 · 99px
unidade 10.5 px / 1.25 · #5b6b7e
Se a home mudar, é repetir aqui o que mudou lá.
════════════════════════════════════════════════════════════════════ */
#grid-cat .prod.home-prod .thumb{position:relative}
#grid-cat .prod.home-prod .bd{display:flex;flex-direction:column;gap:5px;
padding:11px 12px 13px}
#grid-cat .prod.home-prod .bd > b{font-family:var(--font-d),Sora,system-ui,sans-serif;
font-size:13.5px;line-height:1.28;font-weight:700;letter-spacing:-.01em;
color:var(--ink,#082040);display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip}
#grid-cat .prod.home-prod:hover .bd > b{text-decoration:underline;
text-decoration-color:#c7d2e0;text-underline-offset:3px}
#grid-cat .prod.home-prod .price{display:grid;grid-template-columns:1fr;row-gap:3px;
margin-top:2px;padding-top:0;border-top:0}
#grid-cat .prod.home-prod .price > span{font-size:10px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:#5b6b7e}
#grid-cat .prod.home-prod .price > b{font-family:var(--font-d),Sora,system-ui,sans-serif;
font-size:22px;line-height:1.32;font-weight:800;letter-spacing:-.02em;color:var(--ink,#082040)}
#grid-cat .prod.home-prod .store-kit{align-self:flex-start;font-size:11px;font-weight:700;
color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:99px;
padding:2px 8px}
#grid-cat .prod.home-prod .store-kit b{font-family:var(--font-d),Sora,system-ui,sans-serif;
font-size:15px;font-weight:900;letter-spacing:-.01em;color:var(--ink,#082040)}
#grid-cat .prod.home-prod .store-un{font-size:10.5px;line-height:1.25;color:var(--muted,#5b6b7e)}
#grid-cat .prod.home-prod .card-bopp-swatches{position:absolute;left:7px;right:7px;bottom:7px;
margin:0;padding:4px 7px;display:flex;align-items:center;gap:5px;
background:rgba(255,255,255,.86);border:0;border-radius:8px;box-shadow:none;
backdrop-filter:blur(3px)}
#grid-cat .prod.home-prod .card-bopp-swatches small{display:none}
#grid-cat .prod.home-prod .desc,
#grid-cat .prod.home-prod .store-tiers,
#grid-cat .prod.home-prod .product-ref,
#grid-cat .prod.home-prod .store-card-cta,
#grid-cat .prod.home-prod .store-prazo,
#grid-cat .prod.home-prod .price em{display:none!important}
/* ── telas estreitas ──────────────────────────────────────────────────
No celular o catálogo põe 2 cards por linha (≈169 px), mais estreitos
que o card da home na trilha. Sem ajuste, a pílula do kit de 20 quebra
em duas linhas. Medido: 137 px de pílula para 143 px de espaço a 390 px. */
@media (max-width:430px){
#grid-cat .prod.home-prod .store-kit{font-size:9.5px;padding:2px 6px;line-height:1.45}
#grid-cat .prod.home-prod .store-kit b{font-size:13.5px}
#grid-cat .prod.home-prod .bd > b{font-size:12.8px}
#grid-cat .prod.home-prod .price > b{font-size:20px}
}
@media (min-width:360px) and (max-width:379px){
#grid-cat .prod.home-prod .store-kit{font-size:9px;padding:2px 4px;
letter-spacing:-.015em;white-space:nowrap}
}
@media (max-width:359px){
#grid-cat .prod.home-prod .store-kit{line-height:1.5;padding:2px 7px;text-align:left}
}
/*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,") 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; }
}
/*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,") 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,") 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 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 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 / 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-6201-reviews.css*/
/* ════════════════════════════════════════════════════════════════════
ajustes-6201-reviews.css — avaliações do Google em carrossel (6.20.1)
────────────────────────────────────────────────────────────────────
O 6.17.0 já tinha um carrossel de 1 card por vez, sem foto e sem data.
Aqui o carrossel continua — como o dono pediu — mas passando de 3 em 3
no computador (2 no tablet, 1 no celular), com seta, bolinha, contador
e arrasto natural. Todo card mostra nota, nome, foto e tempo.
Escopo: SÓ #prova-social. Não encosta em produto, carrinho, módulo.
Para desfazer: apagar este arquivo, o .js e as linhas de include.
════════════════════════════════════════════════════════════════════ */
#prova-social .prova-deps{display:block;max-width:none !important;width:100%}
#prova-social .prova-deps .vt-car{
max-width:1120px;
margin:18px auto 0;
position:relative;
}
/* ── cabeçalho do carrossel: contador + setas ─────────────────────── */
#prova-social .prova-deps .vt-cab{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#prova-social .prova-deps .vt-cont{
font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:.06em;
text-transform:uppercase;
color:#7b8aa0;
}
#prova-social .prova-deps .vt-navs{display:flex;gap:8px}
#prova-social .prova-deps .vt-nav{
width:34px;height:34px;
border-radius:50%;
border:1px solid #dfe7f0;
background:#fff;
color:#082040;
font:600 15px/1 system-ui,sans-serif;
display:grid;place-items:center;
cursor:pointer;
box-shadow:0 1px 2px rgba(8,32,64,.06);
transition:background .16s,border-color .16s,color .16s,transform .16s;
padding:0;
}
#prova-social .prova-deps .vt-nav:hover:not(:disabled){
background:#082040;
border-color:#082040;
color:#fff;
transform:translateY(-1px);
}
#prova-social .prova-deps .vt-nav:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#prova-social .prova-deps .vt-nav:disabled{opacity:.35;cursor:default}
/* ── trilho ───────────────────────────────────────────────────────── */
#prova-social .prova-deps .vt-deps{
display:flex;
gap:14px;
align-items:stretch;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
padding:2px 2px 6px;
margin:0;
scrollbar-width:none;
}
#prova-social .prova-deps .vt-deps::-webkit-scrollbar{display:none}
#prova-social .prova-deps .vt-deps .vt-dep{
flex:0 0 calc((100% - 28px) / 3);
scroll-snap-align:start;
background:#fff;
border:1px solid var(--line,#e3e9f0);
border-radius:16px;
padding:16px 17px;
display:flex;
flex-direction:column;
gap:10px;
box-shadow:0 1px 2px rgba(8,32,64,.04);
margin:0;
min-width:0;
}
#prova-social .prova-deps .vt-dep .vt-est{
color:#f5b301;
letter-spacing:2px;
font-size:13px;
line-height:1;
}
#prova-social .prova-deps .vt-dep blockquote{
font-size:13.4px;
line-height:1.52;
color:#22374f;
margin:0;
display:-webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient:vertical;
overflow:hidden;
}
#prova-social .prova-deps .vt-dep .vt-resp{
background:#f7fafc;
border-left:3px solid var(--brand);
border-radius:0 8px 8px 0;
padding:8px 10px;
font-size:11.6px;
line-height:1.45;
color:#3b5470;
}
#prova-social .prova-deps .vt-dep .vt-resp b{
display:block;
font-size:10px;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--brand);
margin-bottom:2px;
}
#prova-social .prova-deps .vt-dep figcaption{
display:flex;
align-items:center;
gap:9px;
margin-top:auto;
padding-top:9px;
border-top:1px solid #f0f4f8;
font-size:12.6px;
color:#37506e;
min-width:0;
}
#prova-social .prova-deps .vt-dep .vt-av{
width:30px;
height:30px;
border-radius:50%;
flex:0 0 auto;
display:grid;
place-items:center;
background:#f4f1ea;
border:1px solid #e6dfd1;
color:#3B3A96;
font:800 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
overflow:hidden;
}
#prova-social .prova-deps .vt-dep .vt-av img{width:100%;height:100%;object-fit:cover;display:block}
#prova-social .prova-deps .vt-dep .vt-quem{min-width:0;flex:1 1 auto}
#prova-social .prova-deps .vt-dep .vt-quem b{
display:block;
font-size:12.6px;
line-height:1.25;
color:#082040;
overflow-wrap:anywhere;
}
#prova-social .prova-deps .vt-dep .vt-quem span{font-size:11.5px;color:#7b8aa0}
/* ── bolinhas ─────────────────────────────────────────────────────── */
#prova-social .prova-deps .vt-dots{
display:flex;
justify-content:center;
gap:7px;
margin-top:12px;
}
#prova-social .prova-deps .vt-dot{
width:7px;height:7px;
border-radius:50%;
border:0;
padding:0;
background:#cfd9e5;
cursor:pointer;
transition:width .2s,background .2s;
}
#prova-social .prova-deps .vt-dot[aria-current="true"]{
width:22px;
border-radius:4px;
background:var(--brand);
}
#prova-social .prova-deps .vt-mais{
display:flex;
justify-content:center;
margin-top:14px;
}
@media (max-width:980px){
#prova-social .prova-deps .vt-deps .vt-dep{flex-basis:calc((100% - 14px) / 2)}
}
@media (max-width:640px){
#prova-social .prova-deps .vt-deps{gap:11px;scroll-snap-type:x mandatory}
#prova-social .prova-deps .vt-deps .vt-dep{flex-basis:86%;padding:14px}
#prova-social .prova-deps .vt-dep blockquote{font-size:13px;-webkit-line-clamp:6}
#prova-social .prova-deps .vt-nav{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
#prova-social .prova-deps .vt-deps{scroll-behavior:auto}
}
/*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}
/*camada-622-home.css*/
/* ════════════════════════════════════════════════════════════════════
camada 6.22 — HOME, melhorias medidas (só a home; #p-inicio)
────────────────────────────────────────────────────────────────────
1. AGENDA: as 12 classes .vt-band* não tinham NENHUM estilo no pacote
→ a seção saía crua (botão do navegador, imagem invisível).
Aqui ela recebe o mesmo padrão dos cards vizinhos.
2. CONTRASTE: 12 textos reprovavam no AA (medido no pixel).
3. ALVO DE TOQUE: 55 elementos < 44 px (medido no DOM).
4. ALTURA: 8.056 px na home a 390 px — espaçamento e grade enxutos.
Nada de texto novo. Nada de conteúdo escondido (só o que duplica).
════════════════════════════════════════════════════════════════════ */
/* ── 1. AGENDA — o card que faltava ─────────────────────────────────── */
#p-inicio .vt-band-sec .vt-band-head{
display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin:0 0 14px;
}
#p-inicio .vt-band-eb{
font-family:var(--font-m,ui-monospace,monospace);font-size:11px;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--brand);
margin:0 0 4px;display:flex;align-items:center;gap:9px;
}
#p-inicio .vt-band-eb::before{
content:"";width:30px;height:3px;border-radius:2px;
background:linear-gradient(90deg,var(--brand),var(--pink));
}
#p-inicio .vt-band-head h2{font-family:var(--font-d);font-size:26px;line-height:1.1;letter-spacing:-.03em;margin:0;color:var(--ink)}
#p-inicio .vt-band{
--vt-bg:#0d2740;
position:relative;display:grid;grid-template-columns:1fr;gap:0;
background:var(--vt-bg);border:1px solid #1d3f5e;border-radius:16px;
overflow:hidden;box-shadow:0 18px 40px -24px rgba(15,23,42,.18);
margin-bottom:18px;
}
#p-inicio .vt-band-art{
order:-1;height:152px;background-size:cover;background-position:center;
background-color:#15395c;position:relative;
}
#p-inicio .vt-band-art::after{
content:"";position:absolute;inset:0;
background:linear-gradient(0deg,var(--vt-bg) 0%,rgba(13,39,64,0) 46%);
}
#p-inicio .vt-band-bd{padding:14px 18px 18px}
#p-inicio .vt-band-ek{
font-family:var(--font-m,ui-monospace,monospace);font-size:10.5px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:#9fbdd4;margin:0 0 6px;
}
#p-inicio .vt-band-bd h3{
font-family:Georgia,"Times New Roman",serif;font-weight:400;
font-size:22px;line-height:1.15;letter-spacing:-.02em;color:#fff;margin:0 0 8px;
}
#p-inicio .vt-band-bd h3 em{font-style:italic;color:#7fd0ff}
#p-inicio .vt-band-bd p{color:#c3d6e6;font-size:13px;line-height:1.55;margin:0 0 14px}
#p-inicio .vt-band-tags{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
#p-inicio .vt-band-tags span{
font-size:11.5px;font-weight:700;color:#eaf4fb;background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.22);padding:5px 11px;border-radius:999px;
}
#p-inicio .vt-band-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#p-inicio .vt-b1{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:#fff;color:#0d2740;border:0;border-radius:999px;
padding:0 20px;min-height:46px;font:800 13px var(--font-d);cursor:pointer;
transition:transform .15s,background .15s;
}
#p-inicio .vt-b1:hover{background:#e2ebf4;transform:translateY(-1px)}
#p-inicio .vt-b2{
display:inline-flex;align-items:center;min-height:44px;
font-size:12.5px;font-weight:700;color:#b9d6ea;
text-decoration:underline;text-underline-offset:3px;
}
#p-inicio .vt-b2:hover{color:#7fd0ff}
#p-inicio .vt-band-gk{
display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;
margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);
font-size:11.5px;color:#c3d6e6;
}
#p-inicio .vt-band-gk b{color:#4ade80;margin-right:4px}
/* ── 2. CONTRASTE ─────────────────────────────────────────────────────
medido no pixel, com o fundo real atrás do texto (não o do CSS). */
/* o azul de marca sobre o papel dá 4,24 — precisa 5,07 para 11 px */
#p-inicio .eyebrow-m,#p-inicio .vt-band-eb{color:#006faa!important}
/* sobre fundo escuro o mesmo rótulo precisa ser claro */
#p-inicio .store-proof .eyebrow-m{color:#8fc4e6!important}
/* avaliações: cinza 3,51 → 6,08 · estrela 1,85 → 3,93 */
/* a prova social e o rodapé vivem FORA de #p-inicio (seção global) */
#prova-social .vt-cont{color:#55637a!important;font-size:12px!important}
#prova-social .vt-est{color:#9c6300!important}
#prova-social .vt-dep small,#prova-social .vt-dep time,#prova-social .vt-quem>span{color:#55637a!important}
.jx-como-funciona{color:#006faa!important;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
/* rodapé: 2,82 → 6,58 */
.ps-l,.ps-note{color:#8fa4ba!important}
/* preço sobre foto: precisa de sombra para não sumir */
#p-inicio .promo-preco{text-shadow:0 1px 7px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6)}
/* ── 3. ALVO DE TOQUE ──────────────────────────────────────────────────
Meta: 44 px em toda AÇÃO (botão, CTA, ícone, navegação, seta).
Link de lista no rodapé fica em 32 px — passa no mínimo AA (24) e não
estica o rodapé em 250 px. Se o dono quiser 44 em tudo, é 1 linha. */
.logo{min-height:44px;display:inline-flex;align-items:center}
.store-search input{min-height:44px}
.store-search button{width:44px!important;height:44px!important;min-width:44px}
.btn-sm{min-height:44px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
#p-inicio .btn-entry-dark{min-height:44px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;justify-content:center}
#p-inicio .photo-entry-link{min-height:44px;display:inline-flex;align-items:center}
#p-inicio .rail-seta{width:44px!important;height:44px!important}
#p-inicio .promo-set{
width:44px!important;height:44px!important;
top:34%!important;bottom:auto!important;transform:translateY(-50%)!important;
background:rgba(6,20,38,.55)!important;border:1px solid rgba(255,255,255,.35)!important;
backdrop-filter:blur(2px);
}
#prova-social .vt-cont{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
#prova-social .vt-nav{width:44px!important;height:44px!important}
#prova-social .btn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
#prova-social .vt-dot{
width:24px!important;height:24px!important;padding:8px!important;
box-sizing:border-box!important;background-clip:content-box!important;
}
#prova-social .vt-dots{gap:2px!important}
/* a bolinha desenhada continua 7 px; a área que o dedo acerta passa a 24 */
.promo-dot{
width:24px!important;height:24px!important;background:transparent!important;
display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.promo-dot::before{
content:"";width:7px;height:7px;border-radius:99px;
background:rgba(255,255,255,.42);transition:width .2s,background .2s;
}
.promo-dot.on::before{width:18px;background:#fbbf24}
.promo-dots{gap:0!important;margin-right:-8px}
/* mesma ideia nos dois pontinhos do selo do Google no herói */
.jx-gdot{
width:24px!important;height:24px!important;padding:9px!important;
box-sizing:border-box!important;background-clip:content-box!important;
}
.cl-cookies a,.cookie-bar a{min-height:44px;display:inline-flex;align-items:center}
.bottom-nav a,.bottom-nav button,.tabbar a,.tabbar button{min-height:44px}
.foot a{min-height:32px;display:inline-flex;align-items:center;padding-block:3px;line-height:1.35}
.foot .rede{min-width:44px;min-height:44px;justify-content:center}
/* ── 4. ALTURA: apertar o que sobra, sem cortar conteúdo ────────────── */
#p-inicio .store-rail-section{padding-top:26px;padding-bottom:26px}
#p-inicio .sec-head{margin-bottom:14px}
#p-inicio .hm-hero{padding-bottom:22px}
#p-inicio .hm-passos{margin-top:18px}
#p-inicio .mission-grid{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
#p-inicio .mission-card{
min-height:0;padding:14px;border-radius:14px;gap:6px;
display:flex;flex-direction:column;align-items:flex-start;
}
#p-inicio .mission-card .mission-icon{margin-bottom:4px;transform:scale(.92);transform-origin:left center}
#p-inicio .mission-card b{font-size:14.5px;line-height:1.2}
#p-inicio .mission-card small{font-size:11.5px;line-height:1.4;display:block}
#p-inicio .mission-card strong{font-size:12px;margin-top:auto;padding-top:8px}
/* o 5º card ("Onde está meu pedido?") foi movido de propósito para a
seção de confiança — .jx-mission-blue-movido. Não reexibo. */
#p-inicio .photo-entry-card .photo-entry-art{height:170px!important}
#p-inicio .photo-entry-body{padding:16px 18px 18px}
#p-inicio .photo-entry-card h3{font-size:21px}
#p-inicio .photo-entry-card p{font-size:12.5px;line-height:1.5;margin-bottom:12px}
#p-inicio .photo-entry-garantias{
display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;
margin-top:10px;padding-top:10px;font-size:11px;line-height:1.35;
}
#p-inicio .photo-tags span{font-size:10.5px;padding:4px 9px}
/* prova social: o card branco do Google duplica o bloco de avaliações
logo abaixo (mesma nota, mesmo número) — aqui ele vira selo discreto */
#p-inicio .proof-google{
background:#fff;border-radius:14px;padding:12px 16px;margin:0;
display:flex;flex-direction:column;align-items:flex-start;gap:1px;
box-shadow:0 18px 40px -24px rgba(15,23,42,.45);
}
#p-inicio .proof-google span{color:#9c6300;font-size:14px;letter-spacing:2px;line-height:1.1}
#p-inicio .proof-google b{color:#0d2740;font-size:19px;line-height:1.15}
#p-inicio .proof-google small{color:#55637a;font-size:11.5px}
#p-inicio .store-proof{padding-top:30px;padding-bottom:30px}
#p-inicio .store-proof .h2{font-size:24px;line-height:1.12;margin:6px 0 8px}
#p-inicio .store-proof p{font-size:13px}
/* rótulos e títulos da home numa escala só (eram 21 tamanhos) */
#p-inicio .h2{font-size:24px;line-height:1.12;letter-spacing:-.03em}
#p-inicio .eyebrow-m{font-size:11px}
#p-inicio .intro{font-size:12.5px;line-height:1.5}
@media (min-width:760px){
#p-inicio .vt-band{grid-template-columns:1.1fr .9fr;min-height:280px}
#p-inicio .vt-band-art{order:0;height:auto;min-height:280px}
#p-inicio .vt-band-art::after{background:linear-gradient(90deg,var(--vt-bg) 0%,rgba(13,39,64,0) 24%)}
#p-inicio .vt-band-bd{padding:24px 26px}
#p-inicio .vt-band-bd h3{font-size:29px}
#p-inicio .mission-grid{grid-template-columns:repeat(3,1fr)}
}
/* ── 5. HERÓI ─────────────────────────────────────────────────────────
O selo do Google é um carrossel de 2 slides empilhados: o slide de
trás aparecia esmaecido por baixo do da frente (dá para ver no ar).
Aqui os dois viram dois chips lado a lado — sem sobreposição, sem
bolinhas de 7 px, e as duas informações (nota e retirada) juntas. */
#p-inicio .selo-google{
display:block;background:none!important;border:0!important;padding:0!important;
box-shadow:none!important;margin:14px 0 0!important;
}
#p-inicio .jx-gslides{
display:flex!important;flex-wrap:wrap;gap:8px;
position:static!important;height:auto!important;min-height:0!important;overflow:visible!important;
}
#p-inicio .jx-gslide{
display:inline-flex!important;align-items:center;gap:7px;
position:static!important;opacity:1!important;visibility:visible!important;
transform:none!important;inset:auto!important;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
border-radius:999px;padding:0 14px;min-height:40px;
font-size:12.5px;line-height:1;white-space:nowrap;
}
#p-inicio .jx-gslide b{font-size:13px!important}
#p-inicio .jx-gdots{display:none!important}
/* texto do banner sobre a foto: sem véu, o nome e o preço somem */
#p-inicio .promo-fx{
background:linear-gradient(180deg,rgba(6,20,38,0) 0%,rgba(6,20,38,.55) 45%,rgba(6,20,38,.9) 100%);
padding:26px 16px 16px!important;
}
#p-inicio .promo-slide{border-radius:16px;overflow:hidden}
#p-inicio .promo-antigo{opacity:.85}
/* o vão entre o herói e o banner não ajuda ninguém */
#p-inicio .hm-hero{padding-bottom:14px}
#p-inicio .hm-txt .sub{margin-bottom:16px}
#p-inicio .hm-txt .cta{gap:10px}
#p-inicio .mk-hero-art{margin-top:6px}
/* ── 6. AJUSTE SÓ DA PALETA DE IDENTIDADE (draft D) ───────────────────
branco no rosa do logo #EC0F8C dá 4,19 — abaixo do AA para 15 px.
#D60C7E é o mesmo rosa um passo mais escuro: 4,98. */
#p-inicio .btn-y{
background:linear-gradient(180deg,#E82E9B,#D60C7E)!important;
color:#fff!important;
}
/*ajustes-623-cards.css*/
/* ════════════════════════════════════════════════════════════════════
camada 6.23 — CARD DE PRODUTO (o desenho da foto do dono)
────────────────────────────────────────────────────────────────────
Ordem no card: foto · categoria · nome · pílulas · preço · faixa ·
rodapé (prazo + Ver). Mesma peça na home, no catálogo e onde mais
aparecer card de produto.
Só estilo: nenhum dado novo é inventado — tudo sai do produto.
════════════════════════════════════════════════════════════════════ */
.prod.card623{
display:flex;flex-direction:column;
background:#fff;border:1px solid #E6E1D6;border-radius:18px;
padding:10px;box-shadow:0 10px 26px -20px rgba(25,24,66,.45);
min-width:0;overflow:hidden;cursor:pointer;container-type:inline-size;
transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.prod.card623:hover{transform:translateY(-2px);border-color:#D8D1C2;
box-shadow:0 18px 34px -22px rgba(25,24,66,.5)}
/* ── foto ─────────────────────────────────────────────────────────── */
.card623 .c623-photo{
position:relative;border-radius:14px;overflow:hidden;background:#F4F1EA;
aspect-ratio:1/1;margin:0 0 10px;flex:none;
}
.card623 .c623-photo img{
width:100%;height:100%;object-fit:cover;display:block;
}
.card623 .c623-fotos{
position:absolute;right:7px;bottom:7px;
background:rgba(255,255,255,.94);color:#4A4760;
font:800 10.5px/1 var(--font-d,inherit);letter-spacing:.01em;
padding:5px 9px;border-radius:999px;box-shadow:0 2px 6px rgba(25,24,66,.18);
backdrop-filter:blur(3px);
}
/* ── texto ────────────────────────────────────────────────────────── */
.card623 .c623-cat{
font:800 9.5px/1.1 var(--font-m,ui-monospace,monospace);
letter-spacing:.13em;text-transform:uppercase;color:#6C6A7E;
margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card623 .c623-pers{color:#8B8899}
/* card estreito (5 colunas no desktop): some o "· Personalizado", fica a
categoria inteira em vez das duas cortadas */
@container (max-width:220px){.card623 .c623-pers{display:none}}
.card623 .c623-title{
font:800 15.5px/1.22 var(--font-d,inherit);color:#191842;letter-spacing:-.012em;
margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;min-height:2.44em;
}
.card623 .c623-pills{display:flex;flex-wrap:nowrap;gap:5px;margin:0 0 10px;
min-height:24px;overflow:hidden}
.card623 .c623-pills span{
font:700 11px/1 var(--font-b,inherit);color:#3F3D57;
background:#F3F1EA;border:1px solid #E6E1D6;
padding:6px 10px;border-radius:999px;white-space:nowrap;
max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
/* ── preço ────────────────────────────────────────────────────────── */
.card623 .c623-div{height:1px;background:#EDE9DF;margin:0 0 10px}
.card623 .c623-from{
font:800 9.5px/1 var(--font-m,ui-monospace,monospace);letter-spacing:.14em;
text-transform:uppercase;color:#6C6A7E;margin:0 0 3px;
}
.card623 .c623-price{
font:800 26px/1 var(--font-d,inherit);color:#191842;letter-spacing:-.03em;
margin:0 0 8px;display:flex;align-items:baseline;gap:3px;flex-wrap:wrap;
}
.card623 .c623-price small{font:700 12.5px/1 var(--font-b,inherit);color:#6C6A7E;letter-spacing:0}
.card623 .c623-kit{
display:flex;align-items:center;gap:7px;flex-wrap:wrap;
font:700 12px/1.2 var(--font-b,inherit);color:#3F3D57;margin:0 0 8px;
}
.card623 .c623-off{
font:800 11px/1 var(--font-d,inherit);color:#0F7A3D;background:#E7F6ED;
padding:5px 8px;border-radius:7px;white-space:nowrap;
}
/* ── rodapé ───────────────────────────────────────────────────────── */
.card623 .c623-foot{
margin:auto 0 0;padding-top:9px;border-top:1px solid #EDE9DF;
display:flex;align-items:center;justify-content:space-between;gap:8px;
font:600 11px/1.2 var(--font-b,inherit);color:#6C6A7E;
}
.card623 .c623-prazo{display:inline-flex;align-items:center;gap:5px;min-width:0}
.card623 .c623-prazo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card623 .c623-prazo svg{flex:none;opacity:.75}
.card623 .c623-ver{
font:800 12px/1 var(--font-d,inherit);color:#3B3A96;white-space:nowrap;
display:inline-flex;align-items:center;gap:4px;min-height:30px;
}
/* card esgotado / sem foto continuam legíveis */
.card623 .c623-photo.sem-foto{display:flex;align-items:center;justify-content:center;
color:#8B8899;font:700 11.5px var(--font-b,inherit);letter-spacing:.04em}
/* ── trilho da home: card maior, para caber as mesmas linhas ───────── */
#p-inicio #grid-inicio{grid-template-columns:none;grid-auto-flow:column;
grid-auto-columns:78%}
#p-inicio #grid-inicio .prod.card623{width:100%;max-width:none;min-width:0;height:100%}
#p-inicio .store-rail-grid{scroll-snap-type:x proximity}
#p-inicio .store-rail-grid .prod.card623{scroll-snap-align:start}
/* ── catálogo: um card por linha no celular (o desenho precisa de
350 px para caber inteiro); 2 colunas a partir de 700 px ────────── */
#grid-cat{display:grid;grid-template-columns:1fr;gap:14px}
#grid-cat .prod.card623{height:100%}
#grid-cat .prod.card623 .c623-title{min-height:0}
@media (min-width:700px){
#grid-cat{grid-template-columns:1fr 1fr;gap:16px}
#grid-cat .prod.card623 .c623-title{min-height:2.44em}
}
@media (min-width:1100px){
#grid-cat{grid-template-columns:repeat(3,1fr);gap:18px}
#grid-cat .prod.card623 .c623-price{font-size:28px}
}
@media (min-width:760px){
#p-inicio #grid-inicio{grid-auto-columns:minmax(0,1fr)}
#p-inicio #grid-inicio .prod.card623{width:100%;max-width:none}
}
/*ajustes-624-modulos.css*/
/* ════════════════════════════════════════════════════════════════════
camada 6.24 — OS TRÊS MÓDULOS (adesivos · fotos · polaroid)
────────────────────────────────────────────────────────────────────
O card já tinha tudo; sobrava peso. Aqui ele:
· entra na paleta B (#191842 / #F4F1EA) em vez do azul-marinho antigo;
· perde o emoji do botão e das pílulas (fica texto limpo);
· encurta de ~650 px para ~450 px no celular (texto em 3 linhas,
garantias em lista, link secundário só no computador);
· ganha o selo "a partir de R$ …" na foto, tirado das próprias
pílulas de preço — nenhum valor novo é inventado.
════════════════════════════════════════════════════════════════════ */
#p-inicio .mod624{
--mbg:#191842;
--mcreme:#F4F1EA;
--mtxt:#D7D4E6;
--mmut:#A9A5C2;
--linha:rgba(244,241,234,.16);
}
/* ── o card ───────────────────────────────────────────────────────── */
#p-inicio .mod624 .photo-entry-card{
position:relative;
background:var(--mbg)!important;
border:1px solid #2B2A57!important;
border-radius:18px!important;
box-shadow:0 18px 40px -28px rgba(25,24,66,.65)!important;
margin-bottom:16px!important;
}
#p-inicio .mod624 .photo-entry-body{padding:16px 18px 18px}
/* ── olho da seção: título e, no celular, sem botão repetido ──────── */
@media (max-width:699px){
#p-inicio .mod624 .sec-head .btn{display:none!important}
#p-inicio .mod624 .sec-head{margin-bottom:10px}
}
/* ── texto ────────────────────────────────────────────────────────── */
#p-inicio .mod624 .photo-entry-eyebrow{
font:800 9px/1.3 var(--font-m,ui-monospace,monospace);
letter-spacing:.13em;color:var(--mmut);margin-bottom:6px;
}
#p-inicio .mod624 .photo-entry-card h3{
font-family:Georgia,"Times New Roman",serif;font-weight:400;
font-size:20px;line-height:1.16;letter-spacing:-.015em;
color:var(--mcreme);margin:0 0 7px;
}
#p-inicio .mod624 .photo-entry-card h3 em{color:var(--mcreme);font-style:italic}
#p-inicio .mod624 .photo-entry-card p{
font-size:12.5px;line-height:1.5;color:var(--mtxt);margin:0 0 11px;max-width:none;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* ── pílulas de preço / material ──────────────────────────────────── */
#p-inicio .mod624 .photo-entry-card .photo-tags{gap:4px;margin:0 0 11px}
#p-inicio .mod624 .photo-entry-card .photo-tags span{
font-size:10px;font-weight:700;line-height:1.2;
color:#E9E6F5;background:rgba(244,241,234,.07);
border:1px solid var(--linha);padding:4px 8px;border-radius:7px;
}
#p-inicio .mod624 .photo-entry-card .photo-tags span b{
color:#fff;font-weight:800;font-variant-numeric:tabular-nums;
}
/* ── botão ────────────────────────────────────────────────────────── */
#p-inicio .mod624 .photo-entry-cta{gap:12px;align-items:center}
#p-inicio .mod624 .btn-entry-dark{
flex:1 1 auto;width:100%;height:48px;min-height:48px;max-height:48px;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:#D60C7E;color:#fff!important;border:0;border-radius:12px;
font:800 13.5px/1 var(--font-b,inherit);letter-spacing:-.01em;
padding:0 16px;text-align:center;
transition:transform .15s ease,background .15s ease;
}
#p-inicio .mod624 .btn-entry-dark:hover{background:#C2096F;transform:translateY(-1px)}
#p-inicio .mod624 .photo-entry-link{
font-size:12px;font-weight:700;color:var(--mcreme);
text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}
@media (max-width:699px){
/* o link secundário aponta para a mesma tela do botão: no celular
ele só empurrava o card para baixo */
#p-inicio .mod624 .photo-entry-link{display:none}
}
/* ── garantias: lista curta, um item por linha ────────────────────── */
#p-inicio .mod624 .photo-entry-garantias{
display:grid;grid-template-columns:1fr;gap:4px;
margin-top:11px;padding-top:10px;border-top:1px solid var(--linha);
font-size:10px;line-height:1.35;color:var(--mtxt);
}
#p-inicio .mod624 .photo-entry-garantias b{color:#D60C7E;font-weight:800;margin-right:4px}
@media (min-width:700px){
#p-inicio .mod624 .photo-entry-garantias{
grid-template-columns:repeat(3,auto);justify-content:start;gap:6px 16px;
}
}
/* ── foto: um pouco mais baixa no celular, selo em cima ───────────── */
#p-inicio .mod624 .photo-entry-card .photo-entry-art{height:150px!important}
@media (min-width:700px){
#p-inicio .mod624 .photo-entry-card .photo-entry-art{height:auto!important}
}
#p-inicio .mod624 .photo-entry-card .photo-entry-art::before{
background:linear-gradient(0deg,var(--mbg) 0%,rgba(25,24,66,0) 45%)!important;
}
@media (min-width:700px){
#p-inicio .mod624 .photo-entry-card .photo-entry-art::before{
background:linear-gradient(90deg,var(--mbg) 0%,rgba(25,24,66,0) 26%)!important;
}
}
#p-inicio .mod624 .mod624-selo{
position:absolute;left:10px;bottom:10px;z-index:2;
display:inline-flex;align-items:baseline;gap:4px;
background:var(--mcreme);color:#191842;border-radius:999px;
padding:6px 11px;font:700 10.5px/1 var(--font-b,inherit);
letter-spacing:.01em;white-space:nowrap;
box-shadow:0 3px 10px rgba(25,24,66,.35);
}
#p-inicio .mod624 .mod624-selo b{
font-weight:900;font-size:12px;letter-spacing:-.015em;
font-variant-numeric:tabular-nums;
}
/* ── computador: botão do tamanho do texto, link ao lado ──────────── */
@media (min-width:700px){
#p-inicio .mod624 .photo-entry-body{padding:22px 24px}
#p-inicio .mod624 .btn-entry-dark{
flex:0 0 auto;width:auto;height:46px;min-height:46px;max-height:46px;
padding:0 22px;
}
#p-inicio .mod624 .photo-entry-card p{-webkit-line-clamp:3}
#p-inicio .mod624 .photo-entry-card .photo-tags span{font-size:9.5px;padding:4px 8px}
#p-inicio .mod624 .mod624-selo{left:14px;bottom:14px;padding:7px 12px;font-size:11px}
#p-inicio .mod624 .mod624-selo b{font-size:13px}
}
/* ════════════════════════════════════════════════════════════════════
6.24b — O BANNER DE AGENDAS E CADERNOS
A banda de agendas era a única que ficou fora do padrão: azul-marinho
antigo (#0d2740), botão branco, garantias em duas colunas.
Aqui ela entra na mesma língua dos três módulos.
════════════════════════════════════════════════════════════════════ */
.mod624-band .vt-band{
background:#191842!important;border:1px solid #2B2A57!important;
border-radius:18px!important;box-shadow:0 18px 40px -28px rgba(25,24,66,.65)!important;
overflow:hidden;
}
.mod624-band .vt-band-bd{padding:16px 18px 18px}
.mod624-band .vt-band-ek{
font:800 9px/1.3 var(--font-m,ui-monospace,monospace)!important;
letter-spacing:.13em!important;text-transform:uppercase;color:#A9A5C2!important;
margin:0 0 6px!important;
}
.mod624-band .vt-band h3{
font-family:Georgia,"Times New Roman",serif!important;font-weight:400!important;
font-size:20px!important;line-height:1.16!important;letter-spacing:-.015em!important;
color:#F4F1EA!important;margin:0 0 7px!important;
}
.mod624-band .vt-band h3 em{color:#F4F1EA!important;font-style:italic}
.mod624-band .vt-band p{
font-size:12.5px!important;line-height:1.5!important;color:#D7D4E6!important;
margin:0 0 11px!important;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.mod624-band .vt-band-tags{gap:4px!important;margin:0 0 11px!important}
.mod624-band .vt-band-tags span{
font-size:10px!important;font-weight:700!important;line-height:1.2!important;
color:#E9E6F5!important;background:rgba(244,241,234,.07)!important;
border:1px solid rgba(244,241,234,.16)!important;border-radius:7px!important;
padding:4px 8px!important;
}
.mod624-band .vt-band-cta{gap:12px!important;margin:0!important}
.mod624-band .vt-b1{
flex:1 1 auto;width:100%;height:48px;min-height:48px;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:#D60C7E!important;color:#fff!important;border:0!important;border-radius:12px!important;
font:800 13.5px/1 var(--font-b,inherit)!important;padding:0 16px!important;text-decoration:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mod624-band .vt-b1:hover{background:#C2096F!important}
.mod624-band .vt-b2{
font-size:12px!important;font-weight:700!important;color:#F4F1EA!important;
text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}
#p-inicio .mod624-band .vt-band-gk{
display:grid!important;grid-template-columns:1fr!important;gap:4px!important;
margin-top:11px!important;padding-top:10px!important;
border-top:1px solid rgba(244,241,234,.16)!important;
font-size:10px!important;line-height:1.35!important;color:#D7D4E6!important;
}
.mod624-band .vt-band-gk b{color:#D60C7E!important;margin-right:4px}
.mod624-band .vt-band-art{height:150px!important;min-height:0!important;position:relative}
.mod624-band .vt-band-art::before{
background:linear-gradient(0deg,#191842 0%,rgba(25,24,66,0) 45%)!important;
}
.mod624-band .mod624-selo{
position:absolute;left:10px;bottom:10px;z-index:2;
display:inline-flex;align-items:baseline;gap:4px;
background:#F4F1EA;color:#191842;border-radius:999px;padding:6px 11px;
font:700 10.5px/1 var(--font-b,inherit);box-shadow:0 3px 10px rgba(25,24,66,.35);
}
.mod624-band .mod624-selo b{font-weight:900;font-size:12px}
@media (max-width:699px){
.mod624-band .vt-band-head .btn{display:none!important}
.mod624-band .vt-band-head{margin-bottom:10px!important}
}
@media (min-width:700px){
.mod624-band .vt-band-bd{padding:22px 24px}
.mod624-band .vt-band-art{height:auto!important}
.mod624-band .vt-b1{flex:0 0 auto;width:auto;padding:0 22px}
#p-inicio .mod624-band .vt-band-gk{grid-template-columns:repeat(3,auto)!important;justify-content:start;gap:6px 16px!important}
}
/*ajustes-635-cliente.css*/
/* ════════════════════════════════════════════════════════════════════
ajustes-635-cliente.css — acabamento da área do cliente (20/10/2026)
Só aparência. Nenhuma regra aqui muda cálculo, preço ou gravação.
════════════════════════════════════════════════════════════════════ */
/* ── as quatro abas, cabendo no celular ─────────────────────────── */
.tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
overflow: visible;
}
.tabs button {
width: 100%;
min-width: 0;
padding: 9px 4px;
border-radius: 10px;
font-size: 12.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
justify-content: center;
}
@media (max-width: 420px) {
.tabs button { font-size: 12px; padding: 9px 2px; }
}
/* ── "Como nos conheceu?" em destaque ───────────────────────────── */
.campo-origem {
background: #FFF6FA;
border: 1.5px solid #F3C4D8 !important;
border-radius: 12px;
padding: 12px 12px 8px !important;
margin: 0 0 12px !important;
}
.campo-origem label {
color: #B00A69 !important;
font-weight: 800 !important;
font-size: 11.5px !important;
letter-spacing: .04em;
text-transform: uppercase;
}
.campo-origem select {
border-color: #F3C4D8 !important;
background: #fff;
font-weight: 700;
}
.origem-nota {
margin: 6px 0 0;
font-size: 11.5px;
line-height: 1.35;
color: #8A2A5E;
}
/* ── endereços dentro de Dados ──────────────────────────────────── */
.bloco-end {
margin-top: 18px;
border-top: 1px dashed var(--line, #e2dccd);
padding-top: 14px;
}
.bloco-end-h {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 8px;
}
.bloco-end-h b { font-size: 15px; }
.bloco-end-h span { font-size: 12px; color: var(--muted, #6c6a7e); }
/* ── envios: dois botões por cartão ─────────────────────────────── */
.env-acoes {
display: flex;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap;
}
.env-acoes .btn { flex: 1; min-width: 120px; justify-content: center; }
.env-det {
background: var(--paper, #f4f1ea);
border: 1px solid var(--line, #e2dccd);
border-radius: 10px;
padding: 10px 12px;
margin-top: 8px;
}
.env-det b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-2, #3b3a96); }
.env-det p { margin: 4px 0 0; font-size: 13px; }
/* ── carrinho parado no Resumo ──────────────────────────────────── */
.card-carrinho {
display: flex;
align-items: center;
gap: 12px;
justify-content: space-between;
background: #FFF6FA;
border: 1.5px solid #F3C4D8;
border-radius: 14px;
padding: 12px 14px;
margin-bottom: 14px;
}
.card-carrinho div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-carrinho b { font-size: 13.5px; }
.card-carrinho span { font-size: 12px; color: #8A2A5E; }
.card-carrinho .btn { flex: none; }
/* ── prazo e etapa do pedido (quando o ERP mandar) ──────────────── */
.prazo-ped {
margin-top: 8px;
font-size: 12.5px;
background: var(--paper, #f4f1ea);
border-left: 3px solid var(--brand-2, #3b3a96);
border-radius: 8px;
padding: 7px 10px;
}
.prazo-ped b { color: var(--brand-2, #3b3a96); }
/* validade do orçamento dentro da linha de prazo */
.prazo-ped .vence { color: #B45309; font-weight: 700; }
.prazo-ped .venceu { color: #B00A69; font-weight: 700; }
/* ── cabimento em 390 px ─────────────────────────────────────────── */
@media (max-width: 520px) {
/* rastreio: botão embaixo do campo, largura inteira */
#at-rast input.at-inp { flex: 1 1 100% !important; min-width: 0 !important; }
#at-rast .btn { width: 100%; justify-content: center; }
/* o botão flutuante do WhatsApp cobria o botão Rastrear */
.wa-fab { bottom: 96px !important; width: 46px !important; height: 46px !important; }
}
/* ── pedidos de balcão ───────────────────────────────────────────── */
.balcao {
margin-top: 22px;
border-top: 1px dashed var(--line, #e2dccd);
padding-top: 16px;
}
.balcao-h { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.balcao-h b { font-size: 15px; }
.balcao-h span { font-size: 12px; color: var(--muted, #6c6a7e); line-height: 1.4; }
.balcao-card {
background: #fff;
border: 1px solid var(--line, #e2dccd);
border-radius: 12px;
padding: 11px 13px;
margin-top: 8px;
}
.balcao-top { display: flex; align-items: center; gap: 8px; }
.balcao-top b { font-size: 14px; }
.balcao-st {
margin-left: auto;
font: 800 9.5px/1 ui-monospace, monospace;
letter-spacing: .05em;
text-transform: uppercase;
padding: 4px 7px;
border-radius: 99px;
background: #EAF6EE;
color: #0F7A3D;
}
.balcao-st.off { background: #F3F1F7; color: #6C6A7E; }
.balcao-meta { font-size: 12px; color: var(--muted, #6c6a7e); margin-top: 3px; }
.balcao-linha {
font-size: 12px;
margin-top: 6px;
background: var(--paper, #f4f1ea);
border-radius: 8px;
padding: 6px 9px;
color: #3F3D55;
}
.balcao-wa {
display: inline-block;
margin-top: 9px;
font-size: 12.5px;
font-weight: 800;
color: var(--brand-2, #3b3a96);
text-decoration: none;
}
/* ── leva 3: fotos do envio, artes e avaliação ───────────────────── */
/* miniaturas no cartão do envio */
.env-fotos {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 10px;
}
.env-foto {
width: 52px;
height: 52px;
border-radius: 6px;
overflow: hidden;
background: #EFEADD;
border: 1px solid #E4DECE;
}
.env-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.env-foto.vazia { background: repeating-linear-gradient(45deg, #F4F1EA, #F4F1EA 5px, #EAE5D6 5px, #EAE5D6 10px); }
.env-foto.mais {
display: flex;
align-items: center;
justify-content: center;
font: 800 11px/1 ui-sans-serif, system-ui, sans-serif;
color: #6C6A7E;
background: #F4F1EA;
border-style: dashed;
}
/* grade dentro da janela "Ver envio" */
.env-grade-modal {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 12px;
}
.env-grade-modal .env-foto { width: 62px; height: 62px; }
.env-det-linha {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 13px;
padding: 3px 0;
border-bottom: 1px dashed #EFEADD;
}
.env-det-linha:last-child { border-bottom: 0; }
.env-det-linha b { font-variant-numeric: tabular-nums; }
/* aba de artes */
.artes-l3 { display: flex; flex-direction: column; gap: 8px; }
.artes-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; }
.artes-h b { font-size: 15px; }
.artes-h span { font-size: 12px; color: var(--muted, #6c6a7e); }
.arte-l3 {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--line, #e2dccd);
border-radius: 12px;
padding: 10px 12px;
}
.arte-ico {
width: 34px; height: 40px; flex: none;
border-radius: 6px;
background: #EEF1FD;
border: 1px solid #CFD4F5;
display: flex; align-items: center; justify-content: center;
font-size: 15px;
}
.arte-inf { min-width: 0; }
.arte-inf b {
display: block;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.arte-inf small { font-size: 11.5px; color: var(--muted, #6c6a7e); }
.arte-v {
margin-left: auto; flex: none;
font: 800 10px/1 ui-monospace, monospace;
color: var(--brand-2, #3b3a96);
background: #EEF1FD;
padding: 4px 7px;
border-radius: 99px;
}
.arte-v.ant { color: #6C6A7E; background: #F4F1EA; }
/* avaliação no cartão do pedido */
.aval-l3 {
margin-top: 12px;
background: #FFF9FC;
border: 1.5px solid #F3C4D8;
border-radius: 12px;
padding: 11px 12px;
}
.aval-l3.enviando { opacity: .6; pointer-events: none; }
.aval-top { display: flex; align-items: baseline; gap: 8px; }
.aval-top b { font-size: 14px; }
.aval-nota { margin-left: auto; font-size: 11.5px; font-weight: 800; color: #B00A69; }
.aval-estrelas { display: flex; gap: 6px; margin-top: 8px; }
.aval-estrelas button {
width: 40px; height: 40px;
border-radius: 9px;
border: 1px solid #D8D0BF;
background: #fff;
color: #B5AC99;
font-size: 19px;
line-height: 1;
cursor: pointer;
}
.aval-estrelas button.on { background: #FFF3CD; border-color: #E8B400; color: #E8B400; }
.aval-dica { margin: 7px 0 0; font-size: 11.5px; color: #8A2A5E; }
.aval-google { margin-top: 9px; width: 100%; justify-content: center; }
/* as abas visíveis dividem a largura — a de Artes só entra se houver arte */
.tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; }
@media (max-width: 420px) {
.tabs button { font-size: 11.5px; padding: 9px 1px; }
}
/*ajustes-635-montador.css*/
/* ════════════════════════════════════════════════════════════════════
ajustes-635-montador.css — acabamento do montador (20/10/2026)
Só aparência. Nenhuma regra muda preço, cálculo ou gravação.
A barra de resumo fixa foi descartada: o chip de ajustes-615.js já
mostra o preço e o resumo. Ficaram só as duas correções que faltavam.
════════════════════════════════════════════════════════════════════ */
/* ── a. cabeçalho sai da frente ao rolar ─────────────────────────── */
@media (max-width: 700px) {
.store-topo {
transition: transform .22s ease, box-shadow .22s ease;
will-change: transform;
}
.store-topo.topo-escondido {
transform: translateY(-100%);
box-shadow: none;
}
}
@media (prefers-reduced-motion: reduce) {
.store-topo { transition: none; }
}
/* ── marcas de leitura no configurador ───────────────────────────── */
@media (max-width: 700px) {
/* o passo atual fica fácil de achar ao rolar */
#p-montador .ades-sec-head h2 { scroll-margin-top: 12px; }
}
/* ════════════════════════════════════════════════════════════════════
ATENDIMENTO — padronização (20/10/2026)
Medi antes de mexer. O atendimento estava fora da régua do resto do
portal em quatro pontos:
raio do cartão atendimento 16px · canais 14px · resto 16px
raio do botão atendimento 12px · resto 13px
fundo do campo atendimento #F8FAFC (cinza azulado)
resto transparente com borda
ordem na página rastreio e dúvidas primeiro; falar com a
gráfica e abrir solicitação depois
O último é o que mais pesa: quem abre "Atendimento" quer falar com
alguém. Aqui os canais sobem para cima do FAQ, e o que é caminho
principal fica em primeiro.
Só aparência e ordem. Nenhum id muda, nenhum handler muda.
════════════════════════════════════════════════════════════════════ */
/* 1 · mesma régua de raio e de borda do resto do portal */
#p-atendimento .card,
#p-atendimento .at-card,
#p-atendimento .at-canal {
border-radius: 16px;
}
#p-atendimento .btn { border-radius: 13px; }
/* 2 · campo igual ao do cadastro: fundo branco, borda, sem cinza azulado */
#p-atendimento .at-inp {
background: #fff;
border: 1px solid var(--line, #e2dccd);
border-radius: 12px;
min-height: 44px;
}
#p-atendimento .at-inp:focus {
outline: 2px solid var(--brand-2, #3b3a96);
outline-offset: 1px;
border-color: var(--brand-2, #3b3a96);
}
#p-atendimento textarea.at-inp { min-height: 84px; padding-top: 10px; }
/* 3 · um só ritmo de espaço entre os blocos */
#p-atendimento .at-card { margin-top: 14px; }
#p-atendimento .at-card:first-child { margin-top: 0; }
#p-atendimento .at-canal + .at-canal { margin-top: 8px; }
/* 4 · os canais viram uma faixa contínua, não três cartões soltos */
#p-atendimento .at-canal {
border-radius: 14px;
padding: 12px 14px;
}
#p-atendimento .at-canal b { font-size: 14px; }
#p-atendimento .at-canal small { font-size: 12px; color: var(--muted, #6c6a7e); }
/* 5 · o caminho principal na frente: canais antes do FAQ */
@media (max-width: 900px) {
#p-atendimento .at-grid2 { display: flex; flex-direction: column; }
#p-atendimento .at-grid2 > div:first-child { order: 3; }
#p-atendimento .at-grid2 > div:last-child { order: 1; }
}
/*ajustes-624-produto.css*/
/* 6.24 — quantidade livre na página do produto.
Só o campo: o resto do desenho do produto não muda. */
.qsel.qsel-livre {
display: inline-flex;
align-items: center;
border: 1px solid #cfdae6;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.qsel.qsel-livre button {
width: 38px;
height: 38px;
border: 0;
background: #f7fafd;
color: #14395c;
font-size: 18px;
font-weight: 700;
cursor: pointer;
line-height: 1;
}
.qsel.qsel-livre button:hover { background: #eaf2f9; }
.qsel.qsel-livre button:active { background: #dde9f3; }
.qsel.qsel-livre input {
width: 66px;
height: 38px;
border: 0;
border-left: 1px solid #e3e9f0;
border-right: 1px solid #e3e9f0;
text-align: center;
font-size: 15px;
font-weight: 700;
color: #10233f;
background: #fff;
-moz-appearance: textfield;
appearance: textfield;
}
.qsel.qsel-livre input::-webkit-outer-spin-button,
.qsel.qsel-livre input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.qsel.qsel-livre input:focus {
outline: 2px solid var(--brand);
outline-offset: -2px;
}
@media (max-width: 480px) {
.qsel.qsel-livre button { width: 42px; height: 42px; }
.qsel.qsel-livre input { width: 62px; height: 42px; }
}
/* 6.24.3 — erro do login escrito no cartão (não só num aviso que some) */
.erro-624 {
margin: 10px 0 0 !important;
padding: 9px 11px !important;
border-radius: 9px !important;
background: #fef2f2 !important;
border: 1px solid #fecaca !important;
color: #b91c1c !important;
font-size: 12.8px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
}
/*ajustes-624-vitrine.css*/
/* ─────────────────────────────────────────────────────────────────
6.24 — "MAIS PROCURADOS" EM COLUNAS (rabisco 6.38 aprovado)
Antes: uma fileira só, com arrasto. No computador o card ficava
com 131 px e o nome quebrava em 2 linhas.
Agora: 4 colunas no computador, 3 no tablet deitado, 2 no tablet
em pé e 1 no celular — com os 4 primeiros à vista e o botão
"Ver os 8 produtos".
Só posicionamento: o card é o mesmo (6.23), a foto é a mesma,
o preço é o mesmo.
───────────────────────────────────────────────────────────────── */
/* computador: 4 colunas, sem arrasto */
@media (min-width: 1024px) {
#p-inicio #grid-inicio {
grid-auto-flow: row;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-columns: auto;
grid-template-rows: auto;
overflow: visible;
gap: 16px;
padding-bottom: 2px;
scroll-snap-type: none;
}
#p-inicio #grid-inicio .prod.home-prod { max-width: none; min-width: 0; height: 100%; }
/* sem arrasto, a setinha não serve para nada */
#p-inicio .rail-seta { display: none !important; }
}
/* tablet deitado */
@media (min-width: 820px) and (max-width: 1023.98px) {
#p-inicio #grid-inicio {
grid-auto-flow: row;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-columns: auto;
grid-template-rows: auto;
overflow: visible;
gap: 14px;
padding-bottom: 2px;
scroll-snap-type: none;
}
#p-inicio #grid-inicio .prod.home-prod { max-width: none; min-width: 0; height: 100%; }
#p-inicio .rail-seta { display: none !important; }
}
/* tablet em pé */
@media (min-width: 700px) and (max-width: 819.98px) {
#p-inicio #grid-inicio {
grid-auto-flow: row;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-columns: auto;
grid-template-rows: auto;
overflow: visible;
gap: 14px;
padding-bottom: 2px;
scroll-snap-type: none;
}
#p-inicio #grid-inicio .prod.home-prod { max-width: none; min-width: 0; height: 100%; }
#p-inicio .rail-seta { display: none !important; }
}
/* celular: 1 coluna, só os 4 primeiros até apertar o botão */
@media (max-width: 699.98px) {
#p-inicio #grid-inicio {
grid-auto-flow: row;
grid-template-columns: 1fr;
grid-auto-columns: auto;
grid-template-rows: auto;
overflow: visible;
gap: 14px;
padding-bottom: 2px;
scroll-snap-type: none;
}
#p-inicio #grid-inicio .prod.home-prod { max-width: none; min-width: 0; height: 100%; }
#p-inicio .rail-seta { display: none !important; }
#p-inicio #grid-inicio > .prod:nth-child(n + 5) { display: none; }
#p-inicio #grid-inicio.ver-mais > .prod:nth-child(n + 5) { display: block; }
}
/* o botão "Ver os 8 produtos" */
.mais-vitrine {
display: none;
width: 100%;
margin-top: 14px;
padding: 13px 16px;
border: 1.5px solid #cfdae6;
border-radius: 12px;
background: #fff;
color: #14395c;
font: 700 13.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.mais-vitrine:hover { border-color: var(--brand); color: var(--brand); background: #f7fbfe; }
.mais-vitrine:active { transform: scale(.995); }
@media (max-width: 699.98px) {
.mais-vitrine { display: block; }
}
/*ajustes-624-toque.css*/
/* ─────────────────────────────────────────────────────────────────
6.24 — ALVO DE TOQUE (achado da varredura de 20/10)
11 controles tinham menos de 36 px no celular — o tamanho mínimo
confortável para o dedo. A regra aqui só aumenta a ÁREA de toque:
o pontinho, o botão e o texto continuam do mesmo tamanho.
Nada muda no computador.
───────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
/* "pular para o conteúdo" — só aparece no teclado */
.skip-link { min-height: 36px; display: inline-flex; align-items: center; padding: 8px 14px; }
/* pontinhos do carrossel: o desenho tem 7 px, o dedo precisa de 32 */
.promo-dot {
box-sizing: content-box !important;
padding: 12px !important;
background-clip: content-box !important;
}
.promo-dot.on { background-clip: content-box !important; }
/* botões da barra de cookies ("Aceitar", "Só essenciais") */
.cookie-bar .btn { min-height: 38px; padding: 8px 14px; }
/* "Ampliar" na foto do produto */
.pd-fig-zoom { min-height: 36px; padding: 8px 12px; }
/* pílulas do montador de adesivos */
.ab-pill { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.ab-back, .ab-link { display: inline-flex; align-items: center; min-height: 32px; padding: 8px 0; }
/* links do rodapé (WhatsApp, telefone, e-mail) */
#ft-wa, #ft-tel, #ft-mail { min-height: 36px; display: inline-flex; align-items: center; }
/* menu do topo, quando aparece */
nav.main a, .mi-t { min-height: 36px; display: inline-flex; align-items: center; }
/* setas do "Ver mais" em listas */
.btn-sm { min-height: 36px; }
/* qualquer botão do portal: o dedo precisa de 36 */
.btn { min-height: 38px; }
/* pontinhos das avaliações */
.vt-dot {
box-sizing: content-box !important;
padding: 10px !important;
background-clip: content-box !important;
}
/* links do rodapé (páginas, colunas, base) */
.ft-paginas a, .ft-col a, .f-base a { min-height: 36px; display: inline-flex; align-items: center; }
}
/* alvo de toque também nos links soltos do rodapé em telas grandes */
@media (pointer: coarse) {
#ft-wa, #ft-tel, #ft-mail { min-height: 36px; display: inline-flex; align-items: center; }
}
/*ajustes-624-hover.css*/
/* ─────────────────────────────────────────────────────────────────
6.24 — A "LEVE PISCADA" NO CARD (pedido do dono, 20/10)
O card já sobe 2 px e ganha sombra. O que faltava era a piscada —
mas uma piscada de gente, não de lâmpada: um pulso único de luz,
de menos de meio segundo, e volta ao normal. Sem repetição.
Só no mouse (quem usa toque não tem hover). Quem pediu menos
animação no sistema recebe só o subir do card.
───────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
.prod.card623 {
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.prod.card623:hover {
animation: piscada624 .46s ease-out 1;
}
}
@keyframes piscada624 {
0% { filter: brightness(1) saturate(1); }
32% { filter: brightness(1.055) saturate(1.03); }
100% { filter: brightness(1) saturate(1); }
}
@media (prefers-reduced-motion: reduce) {
.prod.card623:hover { animation: none; }
}
/*ajustes-624-login.css*/
/* ─────────────────────────────────────────────────────────────────
6.24.4 — TELA DE ENTRAR (rabisco aprovado em 20/10)
Só esta tela. Paleta, fontes e o card 6.23 continuam como estão.
───────────────────────────────────────────────────────────────── */
/* o campo comprido antigo continua no DOM (o app.js lê o valor dele),
mas quem aparece são os seis quadradinhos */
#en-cod.en-cod-oculto {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
border: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
}
.otp624 {
display: flex;
gap: 8px;
margin: 2px 0 2px;
}
.otp624-c {
flex: 1 1 0;
min-width: 0;
width: 100%;
height: 52px;
padding: 0;
text-align: center;
font-family: var(--font-d, Sora, Arial, sans-serif);
font-size: 21px;
font-weight: 700;
letter-spacing: 0;
color: var(--ink, #082040);
background: #fff;
border: 1.5px solid #cfdae6;
border-radius: 10px;
outline: none;
transition: border-color .12s, box-shadow .12s;
-moz-appearance: textfield;
}
.otp624-c::-webkit-outer-spin-button,
.otp624-c::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otp624-c:focus {
border-color: var(--indigo, #3B3A96);
box-shadow: 0 0 0 3px rgba(59, 58, 150, .13);
}
.otp624-c:not(:placeholder-shown),
.otp624-c.has-val {
border-color: #b9c6d6;
}
/* "Enviamos para (21) 9 … · trocar número" */
.num624 {
margin: 0 0 10px !important;
font-size: 12.6px !important;
line-height: 1.45 !important;
color: var(--muted, #5b6b7e) !important;
}
.num624 b { color: var(--ink, #082040); }
.num624 a {
color: var(--indigo, #3B3A96);
font-weight: 700;
text-decoration: none;
}
.num624 a:hover { text-decoration: underline; }
/* prova social na coluna da esquerda */
.prova624 {
margin: 18px 0 0 !important;
font-size: 12.5px !important;
color: var(--muted, #5b6b7e) !important;
display: flex;
align-items: center;
gap: 8px;
}
.prova624 span { color: #F5C518; letter-spacing: 1.5px; font-size: 13px; }
.prova624 b { color: var(--ink, #082040); }
/* aviso de segurança no rodapé do card */
.seg624 {
margin: 14px 0 0 !important;
padding: 10px 12px !important;
border-radius: 10px !important;
background: #f4f7fa !important;
border: 1px solid var(--line, #e4e9f0) !important;
font-size: 11.6px !important;
line-height: 1.45 !important;
color: var(--muted, #5b6b7e) !important;
display: flex !important;
gap: 8px !important;
align-items: flex-start !important;
}
.seg624 b { color: var(--ink, #082040); }
/* faixa "Como funciona" — ocupa o vazio de baixo */
.como624 {
background: #fff;
border-top: 1px solid var(--line, #e4e9f0);
margin-top: 26px;
}
.como624-in {
max-width: 1180px;
margin: 0 auto;
padding: 22px 24px 26px;
}
.como624 h3 {
margin: 0 0 3px;
font-family: var(--font-d, Sora, Arial, sans-serif);
font-size: 17px;
color: var(--ink, #082040);
}
.como624 > .como624-in > p {
margin: 0 0 15px;
font-size: 12.6px;
color: var(--muted, #5b6b7e);
}
.passos624 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.passo624 {
background: #f7fafd;
border: 1px solid var(--line, #e4e9f0);
border-radius: 12px;
padding: 13px 14px;
}
.passo624 .n {
display: grid;
place-items: center;
width: 25px;
height: 25px;
border-radius: 50%;
background: #F5C518;
color: #2b2300;
font-size: 11.5px;
font-weight: 800;
margin-bottom: 8px;
}
.passo624 b {
display: block;
font-size: 13px;
color: var(--ink, #082040);
}
.passo624 i {
display: block;
font-style: normal;
font-size: 11.6px;
color: var(--muted, #5b6b7e);
margin-top: 3px;
line-height: 1.4;
}
/* celular: cartão primeiro, texto depois */
@media (max-width: 900px) {
#p-entrar .wrap.corpo { display: flex; flex-direction: column; }
#p-entrar .cad-side { order: 2; margin-top: 18px; }
#entrar-card.card { order: 1; }
.otp624 { gap: 6px; }
.otp624-c { height: 46px; font-size: 18px; }
.passos624 { grid-template-columns: 1fr; }
.como624-in { padding: 18px 16px 22px; }
}
@media (max-width: 380px) {
.otp624 { gap: 5px; }
.otp624-c { height: 42px; font-size: 16px; }
}
/*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-6288-executivo.css*/
/* ════════════════════════════════════════════════════════════════════════════
ajustes-6288-executivo.css — Padrão Executivo Corporativo VTDigital (v6.28.8)
Escopo estrito: #p-conta, #p-pedido, #p-entrar, #p-cadastro, #p-atendimento,
#p-montador, #p-gabaritos, #p-paginas e modais internos.
NÃO altera Home (#p-inicio .vb2-grid), Catálogo (.prod.card623) nem Landings.
════════════════════════════════════════════════════════════════════════════ */
:root {
--exec-navy: #082040;
--exec-navy-2: #0D2D56;
--exec-indigo: #3B3A96;
--exec-cream: #FAF6F1;
--exec-surface: #FFFFFF;
--exec-ink: #0F172A;
--exec-slate: #475569;
--exec-muted: #64748B;
--exec-line: #E2E8F0;
--exec-line-strong: #CBD5E1;
--exec-ok-bg: #ECFDF5;
--exec-ok-ink: #065F46;
--exec-warn-bg: #FFFBEB;
--exec-warn-ink: #92400E;
--exec-ind-bg: #EEF2FF;
--exec-ind-ink: #3730A3;
--exec-shadow: 0 1px 3px rgba(8, 32, 64, 0.06), 0 6px 18px rgba(8, 32, 64, 0.04);
}
/* ── Utilitário global de botões em tabelas/listas (Correção image-1.png) ── */
.exec-row-actions,
#p-conta .env-acoes,
#p-conta .e-acoes {
display: inline-flex !important;
flex-wrap: wrap;
align-items: center;
gap: 8px !important;
}
#p-conta .env-acoes .btn {
flex: 0 0 auto !important;
min-width: 0 !important;
}
/* ════════════════════════════════════════════════════════════════════════════
1. LOGIN & CADASTRO EXECUTIVO (#p-entrar e #p-cadastro — Correção image-2.png)
════════════════════════════════════════════════════════════════════════════ */
#p-entrar .exec-auth-grid,
#p-cadastro .exec-auth-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
gap: 24px !important;
align-items: start !important;
}
#p-entrar .exec-auth-pitch,
#p-cadastro .exec-auth-pitch {
background: linear-gradient(165deg, var(--exec-navy) 0%, var(--exec-navy-2) 100%) !important;
color: #FFFFFF !important;
border-radius: 16px !important;
padding: 32px 28px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 18px !important;
position: sticky;
top: 90px;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 14px 34px rgba(8, 32, 64, 0.14) !important;
min-width: 0;
}
#p-entrar .exec-auth-pitch .au-tag,
#p-cadastro .exec-auth-pitch .au-tag {
display: inline-flex !important;
align-self: flex-start;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
color: #E2E8F0 !important;
font: 700 11px/1 'Inter', sans-serif !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 6px 11px !important;
border-radius: 6px !important;
margin-bottom: 16px !important;
}
#p-entrar .exec-auth-pitch .au-big,
#p-cadastro .exec-auth-pitch .au-big {
font: 700 26px/1.22 'Sora', sans-serif !important;
color: #FFFFFF !important;
letter-spacing: -0.02em !important;
margin: 0 0 10px !important;
}
#p-entrar .exec-auth-pitch .intro,
#p-cadastro .exec-auth-pitch .intro {
color: #CBD5E1 !important;
font-size: 13.8px !important;
line-height: 1.55 !important;
margin: 0 0 22px !important;
}
.exec-pitch-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
gap: 14px !important;
}
.exec-pitch-list li {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 11px !important;
padding: 12px 14px !important;
}
.exec-pitch-list .hc-ic {
width: 34px !important;
height: 34px !important;
border-radius: 8px !important;
background: rgba(255, 255, 255, 0.12) !important;
color: #FFFFFF !important;
display: grid !important;
place-items: center !important;
flex-shrink: 0 !important;
font-size: 14px !important;
}
.exec-pitch-list li b {
display: block !important;
color: #FFFFFF !important;
font: 600 13.5px/1.3 'Sora', sans-serif !important;
margin-bottom: 2px !important;
}
.exec-pitch-list li small {
display: block !important;
color: #CBD5E1 !important;
font-size: 12.2px !important;
line-height: 1.45 !important;
}
.exec-pitch-foot {
margin-top: 20px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 12px;
color: #94A3B8;
}
/* Evita duplicar selo de estrelas antigo embaixo do card escuro */
#p-entrar .exec-auth-pitch .prova624 {
display: none !important;
}
#p-entrar .exec-auth-card,
#p-cadastro .exec-auth-card {
background: #FFFFFF !important;
border: 1px solid var(--exec-line) !important;
border-radius: 16px !important;
padding: 28px !important;
box-shadow: var(--exec-shadow) !important;
min-width: 0;
}
#p-entrar .exec-auth-card h2,
#p-cadastro .exec-auth-card h2 {
font: 700 20px/1.25 'Sora', sans-serif !important;
color: var(--exec-navy) !important;
margin: 0 0 6px !important;
}
/* Faixa "Como funciona" em padrão sóbrio corporativo (sem bolinha amarela) */
#p-entrar .passo624 {
background: #FFFFFF !important;
border: 1px solid var(--exec-line) !important;
}
#p-entrar .passo624 .n {
background: var(--exec-navy) !important;
color: #FFFFFF !important;
border-radius: 7px !important;
}
/* Abas PF / PJ sérias sem emojis infantis */
#p-cadastro .pf-tabs {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
background: #F1F5F9 !important;
padding: 4px !important;
border-radius: 10px !important;
border: 1px solid var(--exec-line) !important;
margin-bottom: 18px !important;
}
#p-cadastro .pf-tab {
border: 0 !important;
border-radius: 7px !important;
padding: 9px 12px !important;
font: 600 13px/1.2 'Inter', sans-serif !important;
background: transparent !important;
color: var(--exec-slate) !important;
cursor: pointer;
}
#p-cadastro .pf-tab.on {
background: #FFFFFF !important;
color: var(--exec-navy) !important;
box-shadow: 0 1px 3px rgba(8, 32, 64, 0.1) !important;
}
@media (max-width: 920px) {
#p-entrar .exec-auth-grid,
#p-cadastro .exec-auth-grid {
grid-template-columns: 1fr !important;
}
#p-entrar .exec-auth-card,
#p-cadastro .exec-auth-card {
order: 1 !important;
padding: 20px !important;
}
#p-entrar .exec-auth-pitch,
#p-cadastro .exec-auth-pitch {
order: 2 !important;
position: static !important;
padding: 22px 20px !important;
margin-top: 0 !important;
}
}
/* ════════════════════════════════════════════════════════════════════════════
2. ADMINISTRADOR / DASHBOARD DO CLIENTE (#p-conta)
════════════════════════════════════════════════════════════════════════════ */
#p-conta .exec-adm-shell {
display: grid;
grid-template-columns: 252px minmax(0, 1fr);
gap: 24px;
align-items: start;
}
#p-conta .exec-adm-side {
background: #FFFFFF;
border: 1px solid var(--exec-line);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--exec-shadow);
position: sticky;
top: 84px;
min-width: 0;
}
.exec-adm-user {
background: var(--exec-navy);
color: #FFFFFF;
padding: 18px 18px 16px;
}
.exec-adm-user-row {
display: flex;
align-items: center;
gap: 11px;
}
.exec-adm-avatar {
width: 38px;
height: 38px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #FFFFFF;
font: 700 13px/1 'Sora', sans-serif;
display: grid;
place-items: center;
flex-shrink: 0;
}
.exec-adm-user b {
display: block;
font: 700 14px/1.25 'Sora', sans-serif;
color: #FFFFFF;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.exec-adm-user small {
display: block;
font-size: 11.5px;
color: #CBD5E1;
margin-top: 2px;
}
.exec-adm-nav {
padding: 8px;
display: grid;
gap: 3px;
}
.exec-adm-btn {
width: 100%;
border: 0;
background: transparent;
padding: 10px 12px;
border-radius: 9px;
display: flex;
align-items: center;
gap: 10px;
font: 600 13px/1.2 'Inter', sans-serif;
color: var(--exec-slate);
cursor: pointer;
text-align: left;
transition: background 0.14s, color 0.14s;
}
.exec-adm-btn:hover {
background: #F8FAFC;
color: var(--exec-navy);
}
.exec-adm-btn.on {
background: var(--exec-ind-bg);
color: var(--exec-indigo);
}
.exec-adm-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.exec-adm-btn .exec-cnt {
margin-left: auto;
padding: 2px 7px;
border-radius: 99px;
font: 700 11px/1.2 'Inter', sans-serif;
background: #F1F5F9;
color: var(--exec-navy);
}
.exec-adm-btn.on .exec-cnt {
background: var(--exec-indigo);
color: #FFFFFF;
}
.exec-adm-btn.exec-sair {
margin-top: 4px;
border-top: 1px solid var(--exec-line);
border-radius: 0 0 8px 8px;
padding-top: 12px;
color: #64748B;
}
#p-conta .exec-adm-main {
min-width: 0;
}
/* No PC usamos a sidebar executiva; as abas originais continuam no DOM p/ compatibilidade */
@media (min-width: 960px) {
#p-conta .exec-adm-shell .sec-h,
#p-conta .exec-adm-shell .tabs {
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: -1px !important;
}
}
@media (max-width: 959px) {
#p-conta .exec-adm-shell {
grid-template-columns: 1fr;
gap: 14px;
}
#p-conta .exec-adm-side {
position: static;
}
.exec-adm-nav {
display: flex;
overflow-x: auto;
gap: 6px;
padding: 8px 10px;
scrollbar-width: none;
}
.exec-adm-nav::-webkit-scrollbar { display: none; }
.exec-adm-btn {
width: auto;
white-space: nowrap;
flex-shrink: 0;
padding: 8px 12px;
}
.exec-adm-btn.exec-sair {
margin-top: 0;
border-top: 0;
padding-top: 8px;
}
#p-conta .exec-adm-shell .sec-h,
#p-conta .exec-adm-shell .tabs {
display: none !important;
}
}
.exec-pane-hdr {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.exec-pane-hdr h2 {
font: 700 20px/1.25 'Sora', sans-serif;
color: var(--exec-navy);
margin: 0;
}
.exec-pane-hdr p {
font-size: 13px;
color: var(--exec-muted);
margin: 3px 0 0;
}
/* KPIs Executivos da Aba Resumo */
#p-conta .dash-num {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 12px !important;
margin-bottom: 16px !important;
}
#p-conta .dash-num .dn {
grid-column: span 1 !important;
background: #FFFFFF !important;
border: 1px solid var(--exec-line) !important;
border-left: 3px solid var(--exec-navy) !important;
border-radius: 12px !important;
padding: 16px !important;
box-shadow: var(--exec-shadow) !important;
min-width: 0;
}
#p-conta .dash-num .dn.dn-alerta {
border-left-color: #D97706 !important;
background: #FFFDF7 !important;
}
#p-conta .dash-num .dn b {
display: block;
font: 700 22px/1.15 'Sora', sans-serif !important;
color: var(--exec-navy) !important;
font-variant-numeric: tabular-nums;
margin-bottom: 4px !important;
}
#p-conta .dash-num .dn-rot {
display: block;
font: 600 12px/1.3 'Inter', sans-serif !important;
color: var(--exec-ink) !important;
}
#p-conta .dash-num .dn-sub {
display: block;
font-size: 11.5px !important;
color: var(--exec-muted) !important;
margin-top: 2px !important;
}
@media (max-width: 720px) {
#p-conta .dash-num {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 400px) {
#p-conta .dash-num .dn b { font-size: 18px !important; }
#p-conta .dash-num .dn { padding: 13px 12px !important; }
}
/* Banner de recuperação de carrinho sóbrio (sem rosa berrante) */
#p-conta .card-carrinho {
background: #FFFFFF !important;
border: 1px solid var(--exec-line-strong) !important;
border-left: 4px solid var(--exec-indigo) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
box-shadow: var(--exec-shadow) !important;
}
#p-conta .card-carrinho b { color: var(--exec-navy) !important; }
#p-conta .card-carrinho span { color: var(--exec-slate) !important; }
/* Cartões de Pedido + Stepper Horizontal de 5 etapas */
#p-conta .order {
background: #FFFFFF !important;
border: 1px solid var(--exec-line) !important;
border-radius: 14px !important;
padding: 20px !important;
box-shadow: var(--exec-shadow) !important;
margin-bottom: 14px !important;
}
#p-conta .order .top b {
font: 700 15px/1.2 'Sora', monospace !important;
color: var(--exec-navy) !important;
font-variant-numeric: tabular-nums;
}
@media (min-width: 681px) {
#p-conta .order .tlv {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 8px !important;
margin: 16px 0 6px !important;
padding: 12px 14px !important;
background: #F8FAFC !important;
border: 1px solid var(--exec-line) !important;
border-radius: 10px !important;
}
#p-conta .order .tlv .p {
display: flex !important;
align-items: center !important;
gap: 7px !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--exec-muted) !important;
padding: 0 !important;
border: 0 !important;
}
#p-conta .order .tlv .p::before { display: none !important; }
#p-conta .order .tlv .p .dot {
position: static !important;
inset: auto !important;
margin: 0 !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #CBD5E1 !important;
flex-shrink: 0 !important;
}
#p-conta .order .tlv .p.done {
color: var(--exec-navy) !important;
}
#p-conta .order .tlv .p.done .dot {
background: var(--exec-ok-ink) !important;
box-shadow: 0 0 0 3px #D1FAE5 !important;
}
}
/* Carrinho e conta aprovados: integrado neste CSS canônico, sem camada nova. */
#p-pedido .exec-aceite-resumo { background:#ffffff0d; display:flex; gap:10px; align-items:flex-start; border:1px solid #ffffff26; border-radius:10px; padding:12px; margin-bottom:14px; color:#e2e8f0; font-size:12px; line-height:1.55; cursor:pointer; }
#p-pedido .exec-aceite-resumo a { color:white !important; text-decoration:underline; }
#p-pedido .exec-cta-stack .btn-b { background:#fff !important; color:var(--exec-navy) !important; border-color:#fff !important; }
#p-pedido .exec-cta-stack .btn-w { background:transparent !important; color:#fff !important; border-color:#ffffff66 !important; }
#p-conta .exec-conta-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 20px; }
#p-conta .exec-conta-stats>div { background:#fff; border:1px solid var(--exec-line); border-radius:14px; padding:18px; min-width:0; }
#p-conta .exec-conta-stats b { display:block; font:700 25px/1.3 Sora,sans-serif; color:var(--exec-navy); }
#p-conta .exec-conta-stats span { display:block; font-size:12px; line-height:1.5; color:var(--exec-muted); }
#p-conta .exec-status-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; padding:12px; border:1px solid var(--exec-line); border-radius:12px; background:#faf8f3; }
#p-conta .exec-status-grid div { min-width:0; overflow-wrap:anywhere; }
#p-conta .exec-status-grid small { display:block; color:var(--exec-muted); font-size:11px; }
#p-conta .exec-status-grid b { display:block; font-size:12px; color:var(--exec-navy); margin-top:5px; line-height:1.5; }
#p-conta .exec-order-next { background:#eeedf8; border-radius:10px; padding:12px 14px; font-size:12px; line-height:1.55; color:var(--exec-indigo); margin:14px 0; }
#p-conta .exec-fin-status { display:inline-flex; border-radius:7px; padding:6px 9px; font-size:10px; font-weight:700; color:#626b79; background:#f0f1f3; }
#p-conta .exec-fin-status.pago { color:#16744b; background:#e8f5ec; }
#p-conta .exec-fin-status.pendente { color:#8a5b16; background:#fff4db; }
#p-conta .exec-order-filter { display:grid; gap:6px; margin:0 0 16px; font-size:12px; }
#p-conta .exec-order-filter select { border:1px solid var(--exec-line); background:#fff; border-radius:10px; padding:11px; color:var(--exec-navy); max-width:320px; }
#p-conta .tabs { gap:8px; flex-wrap:wrap; }
#p-conta .tabs button { border-radius:11px; border:1px solid var(--exec-line); background:#fff; }
#p-conta .tabs button.on { background:var(--exec-indigo); border-color:var(--exec-indigo); color:#fff; }
@media(max-width:680px) { #p-conta .exec-conta-stats { gap:7px; } #p-conta .exec-conta-stats>div { padding:12px 9px; } #p-conta .order .top { flex-wrap:wrap; gap:10px; } #p-conta .exec-row-actions .btn { min-height:42px; } }
/* Tabela Executiva de Envios (#p-conta aba Envios — Correção image-1.png) */
.exec-tbl-wrap {
width: 100%;
min-width: 0;
overflow-x: auto;
background: #FFFFFF;
border: 1px solid var(--exec-line);
border-radius: 14px;
box-shadow: var(--exec-shadow);
}
.exec-tbl {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.exec-tbl th {
text-align: left;
padding: 12px 16px;
background: #F8FAFC;
border-bottom: 1px solid var(--exec-line);
font: 700 11px/1.2 'Inter', sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--exec-slate);
white-space: nowrap;
}
.exec-tbl td {
padding: 14px 16px;
border-bottom: 1px solid var(--exec-line);
color: var(--exec-ink);
vertical-align: middle;
}
.exec-tbl tbody tr:last-child td { border-bottom: 0; }
.exec-tbl .exec-cod {
font: 700 13px/1.2 'Sora', monospace;
color: var(--exec-navy);
white-space: nowrap;
}
.exec-tbl .exec-actions-cell {
text-align: right;
white-space: nowrap;
}
.exec-tbl .exec-row-actions {
display: inline-flex !important;
align-items: center;
justify-content: flex-end;
gap: 8px !important;
flex-wrap: nowrap;
}
@media (max-width: 680px) {
.exec-tbl thead { display: none; }
.exec-tbl, .exec-tbl tbody, .exec-tbl tr, .exec-tbl td {
display: block;
width: 100%;
}
.exec-tbl tr {
padding: 14px 16px;
border-bottom: 1px solid var(--exec-line);
}
.exec-tbl tr:last-child { border-bottom: 0; }
.exec-tbl td {
padding: 4px 0;
border: 0;
text-align: left !important;
white-space: normal !important;
}
.exec-tbl .exec-actions-cell {
margin-top: 10px;
}
.exec-tbl .exec-row-actions {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
}
/* Aba Dados Cadastrais & Endereços em largura total executiva (2 colunas no PC) */
#p-conta #aba-corpo .card {
max-width: 100% !important;
width: 100% !important;
background: #FFFFFF !important;
border: 1px solid var(--exec-line) !important;
border-radius: 14px !important;
padding: 24px !important;
box-shadow: var(--exec-shadow) !important;
box-sizing: border-box !important;
}
#p-conta #bloco-end > .head-end ~ h2,
#p-conta #bloco-end > .head-end ~ p.sub {
display: none !important;
}
#p-conta .exec-dados-grid {
display: grid;
grid-template-columns: minmax(0, 1.48fr) minmax(300px, 1fr);
gap: 20px;
align-items: start;
}
@media (min-width: 681px) {
#p-conta .exec-dados-grid .crm-grid .f:has(#md-email),
#p-conta .exec-dados-grid .crm-grid .f:has(#md-site),
#p-conta .exec-dados-grid .crm-grid .f:has(#md-notes) {
grid-column: span 12 !important;
}
#p-conta .exec-dados-grid .crm-grid .f:has(#md-whats),
#p-conta .exec-dados-grid .crm-grid .f:has(#md-sec),
#p-conta .exec-dados-grid .crm-grid .f:has(#md-contato-nome),
#p-conta .exec-dados-grid .crm-grid .f:has(#md-contato-cargo),
#p-conta .exec-dados-grid .crm-grid .f:has(#md-optout),
#p-conta .exec-dados-grid .crm-grid .f:has(#md-mkt) {
grid-column: span 6 !important;
}
#p-conta .exec-dados-grid .crm-grid .f:has(#nd-cep) {
grid-column: span 4 !important;
}
#p-conta .exec-dados-grid .crm-grid .f:has(#nd-rua) {
grid-column: span 5 !important;
}
#p-conta .exec-dados-grid .crm-grid .f:has(#nd-numero) {
grid-column: span 3 !important;
}
}
#p-conta .exec-dados-grid .f:has(input[type="checkbox"]) label {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
text-align: left !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--exec-navy) !important;
cursor: pointer;
}
#p-conta .exec-dados-grid .f input[type="checkbox"] {
width: 17px !important;
height: 17px !important;
margin: 0 !important;
flex-shrink: 0 !important;
accent-color: var(--exec-navy);
}
@media (max-width: 1020px) {
#p-conta .exec-dados-grid {
grid-template-columns: 1fr;
}
}
#p-conta .exec-dados-grid > * {
min-width: 0;
}
#p-conta .crm-sec {
font: 700 11.5px/1.3 'Sora', sans-serif !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--exec-navy) !important;
padding-bottom: 6px !important;
border-bottom: 1px solid var(--exec-line) !important;
margin-top: 14px !important;
}
/* Destaque sóbrio para "Como nos conheceu?" (sem rosa choque) */
#p-conta .campo-origem {
background: #F8FAFC !important;
border: 1px solid var(--exec-line-strong) !important;
border-left: 3px solid var(--exec-indigo) !important;
border-radius: 10px !important;
padding: 12px 14px !important;
margin: 0 0 14px !important;
}
#p-conta .campo-origem label {
display: block !important;
color: var(--exec-navy) !important;
font: 700 12px/1.3 'Inter', sans-serif !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin-bottom: 6px !important;
}
#p-conta .campo-origem select {
border-color: var(--exec-line-strong) !important;
background: #FFFFFF !important;
font-weight: 600 !important;
}
#p-conta .origem-nota {
color: var(--exec-muted) !important;
font-size: 11.5px !important;
}
#p-conta .bloco-end {
margin-top: 0 !important;
border-top: 0 !important;
padding: 22px !important;
background: #FFFFFF !important;
border: 1px solid var(--exec-line) !important;
border-radius: 14px !important;
box-shadow: var(--exec-shadow) !important;
}
#p-conta .end-card {
border: 1px solid var(--exec-line) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
background: #FFFFFF !important;
}
#p-conta .end-card.e-padrao {
border-color: var(--exec-indigo) !important;
background: #FCFCFF !important;
}
#p-conta .e-ref {
display: block;
margin-top: 3px;
font-size: 12px;
color: var(--exec-slate);
}
/* ════════════════════════════════════════════════════════════════════════════
3. CARRINHO & CHECKOUT EM 2 COLUNAS (#p-pedido)
════════════════════════════════════════════════════════════════════════════ */
#p-pedido .wrap.corpo {
max-width: 1200px !important;
}
#p-pedido .exec-ck-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 388px;
gap: 28px;
align-items: start;
}
#p-pedido .exec-ck-main,
#p-pedido .exec-ck-aside {
min-width: 0;
}
#p-pedido .exec-ck-aside {
position: sticky;
top: 84px;
}
#p-pedido .exec-ck-card {
background: #FFFFFF;
border: 1px solid var(--exec-line);
border-radius: 14px;
padding: 22px;
box-shadow: var(--exec-shadow);
margin-bottom: 16px;
}
#p-pedido .exec-ck-card-hd {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px solid var(--exec-line);
}
#p-pedido .exec-ck-card-hd h3 {
font: 700 15.5px/1.3 'Sora', sans-serif;
color: var(--exec-navy);
margin: 0;
}
#p-pedido .exec-ck-card-hd span {
font-size: 12px;
color: var(--exec-muted);
}
#p-pedido .exec-print-sheets {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 12px;
padding: 10px 12px;
margin: 0 0 12px;
border: 1px solid #d8d5f1;
border-radius: 10px;
background: #f7f6ff;
color: #29265d;
font-size: 12px;
}
#p-pedido .exec-print-sheets span { color: #575470; }
#p-pedido .ci {
display: grid !important;
grid-template-columns: 68px minmax(0, 1fr) auto !important;
gap: 14px !important;
background: #FFFFFF !important;
border: 1px solid var(--exec-line) !important;
border-radius: 12px !important;
padding: 14px !important;
margin-bottom: 10px !important;
align-items: start !important;
}
#p-pedido .ci:last-child { margin-bottom: 0 !important; }
#p-pedido .ci .th {
width: 68px !important;
height: 68px !important;
border-radius: 10px !important;
background: #F8FAFC !important;
border: 1px solid var(--exec-line) !important;
overflow: hidden !important;
display: grid !important;
place-items: center !important;
flex-shrink: 0 !important;
}
#p-pedido .ci .th img.ci-ph {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
#p-pedido .ci .val {
font: 700 15px/1.2 'Sora', sans-serif !important;
color: var(--exec-navy) !important;
font-variant-numeric: tabular-nums;
}
/* No celular, linhas de um mesmo arquivo precisam de espaço para o
protocolo e para os controles sem comprimir o texto entre foto e preço. */
@media (max-width: 480px) {
#p-pedido .ci.ci-impressao {
grid-template-columns: 52px minmax(0, 1fr) !important;
column-gap: 10px !important;
row-gap: 8px !important;
}
#p-pedido .ci.ci-impressao .th { width: 52px !important; height: 52px !important; }
#p-pedido .ci.ci-impressao small { overflow-wrap: anywhere; }
#p-pedido .ci.ci-impressao > .val { grid-column: 2; margin-left: 0 !important; }
}
.exec-mode-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.exec-mode-btn {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
min-height: 68px;
padding: 14px 18px;
border-radius: 12px;
border: 1.5px solid var(--exec-line-strong);
background: #FFFFFF;
color: var(--exec-slate);
font: 600 13.5px/1.3 'Inter', sans-serif;
cursor: pointer;
text-align: left;
}
.exec-mode-btn b {
display: block;
color: var(--exec-navy);
font-size: 13.5px;
margin-bottom: 2px;
}
.exec-mode-btn small {
display: block;
font-size: 11.5px;
color: var(--exec-muted);
font-weight: 500;
}
.exec-mode-btn.on {
border-color: var(--exec-indigo);
background: #FCFCFF;
box-shadow: 0 0 0 3px rgba(59, 58, 150, 0.1);
}
.exec-addr-preview {
background: #F8FAFC;
border: 1px solid var(--exec-line);
border-radius: 10px;
padding: 12px 14px;
margin-top: 10px;
font-size: 13px;
line-height: 1.5;
color: var(--exec-ink);
}
.exec-addr-preview b { color: var(--exec-navy); }
.exec-addr-preview .exec-ref-line {
color: var(--exec-indigo);
font-weight: 600;
}
.exec-inline-addr {
background: #F8FAFC;
border: 1px solid var(--exec-line-strong);
border-radius: 12px;
padding: 16px;
margin-top: 12px;
}
.exec-inline-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 10px;
}
.exec-inline-grid .f { margin: 0 !important; min-width: 0; }
.exec-c2 { grid-column: span 2; }
.exec-c3 { grid-column: span 3; }
.exec-c4 { grid-column: span 4; }
.exec-c5 { grid-column: span 5; }
.exec-c6 { grid-column: span 6; }
.exec-c8 { grid-column: span 8; }
.exec-c9 { grid-column: span 9; }
.exec-c12 { grid-column: span 12; }
@media (max-width: 680px) {
.exec-mode-tabs { grid-template-columns: 1fr; }
.exec-c2, .exec-c3, .exec-c4, .exec-c5, .exec-c6, .exec-c8, .exec-c9 {
grid-column: span 12;
}
}
/* Resumo lateral executivo (sem triplicar Pix 5%) */
#p-pedido .exec-sum-box {
background: var(--exec-navy);
border: 1px solid var(--exec-navy);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--exec-shadow);
}
#p-pedido .exec-sum-top {
background: var(--exec-navy);
color: #FFFFFF;
padding: 16px 20px;
}
#p-pedido .exec-sum-top h3 {
font: 700 15px/1.25 'Sora', sans-serif;
margin: 0;
color: #FFFFFF;
}
#p-pedido .exec-sum-top small {
display: block;
font-size: 11.5px;
color: #CBD5E1;
margin-top: 2px;
}
#p-pedido .exec-sum-body {
padding: 18px 20px 20px;
}
#p-pedido .exec-sum-body .sum {
margin: 0 0 14px !important;
padding: 14px 16px !important;
background: transparent !important;
border: 1px solid #FFFFFF26 !important;
border-radius: 12px !important;
box-shadow: none !important;
color: #FFFFFF !important;
}
#p-pedido .exec-sum-body .sum::before,
#p-pedido .exec-sum-body .sum::after {
display: none !important;
content: none !important;
}
#p-pedido .exec-sum-body .sum .row {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
gap: 8px !important;
font-size: 13px !important;
color: #E2E8F0 !important;
padding: 4px 0 !important;
}
#p-pedido .exec-sum-body .sum .row span:last-child {
font-weight: 600 !important;
color: #FFFFFF !important;
font-variant-numeric: tabular-nums;
}
#p-pedido .exec-sum-body .sum .tot {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
gap: 8px !important;
margin-top: 8px !important;
padding-top: 10px !important;
border-top: 1px solid #FFFFFF40 !important;
font: 700 15.5px/1.25 'Sora', sans-serif !important;
color: #FFFFFF !important;
font-variant-numeric: tabular-nums;
}
#p-pedido .exec-sum-body .sum .tot span {
color: #FFFFFF !important;
}
#p-pedido .exec-pay-clean {
background: #FFFFFF0D;
border: 1px solid #FFFFFF26;
border-radius: 10px;
padding: 11px 13px;
margin-bottom: 14px;
font-size: 12.2px;
line-height: 1.45;
color: #E2E8F0;
}
#p-pedido .exec-pay-clean b {
display: block;
color: #FFFFFF;
margin-bottom: 2px;
}
#p-pedido .exec-cta-stack {
display: grid;
gap: 8px;
}
#p-pedido .exec-cta-stack .btn {
width: 100%;
justify-content: center;
}
@media (max-width: 960px) {
#p-pedido .exec-ck-layout {
grid-template-columns: 1fr;
}
#p-pedido .exec-ck-aside {
position: static;
}
}
/* ════════════════════════════════════════════════════════════════════════════
4. DEMAIS PÁGINAS INTERNAS (#p-atendimento, #p-montador, #p-gabaritos, #p-paginas)
════════════════════════════════════════════════════════════════════════════ */
/* #p-atendimento — Cabeçalho corporativo sóbrio */
#p-atendimento .at-hero {
background: linear-gradient(165deg, var(--exec-navy) 0%, var(--exec-navy-2) 100%) !important;
border-radius: 16px !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 12px 28px rgba(8, 32, 64, 0.12) !important;
}
#p-atendimento .at-hero .blob { display: none !important; }
/* #p-montador — Correção de contraste no card direito e cabeçalho Cartela A4 */
#p-montador .mont-stage-label {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 4px 10px !important;
min-width: 0 !important;
}
#p-montador .mont-stage-label span,
#p-montador .mont-stage-label b {
max-width: 100%;
overflow-wrap: anywhere;
}
#p-montador aside.bprev.mont-preview {
color: var(--exec-ink) !important;
background: #FFFFFF !important;
border: 1px solid var(--exec-line) !important;
}
#p-montador aside.bprev.mont-preview .mont-kpi-dark {
background: var(--exec-navy) !important;
color: #FFFFFF !important;
border-radius: 12px !important;
}
#p-montador aside.bprev.mont-preview .mont-kpi-dark small,
#p-montador aside.bprev.mont-preview .mont-kpi-dark span {
color: #E2E8F0 !important;
}
#p-montador aside.bprev.mont-preview .mont-kpi-dark strong {
color: #FFFFFF !important;
}
#p-montador #montador-resumo,
#p-montador #montador-resumo span,
#p-montador #montador-resumo small,
#p-montador #montador-resumo p,
#p-montador #montador-resumo label {
color: var(--exec-ink) !important;
}
#p-montador .mont-preview-top {
color: var(--exec-slate) !important;
}
#p-montador .mont-preview-top b {
color: #059669 !important;
}
#p-montador aside.bprev.mont-preview .mont-contact {
border-top-color: var(--exec-line) !important;
}
#p-montador aside.bprev.mont-preview .mont-contact-head,
#p-montador aside.bprev.mont-preview .mont-contact-head b {
color: var(--exec-navy) !important;
}
#p-montador aside.bprev.mont-preview .mont-contact-head small,
#p-montador aside.bprev.mont-preview .mont-contact small,
#p-montador aside.bprev.mont-preview .mont-contact p,
#p-montador aside.bprev.mont-preview .mont-contact-manual-note,
#p-montador aside.bprev.mont-preview .mont-file-hint {
color: var(--exec-slate) !important;
}
#p-montador aside.bprev.mont-preview .f label {
color: var(--exec-navy) !important;
font-weight: 700 !important;
font-size: 11.5px !important;
}
#p-montador aside.bprev.mont-preview .f input {
background: #FFFFFF !important;
border: 1.5px solid var(--exec-line-strong) !important;
color: var(--exec-ink) !important;
}
#p-montador aside.bprev.mont-preview .mont-gabarito {
background: #F8FAFC !important;
color: var(--exec-navy) !important;
border: 1px solid var(--exec-line-strong) !important;
}
#p-montador aside.bprev.mont-preview .mont-gabarito:hover {
background: #F1F5F9 !important;
}
#p-montador aside.bprev.mont-preview .mont-price-loading,
#p-montador aside.bprev.mont-preview .mont-price-consult {
border-color: var(--exec-line-strong) !important;
color: var(--exec-slate) !important;
}
#p-montador aside.bprev.mont-preview .mont-price-consult small {
color: var(--exec-muted) !important;
}
#p-montador aside.bprev.mont-preview .mont-contact a {
color: var(--exec-indigo) !important;
font-weight: 600 !important;
text-decoration: underline;
}
/* #p-gabaritos — Alinhamento na régua Δ = 0px nos botões */
#p-gabaritos .gabs {
align-items: stretch !important;
}
#p-gabaritos .gab {
display: flex !important;
flex-direction: column !important;
background: #FFFFFF !important;
border: 1px solid var(--exec-line) !important;
border-radius: 14px !important;
padding: 20px !important;
box-shadow: var(--exec-shadow) !important;
}
#p-gabaritos .gab p {
flex: 1 1 auto !important;
margin-bottom: 14px !important;
}
#p-gabaritos .gab .dl {
margin-top: auto !important;
padding-top: 8px;
}
#p-gabaritos .exec-dica-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
flex-wrap: wrap !important;
background: #FFFFFF !important;
border: 1px solid var(--exec-line) !important;
border-left: 4px solid var(--exec-navy) !important;
border-radius: 12px !important;
padding: 16px 20px !important;
}
#p-gabaritos .exec-dica-bar b {
display: block;
color: var(--exec-navy);
margin-bottom: 2px;
}
#p-gabaritos .exec-dica-bar span {
font-size: 13px;
color: var(--exec-slate);
}
/* #p-paginas — Menu em pílulas horizontais no Tablet/Celular */
@media (max-width: 900px) {
#p-paginas .doc-wrap {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 14px !important;
}
#p-paginas .doc-lista {
display: flex !important;
flex-direction: row !important;
overflow-x: auto !important;
gap: 6px !important;
padding: 4px 2px 8px !important;
min-width: 0 !important;
scrollbar-width: none;
}
#p-paginas .doc-lista::-webkit-scrollbar { display: none; }
#p-paginas .doc-lista a {
flex: 0 0 auto !important;
white-space: nowrap !important;
border-radius: 99px !important;
padding: 8px 13px !important;
border: 1px solid var(--exec-line-strong) !important;
background: #FFFFFF !important;
font-size: 12.5px !important;
}
#p-paginas .doc-lista a.on {
background: var(--exec-navy) !important;
border-color: var(--exec-navy) !important;
color: #FFFFFF !important;
}
}
/* Mobile: show every legal destination without requiring an undiscoverable
horizontal swipe through a scrollbar-hidden row. */
@media (max-width: 520px) {
#p-paginas .doc-lista {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-auto-flow: row !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
gap: 6px !important;
padding: 4px 0 8px !important;
}
#p-paginas .doc-lista a {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: initial !important;
min-height: 48px !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
justify-content: flex-start !important;
line-height: 1.3 !important;
text-align: left !important;
padding: 9px 10px !important;
border-radius: 12px !important;
}
}
/* Tablet/touch widths: replace the same hidden horizontal strip with a
three-column grid so every legal destination remains visible. */
@media (min-width: 521px) and (max-width: 960px) {
#p-paginas .doc-lista {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-auto-flow: row !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
gap: 8px !important;
padding: 4px 0 8px !important;
}
#p-paginas .doc-lista a {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: initial !important;
min-height: 48px !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
justify-content: flex-start !important;
line-height: 1.3 !important;
text-align: left !important;
padding: 10px 12px !important;
border-radius: 12px !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; }
/*ajustes-6308-pagamento.css*/
/* ════════════════════════════════════════════════════════════════════
ajustes-6308-pagamento.css — PROGRAMA 6.30.8 (31/10/2026)
Só o painel de PIX que abre dentro do card do pedido. Nada aqui
muda layout de tela existente: se o JS não rodar, o CSS não faz
nada sozinho (não há seletor que case com HTML antigo).
════════════════════════════════════════════════════════════════════ */
.pg-pix {
margin: 12px 0 0;
padding: 16px;
border: 1px solid #d8e3f5;
border-radius: 14px;
background: #f7faff;
}
.pg-pix-topo {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.pg-pix-topo b { font-size: 15px; }
.pg-pix-prazo {
font-size: 12px;
color: #5a6b85;
}
.pg-pix-prazo.urgente { color: #b3261e; font-weight: 600; }
.pg-pix-corpo {
display: flex;
gap: 18px;
align-items: center;
flex-wrap: wrap;
margin-top: 12px;
}
.pg-pix-qr {
width: 168px;
height: 168px;
flex: 0 0 auto;
border-radius: 12px;
background: #fff;
border: 1px solid #e3e9f2;
padding: 8px;
display: block;
}
.pg-pix-qr svg { display: block; width: 100%; height: 100%; }
.pg-pix-passo { flex: 1 1 240px; min-width: 220px; }
.pg-pix-passo ol {
margin: 0 0 10px;
padding-left: 18px;
font-size: 13px;
line-height: 1.55;
color: #33425a;
}
.pg-pix-codigo {
width: 100%;
box-sizing: border-box;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
line-height: 1.45;
color: #22314a;
background: #fff;
border: 1px solid #cfd9e8;
border-radius: 10px;
padding: 9px 10px;
resize: vertical;
min-height: 58px;
}
.pg-pix-linha {
display: flex;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
align-items: center;
}
.pg-pix-acoes {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed #d8e3f5;
font-size: 13px;
}
.pg-pix-acoes a { color: #1b4f9c; }
.pg-nota {
margin: 10px 0 0;
font-size: 12.5px;
line-height: 1.5;
color: #5a6b85;
}
.pg-pix-aviso {
margin: 10px 0 0;
font-size: 12.5px;
color: #8a4b00;
background: #fff7e8;
border: 1px solid #f2ddb6;
border-radius: 10px;
padding: 8px 10px;
}
@media (max-width: 520px) {
.pg-pix-corpo { gap: 12px; }
.pg-pix-qr { width: 100%; height: auto; max-width: 260px; margin: 0 auto; }
.pg-pix-passo { flex: 1 1 100%; }
}
/*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 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-632-cadastro.css*/
/* ══════════════════════════════════════════════════════════════════
Portal 6.32.0 — CADASTRO DO CLIENTE (aba Meus dados)
O dono disse "tudo muito junto" e aprovou o layout "misto" no rabisco
de 01/11: endereços salvos num cartão no topo, formulário em dois
cartões — "Seus dados" (01-03) e "Endereço e preferências" (04-05) —
com as seções numeradas, CEP sem esticar e respiro entre os campos.
Este arquivo é só espaço, largura e pele: nenhuma regra de gravação,
cálculo ou validação vive aqui.
Escopo: tudo pendura em .card-dados / .md-cartao, que só a aba Dados
usa. Nenhuma outra tela do site herda estas regras.
══════════════════════════════════════════════════════════════════ */
/* 1. o container da aba não é mais um cartão: ele empilha cartões.
A ficha do cliente não cabia em 520px — são blocos de 4 colunas. */
.card-dados{max-width:940px;display:grid;gap:18px}
.md-cartao{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:26px 28px;box-shadow:var(--shadow);
}
.md-cab{margin:0 0 6px}
.md-cab h2{
margin:0;font-family:var(--font-d);font-size:17px;font-weight:800;
letter-spacing:-.01em;color:var(--ink);
}
.md-cab p{margin:3px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.md-cab-faixa{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
/* 2. seções numeradas: 01, 02, 03… em caixinha, título em versalete.
A barrinha colorida do estilos.css sai de cena — o número é o marco. */
.card-dados .crm-sec{
grid-column:span 12;margin:26px 0 14px;padding-top:0;border-top:0;
display:flex;align-items:center;gap:10px;
}
.card-dados .crm-sec:first-child{margin-top:0}
.card-dados .crm-sec::before{content:none;display:none}
.card-dados .crm-sec .n{
width:24px;height:24px;flex:0 0 24px;border-radius:7px;
background:var(--brand-soft);color:var(--brand);
display:grid;place-items:center;
font-family:var(--font-d);font-size:10.5px;font-weight:800;letter-spacing:.02em;
}
.card-dados .crm-sec h3{
margin:0;font-family:var(--font-d);font-size:11px;font-weight:800;
letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
/* 3. respiro: 12px de vão separava rótulo de campo alheio; o dono leu
isso como "tudo junto". 16/20 entre campos, rótulo mais perto do seu. */
.card-dados .crm-grid{gap:16px 20px}
.card-dados .f label{margin-bottom:7px}
.card-dados .f input,
.card-dados .f select{min-height:46px}
.card-dados .field-msg{font-size:11px;margin-top:5px !important}
/* o estilos.css só define g-3/4/6/8/12 — g-9 caía para 1 coluna e o
"Ponto de referência" virava um talão de 120px. */
.card-dados .crm-grid .g-9{grid-column:span 9}
@media(max-width:640px){.card-dados .crm-grid .g-9{grid-column:span 12}}
/* checkbox não é campo de texto: a regra geral .f input dá width:100% e
a caixinha virava uma faixa cinza de 900px de largura. */
.card-dados .f label.lgpd{display:flex;align-items:flex-start;gap:9px;font-weight:700;margin-bottom:0}
.card-dados .f label.lgpd input[type="checkbox"]{
width:18px;height:18px;min-height:0;flex:0 0 18px;margin:1px 0 0;padding:0;accent-color:var(--brand-2);
}
.card-dados .f label.lgpd .crm-hint{font-weight:500;margin-top:3px}
/* 4. faixa de endereços salvos: cartão próprio no topo */
.fx-end{padding:22px 24px}
.fx-end-lista{display:flex;gap:12px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.fx-end-item{
flex:0 0 auto;min-width:200px;max-width:280px;text-align:left;background:#fff;
border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;
transition:border-color .15s,box-shadow .15s,transform .15s;font-family:inherit;
}
.fx-end-item:hover,.fx-end-item:focus-visible{
border-color:var(--brand-2);box-shadow:0 6px 16px -8px rgba(8,32,64,.35);
transform:translateY(-1px);outline:none;
}
.fx-end-item b{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink)}
.fx-end-item small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.fx-end-item .fx-ref{font-style:italic}
.fx-tag{
font:800 9px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
color:#0f7a3d;background:#eaf6ee;border-radius:999px;padding:3px 6px;font-style:normal;
}
.fx-end-item.padrao{border-color:#a7f3d0;background:#f7fdf9}
.fx-end-dica{display:block;margin-top:10px;font-size:11.5px;color:var(--muted)}
/* 5. ações: Salvar com largura de botão (não metade da tela), "Sair" discreto */
.md-acoes{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
}
.md-acoes .btn-b{flex:0 1 auto;min-width:196px;justify-content:center}
.md-acoes .btn-o{flex:0 1 auto;justify-content:center}
.md-acoes .btn-txt{margin-left:auto}
.md-nota{margin:16px 0 0}
/* 6. celular: cartões mais apertados, faixa rola na horizontal */
@media(max-width:640px){
.md-cartao{padding:18px 16px;border-radius:16px}
.card-dados{gap:14px}
.card-dados .crm-sec{margin:22px 0 12px}
.fx-end{padding:16px 14px}
.fx-end-item{min-width:168px}
.md-acoes{gap:10px}
.md-acoes .btn-b,.md-acoes .btn-o{flex:1 1 100%;min-width:0}
.md-acoes .btn-txt{margin-left:0;order:3}
}
/* 7. aba Endereços com o mesmo desenho da aba Meus dados: o topo vira
cabeçalho de cartão e a lista perde o vão extra (quem separa é o
empilhador .card-dados). O formulário é um cartão por si só — por
isso ele entra sem moldura dupla. */
.card-dados .end-lista{margin-bottom:0}
.card-dados .md-sem-pad{padding:0;background:transparent;border:0;box-shadow:none}
.card-dados .end-form{border-radius:var(--radius)}
/* 8. o .ef-grid (formulário de endereço) define g-3/4/6/8/9 e esquece o
g-12: o "Ponto de referência" caía para 1 coluna e virava um talão de
140px — mesmo defeito do g-9 na aba Meus dados. */
.ef-grid .g-12{grid-column:span 12}
@media(max-width:560px){.ef-grid .g-12{grid-column:span 6}}
/* ══════════ camada sobre o portal publicado (6.31.0) ══════════════
O bundle no ar envolve a aba num .card e deixa a barra de ações e os
avisos FORA do formulário. Aqui o .card vira só o empilhador e os
restos do desenho antigo saem de cena — sem tocar no JS deles. */
.card.card-dados{background:none;border:0;box-shadow:none;padding:0;max-width:940px}
.card-dados > #md-form{display:grid;gap:18px}
.card-dados > .md-acoes,
.card-dados > .callout,
.card-dados > button.btn-o{display:none !important}
/* a aba Endereços publicada usa h3 no topo; virou h2 dentro de um cartão */
.md-end-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.md-end-topo h2{font-family:var(--font-d);font-size:17px;font-weight:800;margin:0;letter-spacing:-.01em}
.md-end-topo p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
#aba-corpo .end-lista{margin-bottom:0}
/* Camadas anteriores continuam redesenhando a aba em segundo plano e
repõem o bloco "Endereços de Entrega Salvos" do rodapé e o campo de
origem solto. Esconder por CSS é instantâneo e não depende do relógio
do JS — o JS também remove, isto aqui é a garantia. */
#aba-corpo > .bloco-end{display:none !important}
#aba-corpo .campo-origem{display:none !important}
/* ── 01/11, no ar: o dono viu o cartão de endereço "esmagado" no PC ──
A faixa usava flex:0 0 auto com max 280px: com UM endereço, sobrava
meio cartão vazio à direita. Agora o cartãozinho cresce e divide a
linha; com dois ou três, cada um fica com a sua parte. */
.fx-end-item{flex:1 1 260px;max-width:none;min-width:240px}
/* a aba Endereços usava auto-fill com mínimo de 285px: um endereço só
ocupava 1/3 da linha e o resto ficava branco. auto-fit colapsa as
colunas vazias, então o cartão ocupa a largura do cartão branco. */
#aba-corpo .end-lista{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
/* min() no mínimo: em tela de 320 px o minmax(300px) forçava 300 px de
coluna dentro de um espaço de 256 px e a página inteira estourava 30 px
para o lado (visto na aba Endereços em 02/11). */
/* a ficha de 940px ficava colada à esquerda de um container de 1120px */
.card-dados{margin-inline:auto}
/* ── 02/11 · o bloco 04 Endereço estava desorganizado no PC ─────────
1) o "Sem número (S/N)" é um checkbox, mas herdava min-height:46px do
.f input e virava um quadrado de 46px jogado fora da coluna;
2) CEP/Rua/Número/Complemento tinham larguras que não fechavam linha,
e o Ponto de referência ficava espremido ao lado da UF.
Agora: linha 1 = CEP · Rua · Número · Complemento; linha 2 = Bairro ·
Cidade · UF; linha 3 = Ponto de referência inteiro. */
.card-dados .crm-grid .g-2{grid-column:span 2}
.card-dados .crm-grid .g-5{grid-column:span 5}
@media(max-width:640px){
.card-dados .crm-grid .g-2,
.card-dados .crm-grid .g-5{grid-column:span 12}
}
.card-dados .f input[type="checkbox"]{
width:16px;height:16px;min-height:0;flex:0 0 16px;margin:0;padding:0;
accent-color:var(--brand-2);
}
.card-dados .f label:has(input[type="checkbox"]){
display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
margin:6px 0 0;color:var(--muted);
}
/* rótulo do ponto de referência: duas linhas viravam um degrau na grade */
.card-dados .f label small{font-weight:500;opacity:.75}
/*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):
========================================================================== */
/* ============================ 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 : 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 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; } }
/*ajustes-634-catalogo.css*/
/* 6.33.11 — correção das famílias no catálogo e faixa única dos Bottons.
O card623 usa foto 7:3; os cards de família estavam caindo na regra
antiga :has(img.ph) 1:1, elevando as linhas do grid e criando grandes
vazios nos cards vizinhos. Esta camada iguala a régua sem tocar em preço. */
#grid-cat {
align-items: stretch;
row-gap: 16px;
}
/* Na ficha, a coluna da foto precisa respeitar a largura disponível em
telas móveis; o tamanho intrínseco da capa não pode alargar o documento. */
#produto-corpo .pd,
#produto-corpo .pd-gal-col,
#produto-corpo .pd-info-col {
min-width: 0;
}
#produto-corpo .pd .fig {
width: 100%;
min-width: 0;
max-width: 100%;
}
#produto-corpo .pd .fig img {
display: block;
width: 100%;
min-width: 0;
max-width: 100%;
}
#grid-cat .prod.prod-familia {
min-width: 0;
height: 100%;
overflow: hidden;
}
#grid-cat .prod.prod-familia .thumb,
#grid-cat .prod.prod-familia .thumb:has(> img.ph) {
width: 100%;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 7 / 3 !important;
position: relative;
overflow: hidden;
flex: none;
}
#grid-cat .prod.prod-familia .thumb > img.ph {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
#grid-cat .prod.prod-familia .thumb.sem-foto {
display: grid;
place-items: center;
background: linear-gradient(135deg, #eff7fb, #e7f0ec 58%, #fff);
}
#grid-cat .prod.prod-familia .bd {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
gap: 6px;
padding: 12px 14px 14px;
}
#grid-cat .prod.prod-familia .bd > b {
min-height: 2.5em;
line-height: 1.25;
}
#grid-cat .prod.prod-familia .desc {
min-height: 2.8em;
margin: 0;
line-height: 1.4;
}
#grid-cat .prod.prod-familia .price {
margin-top: auto;
padding-top: 9px;
}
/* Pacotes P10/P20/P30/P50: quatro escolhas em uma única linha também
no celular. O total aparece em cada opção; a caixa identifica valores
fechados por pacote. */
.pd-familia-botton.pd-familia-portal .pd-fam-row[data-cols="4"] {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 6px !important;
}
.pd-familia-botton.pd-familia-portal .pd-fam-row[data-cols="4"] .pd-fam-btn {
display: flex !important;
width: 100%;
min-width: 0;
min-height: 58px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 7px 4px;
text-align: center;
white-space: nowrap;
line-height: 1.1;
}
.pd-familia-botton.pd-familia-portal .pd-fam-row[data-cols="4"] .pd-fam-btn small {
display: block;
max-width: 100%;
font-size: 10px;
line-height: 1.1;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
#grid-cat { row-gap: 14px; }
.pd-familia-botton.pd-familia-portal .pd-fam-row[data-cols="4"] {
gap: 4px !important;
}
.pd-familia-botton.pd-familia-portal .pd-fam-row[data-cols="4"] .pd-fam-btn {
min-height: 54px;
padding: 6px 2px;
font-size: clamp(9.5px, 3vw, 11px);
}
.pd-familia-botton.pd-familia-portal .pd-fam-row[data-cols="4"] .pd-fam-btn small {
font-size: clamp(8px, 2.5vw, 9px);
}
}
/* 6.33.12 — o contador de fotos recebia `top` e `bottom` de duas camadas
antigas ao mesmo tempo; como era absoluto, esticava até virar uma faixa
vertical na capa. Mantém o selo compacto no canto superior direito. */
.prod .thumb .ph-count {
top: 8px;
right: 8px;
bottom: auto;
left: auto;
width: max-content;
height: auto;
min-width: 0;
min-height: 0;
max-width: calc(100% - 16px);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 3px 8px;
border-radius: 999px;
line-height: 1.15;
white-space: nowrap;
box-sizing: border-box;
}
/*ajustes-635-conta.css*/
/* 6.32.6 — barra de abas da conta no celular
A barra é um grid de 6 colunas (a aba "Artes" fica escondida), então no
celular cada aba recebia 66 px. "Endereços" precisa de 76 px: aparecia
"Ender…" — a única forma de o cliente saber qual aba é era adivinhar.
Agora, abaixo de 520 px, a barra vira 3 colunas por linha (3 + 2) e o
rótulo nunca é cortado. */
@media (max-width:520px){
#p-conta .tabs{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:5px !important;
}
#p-conta .tabs button,
#p-conta .tabs > *{
font-size:12px !important;
padding:8px 4px !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
min-width:0 !important;
}
}
/* margem de segurança: em telas bem estreitas o rótulo encolhe em vez de sumir */
@media (max-width:360px){
#p-conta .tabs button,
#p-conta .tabs > *{font-size:11.2px !important; letter-spacing:-.01em !important}
}