/* Cenas em mockup e trilho que anda sozinho (rodada 5, 12/10/2026): UMA folha para Pedidos, Como funciona e Atendimento.
   NÃO vai inline no HTML (teto de 60 KB) nem é importada por componente: importada, virava dois ou três arquivos de CSS
   pedidos na hidratação com prioridade máxima e custava 0,2 s de FCP no Lighthouse do celular (medido lado a lado em
   12/10/2026). Fica em public/ e cada seção de trilho a pede por <link media=print onload> com <noscript> de reserva
   (FOLHA_CENAS em utils/dlv-liga.ts); tudo aqui fica abaixo da dobra. O pouco que precisa valer antes de ela chegar
   está em CSS_ANTES_DAS_CENAS (mesmo arquivo). CSS puro, sem diretiva do Tailwind. Mudou a folha: suba a versão no
   nome do arquivo e em FOLHA_CENAS (o navegador guarda a antiga). */
.cn { visibility: visible; }

/* =============== trilho que anda sozinho ===============
   O desenho preso à rolagem do computador continua em assets/css/paginas-produto.css; aqui ficam as abas do celular, os
   botões dos passos, o atalho de um passo para outra seção, o que a ficha do estúdio ganhou (interruptor e plugue) e a
   elevação no mouse. */

/* ---- o número do passo vira botão quando o trilho está vivo ---- */
button.tr-n { border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.tr-n:focus-visible { outline: 2px solid var(--dlv-acao); outline-offset: 3px; }
.tr-cab h3[data-clicavel] { cursor: pointer; }
.tr-atalho { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: .6rem; font-size: .9375rem; font-weight: 600; }
.tr-atalho a { color: var(--dlv-acao); text-decoration: underline transparent; text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.tr-atalho a:is(:hover, :focus-visible) { text-decoration-color: currentColor; }
.tr-atalho a span { display: inline-block; transition: translate .3s var(--ease-solto); }
.tr-atalho a:hover span { translate: 3px 0; }
.pg-solo { background: var(--dlv-papel); }
#caixa.pg-solo { background: var(--dlv-nevoa); }
.pg-solo-nota { margin-top: 1.5rem; max-width: 36rem; }
.pg-trilho .dlv-legenda { margin-top: .75rem; }

/* ---- celular: os passos viram abas (os números em fila) e um passo fica aberto por vez; título, texto e peça de
   todos os passos ocupam a mesma célula, para a página não mudar de altura quando o passo troca ---- */
@media (width < 64rem) {
  .pg-trilho[data-vivo] .tr { grid-template-columns: repeat(var(--n), auto) minmax(0, 1fr); column-gap: .5rem; }
  .pg-trilho[data-vivo] .tr-passo { display: contents; }
  .pg-trilho[data-vivo] .tr-passo::before { display: none; }
  .pg-trilho[data-vivo] .tr-n { grid-row: 1; margin-bottom: 1.1rem; }
  .pg-trilho[data-vivo] .tr-passo[data-atual] .tr-n { background: var(--dlv-acao); color: #fff; box-shadow: 0 0 0 4px var(--dlv-acao-suave); }
  .pg-trilho[data-vivo] .tr-passo[data-feito] .tr-n { background: var(--dlv-verde-suave); color: var(--dlv-verde); box-shadow: none; }
  .pg-trilho[data-vivo] :is(.tr-cab h3, .tr-texto, .tr-peca) { grid-column: 1 / -1; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .35s; }
  .pg-trilho[data-vivo] .tr-cab h3 { grid-row: 2; align-self: start; }
  .pg-trilho[data-vivo] .tr-texto { grid-row: 3; }
  .pg-trilho[data-vivo] .tr-peca { grid-row: 4; align-self: center; }
  .pg-trilho[data-vivo] .tr-passo[data-atual] :is(.tr-cab h3, .tr-texto, .tr-peca) { visibility: visible; opacity: 1; transition-delay: 0s; }
  .pg-trilho[data-vivo] .tr-peca .pc-ficha { width: 100%; }
}
@media (width >= 64rem) {
  /* sem movimento: o título fica junto do número e o texto logo abaixo, mesmo com a tela ao lado mais alta */
  .tr-passo { grid-template-rows: auto 1fr; }
  .pg-trilho[data-vivo] :is(.dlv-legenda, .pg-solo-nota) { grid-column: 1; }
  .pg-solo[data-vivo] [data-dlv-pino] { min-height: 33rem; }
  /* a troca é sozinha: o texto do passo aberto reserva três linhas, para a seção não mudar de altura a cada passo */
  .pg-solo[data-vivo] .tr-passo[data-atual] .tr-texto { min-height: 5rem; }
}

/* ---- ficha do estúdio: cada linha com o interruptor ligado e o plugue que liga uma peça à anterior ---- */
.pc-ficha { position: relative; }
.pc-ficha li { padding-right: 2.4rem; }
.pc-chave { position: absolute; right: 0; top: .6rem; width: 1.7rem; height: .95rem; border-radius: 999px; background: var(--fc); }
.pc-chave::after { content: ""; position: absolute; right: .14rem; top: .14rem; width: .67rem; height: .67rem; border-radius: 50%; background: #fff; }
.pc-plugue { display: none; position: absolute; z-index: 1; border-radius: 999px; background: var(--dlv-acao); }
@media (width >= 64rem) {
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .pc-ficha li { padding-right: 2rem; }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .pc-chave { top: .4rem; width: 1.4rem; height: .8rem; }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .pc-chave::after { width: .52rem; height: .52rem; }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .tr-passo:nth-child(even) .pc-plugue:not([data-pe]) { display: block; right: calc(100% - .5rem); top: 2.6rem; width: 2.4rem; height: .5rem; }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .tr-passo:nth-child(n+3) .pc-plugue[data-pe] { display: block; bottom: calc(100% - .5rem); left: 2.6rem; width: .5rem; height: 1.5rem; }
}

/* ---- mouse por cima: os cartões dessas páginas levantam um pouco ---- */
@media (hover: hover) {
  :is(.pg-lanc-grade .dlv-cartao, .pg-cf-papel, .pc-motor, .pc-grafico-cartao) { transition: translate .4s var(--ease-solto), box-shadow .4s ease; }
  :is(.pg-lanc-grade .dlv-cartao, .pg-cf-papel, .pc-motor, .pc-grafico-cartao):hover { translate: 0 -4px; box-shadow: var(--dlv-sombra-leve); }
  button.tr-n { transition: background-color .4s ease, color .4s ease, box-shadow .4s ease, scale .3s var(--ease-solto); }
  button.tr-n:hover { scale: 1.1; }
}


/* =============== as peças com que se desenha uma tela ===============
   Janela do painel, celular, cartão, linha, botão, selo, código, cursor. Palco de 36 × 27 em: a letra vem da largura da
   peça (cqi), então tudo aqui é em em. O que está no HTML é o estado final; o movimento é do utils/dlv-cenas.ts (só
   transform, opacidade e o traço do SVG). Cores só por token. */
.cn { container-type: inline-size; width: 100%; max-width: 38.5rem; margin-inline: auto; perspective: 1100px; }
.cn-p { position: relative; width: 36em; height: 27em; margin-inline: auto; font-size: min(100cqi / 36, 17px); line-height: 1.3; color: var(--dlv-tinta); text-align: left; }
.cn-p :is(small, span, b, em, i, p) { font-style: normal; }
.cn-p small { font-size: .8em; }

/* janela do painel: barra com os três pontos e o nome da tela */
.cn-j { position: absolute; inset: 0 2.5em 1.5em 0; display: flex; flex-direction: column; border-radius: 1.1em; background: var(--dlv-papel); box-shadow: var(--dlv-sombra-leve), 0 0 0 1px rgba(14, 52, 132, .08); overflow: hidden; }
.cn-jb { flex: none; display: flex; align-items: center; gap: .6em; height: 3.2em; padding-inline: 1.2em; background: var(--dlv-nevoa); border-bottom: 1px solid var(--dlv-linha); font-weight: 600; color: var(--dlv-sec); white-space: nowrap; }
.cn-jb b { color: var(--dlv-tinta); }
.cn-j > .cn-jb::before { content: ""; flex: none; width: .7em; height: .7em; margin-right: 2.6em; border-radius: 50%; background: var(--dlv-linha-forte); box-shadow: 1.15em 0 var(--dlv-linha-2), 2.3em 0 var(--dlv-linha-2); }
.cn-jc { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .6em; padding: 1.2em 1.3em; }
/* o que aparece e sai durante a cena (o botão antes do toque) não faz parte do estado final */
.cn [data-cn="f"] { opacity: 0; }
/* celular */
.cn-c { position: absolute; display: flex; flex-direction: column; width: 14em; border: .42em solid var(--dlv-tinta); border-radius: 2.1em; background: var(--dlv-nevoa); box-shadow: var(--dlv-sombra-leve); overflow: hidden; }
.cn-c > .cn-jb { justify-content: center; height: 3.6em; padding-top: .5em; background: var(--dlv-papel); }
.cn-a.cn-c { left: 10.5em; top: 0; bottom: 0; width: 15em; }
.cn-a.cn-c .cn-jc { padding: 1em .9em; }
.cn-a.cn-c .cn-r { font-size: .85em; }
.cn-a.cn-c .cn-h { font-size: 1.25em; }

.cn-h { font-family: var(--font-marca); font-size: 1.4em; font-weight: 600; line-height: 1.2; }
.cn-k > .dlv-lanc { justify-self: start; }
.cn-k { display: grid; align-content: start; gap: .25em; padding: .75em .85em; border-radius: .85em; background: var(--dlv-papel); box-shadow: 0 .6em 1.3em -.8em rgba(14, 52, 132, .45), 0 0 0 1px rgba(14, 52, 132, .08); }
.cn-r { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .55em 0; border-top: 1px solid var(--dlv-linha); font-size: .92em; color: var(--dlv-sec); }
.cn-r > span { flex: 1; min-width: 0; }
.cn-r em { font-weight: 600; color: var(--dlv-tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-r em[data-neg] { color: var(--dlv-erro); }
.cn-r .dlv-lanc { flex: none; font-size: .78em; padding: .15em .6em; }
.cn-b, .cn-f { position: relative; justify-self: start; display: inline-flex; align-items: center; justify-content: center; padding: .6em 1.2em; border-radius: .75em; background: var(--dlv-acao); color: #fff; font-size: .92em; font-weight: 600; white-space: nowrap; }
/* a camada que acende por cima do botão (o "Pronto", o "Caixa aberto") */
:is(.cn-b, .cn-f) > span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--dlv-verde); color: #fff; }
.cn-s { justify-self: start; display: inline-flex; align-items: center; padding: .25em .75em; border-radius: 999px; background: var(--dlv-acao-suave); color: var(--dlv-acao); font-size: .8em; font-weight: 600; white-space: nowrap; }
.cn-s[data-c="v"] { background: var(--dlv-verde-suave); color: var(--dlv-verde); }
.cn-s[data-c="m"] { background: var(--dlv-ambar-suave); color: var(--dlv-ambar); }
.cn-ok { padding: .5em 1.2em; font-size: 1.1em; box-shadow: 0 .6em 1.2em -.6em rgba(6, 122, 104, .5); }
.cn-ok::before { content: ""; width: .35em; height: .65em; margin-right: .6em; border: solid currentColor; border-width: 0 .16em .16em 0; rotate: 45deg; translate: 0 -.08em; }
.cn-bar { display: block; width: var(--w, 100%); height: .4em; border-radius: 999px; background: var(--dlv-acao); }
/* código de entrega: quatro casas */
.cn-cod { display: flex; gap: .45em; }
.cn-cod b { display: grid; place-items: center; width: 2em; height: 2.4em; border-radius: .55em; background: var(--dlv-papel); box-shadow: inset 0 0 0 .1em var(--dlv-tinta); font-family: var(--font-marca); font-size: 1.35em; font-weight: 600; }
/* cartão apagado (os outros pedidos da fila) */
.cn-fant { box-shadow: 0 0 0 1px rgba(14, 52, 132, .08); }
.cn-fant b { font-size: .85em; font-weight: 600; color: var(--dlv-sec-2); }
.cn-fant i { display: block; width: 80%; height: .5em; margin-top: .35em; border-radius: 999px; background: var(--dlv-linha); }
.cn-fant i + i { width: 50%; }
/* ponto vivo e cursor */
.cn-pt { position: relative; flex: none; display: inline-block; width: .6em; height: .6em; margin-right: .5em; border-radius: 50%; background: var(--dlv-acao); }
.cn-pt::after { content: ""; position: absolute; inset: -.35em; border-radius: 50%; border: 1px solid var(--dlv-acao); opacity: 0; }
.cn-x { position: absolute; left: 0; top: 0; z-index: 5; width: 1.5em; height: 1.6em; margin: -.1em 0 0 -.2em; background: var(--dlv-tinta); clip-path: polygon(0 0, 0 80%, 24% 61%, 41% 100%, 56% 93%, 39% 56%, 72% 56%); filter: drop-shadow(0 0 1px #fff); opacity: 0; pointer-events: none; }
.pc-quadro .cn-x { font-size: 1rem; }
@media (pointer: coarse) { .cn-x { width: 1.9em; height: 1.9em; margin: -.95em 0 0 -.95em; border-radius: 50%; clip-path: none; background: rgba(232, 85, 15, .28); box-shadow: inset 0 0 0 .14em var(--dlv-acao); } }
@media (prefers-reduced-motion: no-preference) {
  html.dlv-vivo .cn-pt::after { animation: cn-pulso 1.7s ease-out infinite; }
  .dlv-pausa .cn-pt::after { animation-play-state: paused; }
}
@keyframes cn-pulso { 0% { opacity: .9; scale: .5 } 100% { opacity: 0; scale: 1.9 } }

/* ---- as telas montadas da peça de um passo (components/dlv/CenaTela.vue) ---- */
.cn-a.cn-c .cn-f { justify-self: stretch; margin-top: .5em; padding: .8em .6em; background: var(--dlv-tinta); white-space: normal; text-align: center; }
.cn-a.cn-j .cn-f { margin-top: .4em; }
/* a janela montada tem a altura do que mostra e fica no meio do palco */
.cn-a.cn-j { inset: 50% 2.5em auto 0; min-height: 18.5em; translate: 0 -50%; }
.cn-p:has(> .cn-a.cn-j) { height: 21.5em; }

/* ---- quadro da abertura: o número de cada coluna e o cartão que levanta enquanto anda ---- */
.pc-quadro-cols em { margin-left: auto; min-width: 1.7em; padding: .05em .45em; border-radius: 999px; background: var(--dlv-nevoa); font-style: normal; text-align: center; font-variant-numeric: tabular-nums; }
.pc-pedido { transition: translate .9s var(--ease-solto), scale .45s var(--ease-solto), rotate .45s var(--ease-solto), opacity .35s ease, border-color .5s ease; }
.pc-pedido[data-anda] { z-index: 2; scale: 1.06; rotate: 2deg; }

/* =============== as telas de /produto/pedidos-e-operacao ===============
   O caminho do pedido em cinco telas (components/dlv/CenaPedido.vue) e o entregador e o caixa (CenaTela.vue).
   Posições em em, dentro do palco de 36 × 27 em. */

/* ---- 01 chegou e 02 aceito: a fila no painel ---- */
.cn-fila { inset: 0 4.5em 4.5em 0; }
.cn-q { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; padding: .8em; }
.cn-q > div { display: grid; align-content: start; gap: .55em; padding: .6em; border-radius: .8em; background: var(--dlv-nevoa); }
.cn-q > div > small { display: flex; align-items: center; gap: .45em; font-weight: 600; white-space: nowrap; }
.cn-q > div > small::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--qc, var(--dlv-acao)); }
.cn-q > div > small em { margin-left: auto; min-width: 1.6em; padding: .05em .4em; border-radius: 999px; background: var(--dlv-papel); text-align: center; font-variant-numeric: tabular-nums; }
.cn-q [data-c="m"] { --qc: var(--dlv-ambar-vivo); }
.cn-q [data-c="v"] { --qc: var(--dlv-verde); }
.cn-novo { border-top: .22em solid var(--qc, var(--dlv-acao)); }
.cn-novo > small { display: flex; align-items: center; color: var(--dlv-acao); font-weight: 700; }
.cn-novo > :is(b, span:not(.cn-b, .cn-pilha)) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cn-novo > b { font-size: .92em; font-weight: 600; }
.cn-novo > span:not(.cn-b, .cn-pilha) { font-size: .8em; color: var(--dlv-sec); }
.cn-novo > em { font-weight: 600; font-variant-numeric: tabular-nums; }
.cn-novo .cn-b { justify-self: stretch; margin-top: .3em; padding-block: .5em; }
.cn-pilha { display: grid; margin-top: .3em; }
.cn-pilha > * { grid-area: 1 / 1; margin: 0; }
.cn-pilha > .cn-s { align-self: center; }
.cn-vaga { display: block; height: 8.6em; border-radius: .85em; border: 1px dashed var(--dlv-linha-forte); }
/* a onda de som na barra do painel */
.cn-som { display: flex; align-items: center; gap: .18em; height: 1.2em; margin-left: auto; }
.cn-som i { width: .22em; height: 100%; border-radius: 999px; background: var(--dlv-acao); scale: 1 .45; }
.cn-som i:nth-child(2) { scale: 1 1; }
/* o celular da equipe: a notificação por cima da tela bloqueada */
.cn-aviso { right: 0; bottom: 0; width: 14.5em; height: 16.5em; gap: .6em; padding: 2.6em .7em .7em; background: var(--dlv-noite); }
.cn-aviso .cn-k > small { display: flex; align-items: center; color: var(--dlv-sec-2); }
.cn-aviso .cn-k > b { font-size: .92em; font-weight: 600; }
.cn-aviso .cn-k > span { font-size: .85em; color: var(--dlv-sec); }
.cn-aviso > i { height: 2.6em; border-radius: .85em; background: rgba(255, 255, 255, .08); }
/* 02: o pagamento em três grupos */
.cn-paga { position: absolute; right: 0; bottom: 0; width: 24em; padding: 1em 1.1em .5em; }
.cn-paga .cn-r:first-of-type { margin-top: .4em; }

/* ---- 03 na cozinha: tela escura de alto contraste ---- */
.cn-coz { inset: 0 3.5em 2em 0; background: var(--dlv-marinho); color: #fff; box-shadow: var(--dlv-sombra-leve); }
.cn-coz > .cn-jb { background: var(--dlv-marinho-2); border-color: transparent; color: var(--dlv-noite-sec); }
.cn-coz > .cn-jb b { color: #fff; }
.cn-coz > .cn-jb::before { background: var(--dlv-noite-linha); box-shadow: 1.15em 0 var(--dlv-noite-linha), 2.3em 0 var(--dlv-noite-linha); }
.cn-coz-g { flex: 1; display: grid; grid-template-columns: 1.55fr 1fr; align-items: start; gap: .9em; padding: 1em; }
.cn-comanda { gap: .5em; padding: 1.1em; background: var(--dlv-marinho-2); box-shadow: inset 0 0 0 1px var(--dlv-noite-linha); }
.cn-comanda > small { display: flex; align-items: baseline; justify-content: space-between; font-size: .95em; font-weight: 600; color: var(--dlv-noite-sec); }
.cn-comanda > small em { font-family: var(--font-marca); font-size: 2em; font-weight: 600; color: var(--dlv-ambar-vivo); font-variant-numeric: tabular-nums; }
.cn-comanda > .cn-bar { background: var(--dlv-ambar-vivo); margin-bottom: .3em; }
.cn-comanda > b { font-size: 1.2em; font-weight: 600; }
.cn-pronto { justify-self: stretch; margin-top: .5em; padding-block: .75em; background: transparent; color: var(--dlv-verde-vivo); box-shadow: inset 0 0 0 .12em var(--dlv-verde-vivo); font-size: 1.05em; }
.cn-pronto > span { background: var(--dlv-verde-vivo); color: var(--dlv-marinho); }
.cn-comanda.cn-fant { opacity: .7; }
.cn-comanda.cn-fant i { background: var(--dlv-noite-linha); }
/* a comanda de 80 mm que sai pelo navegador */
.cn-papel { position: absolute; right: 0; bottom: 0; display: grid; gap: .3em; width: 11em; padding: 1em 1em 1.5em; background: #fff; color: var(--dlv-tinta); box-shadow: var(--dlv-sombra-leve); font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: .82em; border-bottom: .3em dotted var(--dlv-linha-forte); }
.cn-papel b { padding-bottom: .4em; border-bottom: 1px dashed var(--dlv-linha-forte); font-size: 1.15em; }

/* ---- 04 saiu: a taxa pela distância no mapa, o celular do entregador e o código com o cliente ---- */
.cn-mapa { inset: 0 9.5em 6em 0; }
.cn-mapa .pc-mapa { width: 100%; height: 100%; margin: 0; border-radius: 0; }
.cn-rota { fill: none; stroke: var(--dlv-acao); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.cn-ponta { fill: #fff; stroke: var(--dlv-acao); stroke-width: 3; }
.cn-ent { right: 0; top: .5em; gap: .55em; padding-bottom: 1.1em; }
.cn-ent > :not(.cn-jb) { margin-inline: .85em; }
.cn-ent .cn-h { margin-top: .8em; font-size: 1.15em; }
.cn-ent .cn-r { padding: .45em 0; font-size: .82em; }
.cn-ent .cn-b2 { align-self: stretch; background: var(--dlv-papel); color: var(--dlv-tinta); box-shadow: inset 0 0 0 1px var(--dlv-linha-forte); }
.cn-ent .cn-s { align-self: flex-start; }
.cn-cli { position: absolute; left: 1.5em; bottom: 0; gap: .45em; width: 16em; padding: 1em 1.1em; }
.cn-cli small b { color: var(--dlv-verde); }
.cn-cli > span { font-size: .85em; color: var(--dlv-sec); }

/* ---- 05 entregue: o código digitado, o selo e a avaliação ---- */
.cn-fim { left: .5em; top: 2.5em; align-items: center; gap: 1.4em; width: 15em; height: 21em; }
.cn-fim > .cn-jb { align-self: stretch; }
.cn-fim .cn-cod { margin-top: 3em; }
.cn-fecha { position: absolute; right: 0; top: 0; width: 19em; padding: 1.1em 1.2em .6em; }
.cn-fecha .cn-h { margin: .3em 0 .2em; font-size: 1.15em; }
.cn-nota { position: absolute; right: 2.5em; top: 15em; gap: .5em; width: 15em; padding: 1em 1.1em; }
.cn-nota > span { font-weight: 600; }
.cn-nota svg { display: block; width: 9.5em; overflow: visible; fill: var(--dlv-ambar-vivo); }

/* ---- o entregador (qr, lista, entrega, codigo, loja) ---- */
[data-cn-cena="qr"] .cn-p { height: 25em; }
[data-cn-cena="qr"] .cn-a { inset: 0 2.5em auto 0; min-height: 19em; translate: none; }
[data-cn-cena="qr"] .cn-jc { padding-right: 14em; }
.cn-qr { position: absolute; right: 2.6em; top: 4.6em; width: 9.5em; height: 9.5em; padding: .5em; border-radius: .9em; background: #fff; fill: var(--dlv-tinta); box-shadow: 0 0 0 1px var(--dlv-linha-2); }
.cn-leitor { right: 0; bottom: 0; align-items: center; justify-content: center; gap: .9em; width: 10.5em; height: 13.5em; background: var(--dlv-noite); }
.cn-mira { width: 4.8em; height: 4.8em; border-radius: 1em; border: .2em dashed var(--dlv-acao-vivo); }
[data-cn-cena="lista"] .cn-r { padding: .75em .85em; border: 0; border-radius: .8em; background: var(--dlv-papel); box-shadow: 0 0 0 1px var(--dlv-linha-2); color: var(--dlv-tinta); font-weight: 600; }
[data-cn-cena="lista"] .cn-r em { padding: .1em .6em; border-radius: 999px; background: var(--dlv-nevoa); font-size: .9em; }
[data-cn-cena="entrega"] .cn-h { order: -2; }
[data-cn-cena="entrega"] .cn-a .cn-f { order: -1; margin: .2em 0 .5em; background: var(--dlv-papel); color: var(--dlv-tinta); box-shadow: inset 0 0 0 1px var(--dlv-linha-forte); }
.cn-mapinha { position: absolute; right: .5em; top: 9em; width: 11em; padding: .45em; }
.cn-mapinha svg { display: block; border-radius: .6em; background: var(--dlv-nevoa); }
.cn-rua { fill: none; stroke: var(--dlv-papel); stroke-width: 5; }
.cn-mapinha .cn-rota { stroke-width: 2.4; }
.cn-mapinha .cn-ponta { stroke-width: 2; }
[data-cn-cena="codigo"] .cn-jc { grid-template-columns: 1fr 1fr; }
[data-cn-cena="codigo"] .cn-cod { grid-column: 1 / -1; justify-content: center; margin-block: 2.2em 1.6em; }
[data-cn-cena="codigo"] .cn-r { justify-content: center; padding: .7em .2em; border: 0; border-radius: .75em; background: var(--dlv-papel); box-shadow: inset 0 0 0 1px var(--dlv-linha-forte); font-size: .8em; font-weight: 600; text-align: center; color: var(--dlv-tinta); }
[data-cn-cena="codigo"] .cn-r + .cn-r { color: var(--dlv-erro); }
.cn-solto { position: absolute; right: 1.2em; top: 10.5em; }
[data-cn-cena="loja"] .cn-jb .cn-pt { margin: 0 0 0 .3em; background: var(--dlv-verde); }
[data-cn-cena="loja"] .cn-jb .cn-pt::after { border-color: var(--dlv-verde); }
[data-cn-cena="loja"] .cn-f { background: var(--dlv-ambar-suave); color: var(--dlv-ambar); }

/* ---- o caixa (abrir, lanca, mov, contar, dia) ---- */
[data-cn-cena="contar"] .cn-h { order: 1; justify-self: stretch; margin-top: .3em; padding: .65em .9em; border-radius: .75em; background: var(--dlv-rosa-suave); color: var(--dlv-erro); font-size: 1.2em; }
[data-cn-cena="contar"] .cn-f { order: 2; background: var(--dlv-tinta); }
[data-cn-cena="contar"] .cn-r:last-of-type { padding: .7em .85em; border: 0; border-radius: .7em; box-shadow: inset 0 0 0 1px var(--dlv-linha-forte); }
[data-cn-cena="dia"] .cn-h { font-size: 2.2em; font-variant-numeric: tabular-nums; }
[data-cn-cena="dia"] .cn-r { flex-wrap: wrap; row-gap: .45em; }
[data-cn-cena="dia"] .cn-bar { flex: 0 0 100%; max-width: var(--w); }
[data-cn-cena="codigo"] .cn-a { top: 3.5em; bottom: 3.5em; }
:is([data-cn-cena="lanca"], [data-cn-cena="dia"], [data-cn-cena="mov"]) .cn-f { background: var(--dlv-verde-suave); color: var(--dlv-verde); border-radius: 999px; padding: .3em .9em; font-size: .85em; }
[data-cn-cena="mov"] .cn-f { background: var(--dlv-nevoa); color: var(--dlv-sec); }

@media (prefers-reduced-motion: no-preference) {
  html.dlv-vivo .cn-som i { animation: cn-som .9s ease-in-out infinite alternate; }
  html.dlv-vivo .cn-som i:nth-child(2) { animation-delay: -.3s; }
  html.dlv-vivo .cn-som i:nth-child(3) { animation-delay: -.6s; }
  .dlv-pausa .cn-som i { animation-play-state: paused; }
}
@keyframes cn-som { from { scale: 1 .3 } to { scale: 1 1 } }

/* =============== as telas das sete etapas de /como-funciona ===============
   CenaTela.vue, tipos cf0 a cf6: a janela com a peça da etapa e, à direita, um detalhe desenhado só com formas (quatro
   <i>): a conversa por vídeo, as cores da marca, o desenho do site, a carga, a comanda de teste, o endereço no ar e a
   medição do depois. */
[data-cn-cena^="cf"] .cn-jc { padding-right: 14em; }
[data-cn-cena^="cf"] .cn-f { border-radius: 999px; padding: .35em 1em; background: var(--dlv-verde-suave); color: var(--dlv-verde); font-size: .85em; }
[data-cn-cena^="cf"] .cn-r { padding-left: 1.5em; position: relative; }
[data-cn-cena^="cf"] .cn-r::before { content: ""; position: absolute; left: .25em; top: .65em; width: .35em; height: .65em; border: solid var(--dlv-verde); border-width: 0 .16em .16em 0; rotate: 45deg; }
.cn-w { position: absolute; right: 1.3em; top: 4.5em; width: 11.2em; height: 12em; display: grid; gap: .6em; align-content: start; }
.cn-w i { display: block; border-radius: .7em; background: var(--dlv-nevoa); }
/* 01 demonstração: duas pessoas na chamada */
[data-w="cf0"] { grid-template-columns: 1fr 1fr; }
[data-w="cf0"] i { position: relative; height: 6.4em; background: var(--dlv-ceu); }
[data-w="cf0"] i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.4em; height: 2.4em; margin: -1.2em; border-radius: 50%; background: var(--dlv-acao); }
[data-w="cf0"] i:nth-child(2)::after { background: var(--dlv-verde); }
[data-w="cf0"] i:nth-child(n+3) { height: 1em; background: var(--dlv-linha-2); }
[data-w="cf0"] i:nth-child(3) { width: 60%; }
/* 02 discovery: as cores e a logo */
[data-w="cf1"] { grid-template-columns: 1fr 1fr; }
[data-w="cf1"] i { height: 5em; background: var(--dlv-acao); }
[data-w="cf1"] i:nth-child(2) { background: var(--dlv-ambar-vivo); }
[data-w="cf1"] i:nth-child(3) { background: var(--dlv-verde); }
[data-w="cf1"] i:nth-child(4) { background: var(--dlv-tinta); }
/* 03 desenho: a home em blocos */
[data-w="cf2"] { grid-template-columns: 1fr 1fr; padding: .7em; border-radius: .9em; box-shadow: inset 0 0 0 1px var(--dlv-linha-forte); }
[data-w="cf2"] i:nth-child(1) { grid-column: 1 / -1; height: 1em; width: 45%; background: var(--dlv-linha-2); }
[data-w="cf2"] i:nth-child(2) { grid-column: 1 / -1; height: 4.4em; background: var(--dlv-acao); }
[data-w="cf2"] i:nth-child(n+3) { height: 3em; }
/* 04 carga: as barras enchem */
[data-w="cf3"] { gap: 1.1em; padding-top: .6em; }
[data-w="cf3"] i { height: .8em; border-radius: 999px; background: var(--dlv-acao); }
[data-w="cf3"] i:nth-child(2) { width: 82%; background: var(--dlv-verde); }
[data-w="cf3"] i:nth-child(3) { width: 64%; background: var(--dlv-ambar-vivo); }
[data-w="cf3"] i:nth-child(4) { width: 90%; }
/* 05 testes: a comanda de teste */
[data-w="cf4"] { width: 8.5em; right: 2.6em; height: auto; padding: 1em .9em 1.4em; background: #fff; box-shadow: var(--dlv-sombra-leve); border-bottom: .3em dotted var(--dlv-linha-forte); }
[data-w="cf4"] i { height: .6em; border-radius: 999px; background: var(--dlv-linha-forte); }
[data-w="cf4"] i:nth-child(1) { height: 1em; width: 55%; background: var(--dlv-tinta); }
[data-w="cf4"] i:nth-child(3) { width: 70%; }
[data-w="cf4"] i:nth-child(4) { width: 40%; }
/* 06 no ar: o endereço, a página e o primeiro pedido */
[data-w="cf5"] i:nth-child(1) { height: 1.7em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--dlv-linha-forte); background: var(--dlv-papel) radial-gradient(circle at .9em 50%, var(--dlv-verde) .3em, transparent .34em); }
[data-w="cf5"] i:nth-child(2) { height: 5.2em; background: var(--dlv-ceu); }
[data-w="cf5"] i:nth-child(3) { height: 2.2em; width: 75%; justify-self: end; background: var(--dlv-acao); }
[data-w="cf5"] i:nth-child(4) { display: none; }
/* 07 acompanhamento: o antes e o depois */
[data-w="cf6"] { grid-template-columns: repeat(4, 1fr); align-items: end; align-content: end; height: 11em; border-bottom: 1px solid var(--dlv-linha-forte); }
[data-w="cf6"] i { height: 5em; border-radius: .5em .5em 0 0; background: var(--dlv-linha-forte); }
[data-w="cf6"] i:nth-child(2) { height: 7.2em; }
[data-w="cf6"] i:nth-child(3) { height: 6em; background: var(--dlv-acao-vivo); }
[data-w="cf6"] i:nth-child(4) { height: 8.6em; background: var(--dlv-acao); }

/* =============== clientes, fidelidade, avaliação e configuração (CenaTela.vue) =============== */
.cn .pc-chave { position: relative; top: auto; right: auto; flex: none; display: block; width: 2.1em; height: 1.15em; border-radius: 999px; background: var(--dlv-verde); }
.cn .pc-chave::after { right: .16em; top: .16em; width: .83em; height: .83em; }
[data-cn-cena="ajuste"] .cn-f { border-radius: 999px; padding: .3em .9em; background: var(--dlv-verde-suave); color: var(--dlv-verde); font-size: .85em; }
[data-cn-cena="conta"] .cn-cod { justify-content: center; gap: .25em; margin-block: 1.4em .6em; }
[data-cn-cena="conta"] .cn-cod b { width: 1.45em; height: 1.9em; font-size: 1.1em; }
[data-cn-cena="conta"] .cn-f { order: -1; margin: 0 0 .6em; background: var(--dlv-acao); }
[data-cn-cena="conta"] .cn-cod { order: -2; }
.cn-selos { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6em; max-width: 17em; margin-block: .3em .5em; }
.cn-selos i { aspect-ratio: 1; border-radius: 50%; border: .14em dashed var(--dlv-linha-forte); }
.cn-selos i[data-on] { border: 0; background: var(--dlv-acao); }
.cn-estrelas { display: block; width: 10em; overflow: visible; fill: var(--dlv-ambar-vivo); }
[data-cn-cena="nota"] .cn-r:last-of-type { padding: .7em .85em; border: 0; border-radius: .2em .9em .9em .9em; background: var(--dlv-acao-suave); color: var(--dlv-tinta); }
[data-cn-cena="clientes"] .cn-r em, [data-cn-cena="cliente"] .cn-r:last-of-type em { padding: .1em .6em; border-radius: 999px; background: var(--dlv-acao-suave); color: var(--dlv-acao); font-size: .9em; }
:is([data-cn-cena="clientes"], [data-cn-cena="cliente"], [data-cn-cena="cartela"]) .cn-f { background: var(--dlv-papel); color: var(--dlv-tinta); box-shadow: inset 0 0 0 1px var(--dlv-linha-forte); }
[data-cn-cena="cartela"] .cn-f { border-radius: 999px; padding: .3em .9em; background: var(--dlv-verde-suave); color: var(--dlv-verde); box-shadow: none; font-size: .85em; }
#clientes.pg-solo { background: var(--dlv-papel); }

/* =============== rodada 6: celular com proporção de aparelho (recorte da câmera, canto generoso) =============== */
:is(.cn-a.cn-c, .fx-cel, .cn-leitor) { border-width: .36em; border-radius: 2.3em; }
:is(.cn-a.cn-c, .fx-cel, .cn-leitor)::before { content: ""; position: absolute; z-index: 2; left: 50%; top: .45em; width: 3.4em; height: .8em; margin-left: -1.7em; border-radius: 999px; background: var(--dlv-tinta); }
.cn-a.cn-c { left: 11.25em; width: 13.5em; }
.cn-a.cn-c > .cn-jb { height: 4.4em; padding-top: 1.5em; }
.cn-a.cn-c .cn-jc { padding-bottom: 3.4em; }
.fx-abas { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; padding: .75em 0 .85em; border-top: 1px solid var(--dlv-linha-2); background: var(--dlv-papel); text-align: center; font-weight: 600; color: var(--dlv-sec-2); }
.fx-abas b { color: var(--dlv-acao); }
.cn-leitor::before { background: #000; }
[data-cn-cena="qr"] .cn-p { height: 27em; }
[data-cn-cena="qr"] .cn-a { inset: 0 5em auto 0; min-height: 20em; }
[data-cn-cena="qr"] .cn-qr { right: 2.4em; top: 7.2em; }
.cn-leitor { width: 9.6em; height: 20.4em; }
.cn-a.cn-c .cn-f { font-size: .92em; }

/* =============== a entrega em três aparelhos (components/dlv/CenaFluxo.vue) ===============
   Palco próprio de 46,5 × 29,5 em: o painel da loja e o mapa à esquerda, o celular do entregador e o do cliente à direita,
   cada um com 9 por 19,5. Em peça estreita (celular) o palco vira 27 × 39 em: painel e mapa em cima, os dois
   celulares embaixo, lado a lado. */
.cn-p.fx { width: 46.5em; height: 29.5em; font-size: min(100cqi / 46.5, 14px); }
.fx-painel { inset: 1.4em auto auto 0; width: 18.5em; }
.fx:not([data-mapa]) .fx-painel { top: 8em; }
.fx-painel .cn-jb { height: 2.9em; font-size: .85em; }
.fx-pedido { display: grid; gap: .6em; padding: .9em 1em 1em; }
.fx-pedido > small { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; font-size: .9em; color: var(--dlv-sec); white-space: nowrap; }
.fx-pedido > small b { color: var(--dlv-tinta); font-size: 1.15em; }
.fx-pedido > small em { margin-left: auto; }
.fx-pedido .cn-b { justify-self: stretch; padding-block: .55em; font-size: .85em; }
.fx-pedido .cn-r { padding: .55em 0 0; font-size: .85em; }
.fx-pedido .cn-r em { color: var(--dlv-verde); }
.fx-mapa { position: absolute; left: 0; bottom: 1.4em; width: 18.5em; padding: .5em; gap: .45em; }
.fx-mapa svg { display: block; border-radius: .6em; background: var(--dlv-nevoa); }
.fx-mapa .cn-rua { stroke-width: 9; }
.fx-mapa small { display: flex; align-items: center; justify-content: space-between; gap: .4em; padding-inline: .2em; font-weight: 600; color: var(--dlv-sec); }
.fx-mapa .dlv-lanc { font-size: .9em; padding: .1em .55em; }
.fx-cel { gap: .55em; width: 16.2em; height: 35.1em; padding: 0 .6em 3.3em; font-size: .8em; }
.fx-ent { left: 24.6em; top: 0; }
.fx-cli { left: 41.75em; top: 1.2em; padding-bottom: .8em; }
.fx-topo { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .4em; white-space: nowrap; margin-inline: -.6em; padding: 2em .8em .65em; border-bottom: 1px solid var(--dlv-linha); background: var(--dlv-papel); color: var(--dlv-sec); }
.fx-topo b { font-family: var(--font-marca); font-size: 1.3em; color: var(--dlv-tinta); }
.fx-topo em { margin-left: auto; }
.fx-topo .cn-s { font-size: .82em; }
.fx-envia { display: flex; align-items: center; font-weight: 600; color: var(--dlv-verde); }
.fx-envia .cn-pt { margin: 0 .75em 0 .4em; background: var(--dlv-verde); }
.fx-envia .cn-pt::after { border-color: var(--dlv-verde); }
.fx-cel .cn-k { gap: .3em; padding: .7em .8em; box-shadow: 0 0 0 1px var(--dlv-linha-2); }
.fx-cel .cn-k small { color: var(--dlv-sec); }
.fx-cel .cn-k b { font-size: 1.05em; font-weight: 600; line-height: 1.3; }
.fx-rota { justify-self: stretch; margin-top: .3em; padding-block: .5em; background: var(--dlv-papel); color: var(--dlv-tinta); box-shadow: inset 0 0 0 1px var(--dlv-linha-forte); }
.fx-cel .cn-cod { justify-content: center; gap: .4em; margin-top: .2em; }
.fx-cel .cn-cod b { width: 2em; height: 2.3em; font-size: 1.25em; }
.fx-acao { margin-top: auto; }
.fx-acao > * { justify-self: stretch; }
.fx-acao .cn-b { padding-block: .8em; background: var(--dlv-tinta); }
.fx-acao .cn-ok { justify-content: center; font-size: 1em; }
.fx-linha { display: grid; gap: .55em; margin: .3em 0 .2em .5em; padding: 0; list-style: none; font-weight: 600; }
.fx-linha li { position: relative; padding-left: 1.5em; }
.fx-linha li::before { content: ""; position: absolute; left: 0; top: .2em; width: .85em; height: .85em; border-radius: 50%; background: var(--dlv-verde); box-shadow: 0 0 0 .2em var(--dlv-verde-suave); }
.fx-linha li + li::after { content: ""; position: absolute; left: .36em; bottom: 100%; width: .13em; height: .6em; background: var(--dlv-verde); }
.fx-cli .cn-k { margin-top: .3em; text-align: center; }
.fx-cli .cn-k b { font-size: 1.15em; }
.fx-cli .fx-end { text-align: left; }
.fx-cli .fx-end b { font-size: 1.05em; }
.fx-cli .cn-cod b { width: 1.9em; height: 2.3em; font-size: 1.3em; box-shadow: inset 0 0 0 .12em var(--dlv-acao); color: var(--dlv-acao); }
.fx-cli > .cn-ok { align-self: center; margin-top: auto; margin-bottom: 1.2em; }
@container (width < 27rem) {
  .cn-p.fx { width: 27em; height: 40.2em; font-size: calc(100cqi / 27); }
  .fx-painel, .fx:not([data-mapa]) .fx-painel { top: 0; width: 16.5em; font-size: .8em; }
  .fx:not([data-mapa]) .fx-painel { width: 33.75em; }
  .fx-mapa { left: auto; right: 0; top: 0; bottom: auto; width: 13.2em; }
  .fx-cel { top: 14.1em; width: 16.5em; height: 36em; }
  .fx-ent { left: 0; }
  .fx-cli { left: auto; right: 0; top: 14.1em; }
}

/* =============== a janela do caixa com a casca da tela real (CenaTela.vue, cx) =============== */
.cn-abas { flex: none; display: flex; gap: 1.3em; padding: .75em 1.3em 0; border-bottom: 1px solid var(--dlv-linha); font-weight: 600; color: var(--dlv-sec-2); }
.cn-abas i { font-style: normal; }
.cn-abas b { padding-bottom: .55em; color: var(--dlv-tinta); box-shadow: inset 0 -.16em var(--dlv-tinta); }
.cn-nums { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .8em 1.3em 0; border-radius: .8em; box-shadow: 0 0 0 1px var(--dlv-linha-2); }
.cn-nums span { display: grid; gap: .1em; padding: .6em .8em; }
.cn-nums span + span { border-left: 1px solid var(--dlv-linha-2); }
.cn-nums small { color: var(--dlv-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-nums b { font-family: var(--font-marca); font-size: 1.3em; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-nums span:last-child b { color: var(--dlv-acao); }
.cn-acoes { flex: none; display: flex; gap: .5em; margin: .7em 1.3em 0; font-size: .92em; font-weight: 600; }
.cn-acoes :is(i, b) { padding: .5em .8em; border-radius: .6em; box-shadow: inset 0 0 0 1px var(--dlv-linha-forte); white-space: nowrap; }
.cn-acoes b { margin-left: auto; background: var(--dlv-tinta); color: #fff; box-shadow: none; }
.cn-lt { font-weight: 700; color: var(--dlv-tinta); }
.cn-p[data-cx] { height: 28em; }
/* a conferência é cega: o esperado só aparece na lista, depois da contagem; o relatório do dia não é de um turno */
[data-cn-cena="contar"] .cn-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-cn-cena="contar"] .cn-nums span:last-child, [data-cn-cena="dia"] .cn-nums { display: none; }
[data-cn-cena="contar"] .cn-p[data-cx] .cn-jc > p:nth-of-type(3) { padding-inline: .8em; }
[data-cn-cena="dia"] .cn-p[data-cx] .cn-r > span { flex: 1; }
.cn-p[data-cx] .cn-a.cn-j { min-height: 0; }
.cn-p[data-cx] .cn-jc { gap: .3em; padding: .8em 1.3em 1em; }
.cn-p[data-cx] .cn-r { padding: .42em 0; }
.cn-p[data-cx] .cn-r > span { color: var(--dlv-tinta); font-weight: 600; }
.cn-r > span > small { display: block; font-weight: 400; color: var(--dlv-sec-2); }
:is([data-cn-cena="lanca"], [data-cn-cena="mov"], [data-cn-cena="abrir"]) .cn-p[data-cx] .cn-h { display: none; }
.cn-p[data-cx] .cn-r em { color: var(--dlv-verde); }
.cn-p[data-cx] .cn-r em[data-neg] { color: var(--dlv-erro); }
:is([data-cn-cena="contar"], [data-cn-cena="dia"]) .cn-p[data-cx] .cn-r em { color: var(--dlv-tinta); }

/* =============== a tela de Pedidos da abertura (components/dlv/PainelFila.vue) ===============
   A casca do painel (trilho, barra lateral, topo), o título com a faixa ao vivo, as abas e a fila em quatro colunas.
   56 × 38 em, letra pela largura da peça; no celular saem o trilho e a barra, a tela fica com 42 × 36 em e passa da
   borda direita (a quarta coluna aponta, como numa tela que rola de lado). As mesmas proporções estão em
   CSS_ANTES_DAS_CENAS (utils/dlv-liga.ts), que guarda o lugar da peça antes de esta folha chegar. */
.pf { container-type: inline-size; visibility: visible; animation: pf-surge .5s ease both; }
@keyframes pf-surge { from { opacity: 0 } }
.pf-p { position: relative; display: grid; grid-template-columns: 3.2em 9em minmax(0, 1fr); width: 56em; height: 38em; font-size: calc(100cqi / 56); line-height: 1.3; color: var(--dlv-tinta); text-align: left; border-radius: 1.2em; background: var(--dlv-papel); box-shadow: var(--dlv-sombra), 0 0 0 1px rgba(14, 52, 132, .1); overflow: hidden; }
.pf-p :is(small, em, i, u, b, span) { font-style: normal; text-decoration: none; }
.pf-p small { font-size: .82em; }
.pf-trilho { display: grid; align-content: start; justify-items: center; gap: .9em; padding-top: 1em; background: var(--dlv-nevoa); border-right: 1px solid var(--dlv-linha); }
.pf-trilho b { width: 2.3em; height: 2.3em; margin-bottom: .4em; border-radius: .65em; background: var(--dlv-tinta); }
.pf-trilho i { width: 1.7em; height: 1.7em; border-radius: .5em; background: var(--dlv-linha-2); }
.pf-trilho i[data-on] { background: var(--dlv-papel); box-shadow: 0 0 0 1px var(--dlv-linha-forte), inset 0 0 0 .4em var(--dlv-acao-suave); }
.pf-barra { display: grid; align-content: start; gap: .15em; padding: 1.2em .45em; border-right: 1px solid var(--dlv-linha); }
.pf-barra > b { padding: 0 .5em .7em; font-size: .92em; font-weight: 600; white-space: nowrap; }
.pf-barra span { display: flex; align-items: center; padding: .5em; border-radius: .55em; color: var(--dlv-sec); }
.pf-barra span[data-on] { background: var(--dlv-nevoa); color: var(--dlv-tinta); font-weight: 600; }
.pf-barra em, .pf-abas em, .pf-cols em { margin-left: auto; min-width: 1.6em; padding: .05em .4em; border-radius: 999px; background: var(--dlv-nevoa); text-align: center; font-size: .82em; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-barra em { background: var(--dlv-tinta); color: #fff; }
.pf-miolo { min-width: 0; padding: .9em 1.2em 1.1em; }
.pf-topo { display: flex; align-items: center; justify-content: flex-end; gap: .9em; }
.pf-topo span { width: 13em; height: 2.1em; border-radius: .6em; box-shadow: inset 0 0 0 1px var(--dlv-linha-2); }
.pf-topo i { width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--dlv-linha-2); }
.pf-topo i[data-sino] { background: var(--dlv-papel); box-shadow: inset 0 0 0 .14em var(--dlv-sec), .45em -.4em 0 -.28em var(--dlv-acao); }
.pf-titulo { display: grid; gap: .25em; margin-top: .1em; }
.pf-titulo b { font-family: var(--font-marca); font-size: 1.75em; font-weight: 600; line-height: 1.1; }
.pf-titulo small { display: flex; align-items: center; color: var(--dlv-sec); }
.pf-titulo .cn-pt { margin: 0 .75em 0 .4em; background: var(--dlv-verde); }
.pf-titulo .cn-pt::after { border-color: var(--dlv-verde); }
.pf-abas { display: flex; gap: 1.5em; margin-top: 1em; border-bottom: 1px solid var(--dlv-linha); color: var(--dlv-sec); }
.pf-abas :is(b, span) { display: flex; align-items: center; gap: .5em; padding-bottom: .6em; font-weight: 600; }
.pf-abas b { box-shadow: inset 0 -.16em var(--dlv-tinta); color: var(--dlv-tinta); }
.pf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; margin-top: 1em; }
.pf-cols span { display: flex; align-items: center; gap: .45em; font-weight: 600; white-space: nowrap; }
.pf-cols span::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--qc); }
.pf-cols em { margin-left: .2em; }
.pf [data-col="0"] { --qc: var(--dlv-acao); }
.pf [data-col="1"] { --qc: var(--dlv-ambar-vivo); }
.pf [data-col="2"] { --qc: var(--dlv-verde); }
.pf [data-col="3"] { --qc: var(--dlv-ia); }
.pf-pista { position: relative; height: 22.4em; margin-top: .6em; }
.pf-cartao { position: absolute; left: 0; top: 0; display: grid; grid-template-rows: auto auto 1fr auto auto; gap: .18em; width: calc((100% - 1.8em) / 4); height: calc((100% - .6em) / 2); padding: .65em .7em .7em; border-radius: .8em; border-top: .2em solid var(--qc); background: var(--dlv-papel); box-shadow: 0 .5em 1.2em -.8em rgba(14, 52, 132, .45), 0 0 0 1px rgba(14, 52, 132, .09); translate: calc(var(--c) * (100% + .6em)) calc(var(--l) * (100% + .6em)); transition: translate .9s var(--ease-solto), scale .45s var(--ease-solto), rotate .45s var(--ease-solto), opacity .35s ease, border-color .5s ease; }
.pf-cartao > small { font-size: .76em; display: flex; align-items: center; gap: .25em; color: var(--dlv-sec-2); white-space: nowrap; overflow: hidden; }
.pf-cartao > small b { color: var(--dlv-tinta); }
.pf-cartao > small em { flex: none; margin-left: auto; padding: .05em .45em; border-radius: 999px; background: var(--dlv-nevoa); font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-cartao > b { font-size: 1.08em; font-weight: 600; }
.pf-cartao > span { color: var(--dlv-sec); font-size: .92em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pf-cartao > p { display: flex; align-items: center; justify-content: space-between; gap: .4em; }
.pf-cartao > p b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-cartao > p i { padding: .05em .5em; border-radius: 999px; background: var(--dlv-verde-suave); color: var(--dlv-verde); font-size: .74em; font-weight: 600; white-space: nowrap; }
.pf-cartao u { display: none; margin-top: .25em; padding: .38em; border-radius: .5em; text-align: center; font-size: .9em; font-weight: 600; }
.pf-cartao[data-col="0"] u[data-a] { display: block; background: var(--dlv-acao); color: #fff; }
.pf-cartao:not([data-col="0"]) u[data-v] { display: block; box-shadow: inset 0 0 0 1px var(--dlv-linha-forte); }
.pf-cartao[data-anda] { z-index: 2; scale: 1.05; rotate: 1.5deg; }
.pf-cartao[data-sai] { opacity: 0; transition: opacity .35s ease; }
.pf-cartao[data-novo] { animation: pc-novo 1.2s ease-out; }
.pf-aviso { position: absolute; right: 1.3em; top: 3.6em; z-index: 3; display: flex; align-items: center; gap: .6em; padding: .75em 1.1em; border-radius: .8em; border-left: .28em solid var(--dlv-ambar-vivo); background: var(--dlv-papel); box-shadow: var(--dlv-sombra-leve), 0 0 0 1px rgba(14, 52, 132, .08); font-weight: 600; opacity: 0; translate: 0 -.8em; transition: opacity .35s ease, translate .5s var(--ease-solto); }
.pf-aviso i { width: 1.5em; height: 1.5em; border-radius: .45em; background: var(--dlv-ambar-suave); box-shadow: inset 0 0 0 .4em var(--dlv-ambar-suave), inset 0 0 0 .55em var(--dlv-ambar-vivo); }
.pf-aviso[data-on] { opacity: 1; translate: 0 0; }
.pf-pista .cn-x { font-size: 1.15em; }
@media (prefers-reduced-motion: no-preference) {
  .pf[data-entra] .pf-cartao { animation: pf-entra .6s var(--ease-solto) backwards; }
  .pf[data-entra] .pf-cartao:nth-child(2) { animation-delay: .08s; }
  .pf[data-entra] .pf-cartao:nth-child(3) { animation-delay: .16s; }
  .pf[data-entra] .pf-cartao:nth-child(4) { animation-delay: .24s; }
  .pf[data-entra] .pf-cartao:nth-child(5) { animation-delay: .32s; }
  .pf[data-entra] .pf-cartao:nth-child(6) { animation-delay: .4s; }
}
@keyframes pf-entra { from { opacity: 0; scale: .92 } }
/* perspectiva leve: a profundidade vem do .pg-pd-cena (1800px) */
@media (width >= 64rem) { .pf-p { transform: rotateY(-5deg); transform-origin: 0 50%; } }
@media (width < 64rem) {
  .pf-p { grid-template-columns: minmax(0, 1fr); width: 42em; height: 36em; font-size: calc(100cqi / 42); }
  .pf-trilho, .pf-barra, .pf-topo { display: none; }
  .pf-miolo { padding: 1em 1em 1.1em; }
  .pf-pista { height: 24em; }
  .pf-aviso { left: 12.5em; right: auto; top: .45em; padding: .5em .9em; }
}


/* =============== o painel de hoje em HTML (rodada 8, 16/10/2026) ===============
   components/dlv/PainelDemo.vue (a casca do painel v2 e nove telas) e components/dlv/Construtor.vue (o construtor novo).
   A peça é contêiner: a janela tem 96 em de largura (58,4 de altura) e a letra sai da largura (cqi); abaixo de 44rem de
   largura somem o trilho e a barra do módulo e a letra cresce. Qual tela aparece: data-tela na peça ou num ancestral.
   O movimento é laço de CSS só com [data-pd-vivo] num ancestral (vigiarDemo em utils/dlv-liga.ts); sem ele, o estado final. Cores do
   painel (assets/css/painel-casca.css, --pn-* e --st-*) e a cor da loja de exemplo no botão principal. */
/* o lugar da janela é a proporção dela (a mesma do CSS de antes, utils/dlv-liga.ts), e o miolo só é desenhado perto da tela
   (content-visibility): as nove telas da home custavam mais de 1 s de estilo e layout no Lighthouse do celular */
.pd, .pc5 { visibility: visible; container-type: inline-size; content-visibility: auto; overflow: hidden; }
.pd { aspect-ratio: 96 / 48.4; }
.pd-curta { aspect-ratio: 78 / 48.4; }
.pc5 { aspect-ratio: 96 / 47.8; }
@media (max-width: 47.99rem) { .pd, .pd-curta { aspect-ratio: 40 / 48.4; } .pc5 { aspect-ratio: 40 / 45.8; } }
.pd-j { --pn-f: #f6f6f7; --pn-l: #ebebee; --pn-l2: #dddde1; --pn-t: #1f2023; --pn-t2: #5c5e66; --pn-tr: #f2f2f4; --pd-ac: #C8470D;
  position: relative; font: 400 calc(100cqi / 96) / 1.35 var(--font-texto, Inter, system-ui, sans-serif); color: var(--pn-t); background: var(--pn-f);
  border-radius: .9em; overflow: hidden; box-shadow: 0 2.4em 5em -2.4em rgba(20, 12, 8, .45), 0 0 0 1px rgba(31, 32, 35, .08); text-align: left; }
.pd-j * { box-sizing: border-box; }
.pd-j :where(p, h4, ol, small, b) { margin: 0; }
.pd-j ol { list-style: none; padding: 0; }
.pd-j u { text-decoration: none; }
.pd-j svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pd-sprite { position: absolute; width: 0 !important; height: 0 !important; }
.pd-cromo { display: flex; align-items: center; gap: .45em; height: 2.4em; padding: 0 1em; background: #fff; border-bottom: 1px solid var(--pn-l); }
.pd-cromo i { width: .65em; height: .65em; border-radius: 50%; background: #dadade; }
.pd-cromo b { flex: 1; margin-right: 3em; text-align: center; font-size: .72em; font-weight: 500; color: var(--pn-t2); }
.pd-casca { display: grid; grid-template-columns: 4.8em 15em minmax(0, 1fr); height: 46em; }
/* sem a casca (seções de baixo das páginas de produto): a tela ocupa a janela e a letra acompanha */
.pd-curta .pd-j { font-size: calc(100cqi / 78); }
.pd-curta .pd-casca { grid-template-columns: minmax(0, 1fr); }
.pd-tr { display: flex; flex-direction: column; align-items: center; gap: .55em; padding-top: .8em; background: var(--pn-tr); border-right: 1px solid var(--pn-l); }
.pd-logo { display: grid; place-items: center; width: 2.6em; height: 2.6em; margin-bottom: .6em; border-radius: .7em; background: var(--pd-ac); color: #fff; font-size: 1.05em; font-weight: 800; }
.pd-tr > span { display: grid; justify-items: center; gap: .2em; width: 4em; padding: .45em 0; border-radius: .6em; font-size: .6em; font-weight: 500; color: var(--pn-t2); }
.pd-tr > span svg { width: 2.1em; height: 2.1em; }
.pd-bm { display: flex; flex-direction: column; padding: 1em .8em; background: #fbfbfb; border-right: 1px solid var(--pn-l); overflow: hidden; }
.pd-marca { padding: .1em .55em .9em; font-size: 1.05em; }
.pd-marca b { font-weight: 800; letter-spacing: -.01em; }
.pd-mod { padding: 0 .55em .6em; font-size: .86em; font-weight: 700; }
.pd-bm small { display: block; padding: .9em .65em .35em; font-size: .72em; color: var(--pn-t2); }
.pd-bm span { display: flex; align-items: center; gap: .6em; padding: .42em .55em; border-radius: .55em; font-size: .82em; color: #2c2d31; }
.pd-bm span em { margin-left: auto; display: grid; place-items: center; min-width: 1.5em; height: 1.5em; border-radius: 999px; background: #b42318; color: #fff; font-style: normal; font-size: .8em; font-weight: 700; }
.pd-bm-a, .pd-bm-g { display: none; }
.pd-quem { margin-top: auto; display: flex; align-items: center; gap: .6em; padding: .8em .4em 0; border-top: 1px solid var(--pn-l); }
.pd-quem i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #e4e4e8; font-style: normal; font-size: .72em; font-weight: 700; }
.pd-quem b { display: block; font-size: .78em; }
.pd-quem small { padding: 0 !important; font-size: .7em; }
[data-tela="atendimento"] .pd-bm-d, [data-tela="agentes"] .pd-bm-d { display: none; }
[data-tela="atendimento"] .pd-bm-a, [data-tela="agentes"] .pd-bm-g { display: block; }
.pd-tr > span[data-m="1"], [data-tela="atendimento"] .pd-tr > span[data-m="2"], [data-tela="agentes"] .pd-tr > span[data-m="3"] { background: #fff; color: var(--pn-t); box-shadow: 0 1px 2px rgba(31, 32, 35, .08); }
:is([data-tela="atendimento"], [data-tela="agentes"]) .pd-tr > span[data-m="1"] { background: none; color: var(--pn-t2); box-shadow: none; }
[data-tela="pedidos"] [data-i="pedidos"], [data-tela="cardapio"] [data-i="cardapio"], [data-tela="promocoes"] [data-i="promocoes"],
[data-tela="entregadores"] [data-i="entregadores"], [data-tela="caixa"] [data-i="caixa"], [data-tela="fidelidade"] [data-i="fidelidade"],
[data-tela="avaliacoes"] [data-i="avaliacoes"], [data-tela="atendimento"] [data-i="atendimento"], [data-tela="agentes"] [data-i="agentes"] { background: #fbe9df; color: #8f330a; font-weight: 600; }
.pd-m { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.pd-topo { display: flex; align-items: center; gap: 1.1em; flex: none; height: 3.6em; padding: 0 1.6em; border-bottom: 1px solid var(--pn-l); }
.pd-trilha { flex: 1; font-size: .8em; color: var(--pn-t2); }
.pd-trilha > span { display: none; }
.pd-trilha > .pd-tm-d { display: inline; }
:is([data-tela="atendimento"], [data-tela="agentes"]) .pd-trilha > .pd-tm-d { display: none; }
[data-tela="atendimento"] .pd-trilha > .pd-tm-a, [data-tela="agentes"] .pd-trilha > .pd-tm-g { display: inline; }
.pd-busca { display: flex; align-items: center; gap: .5em; width: 17em; padding: .45em .7em; border: 1px solid var(--pn-l2); border-radius: .6em; background: #fff; font-size: .78em; color: var(--pn-t2); }
.pd-busca kbd { margin-left: auto; padding: .05em .4em; border: 1px solid var(--pn-l2); border-radius: .3em; font: inherit; font-size: .85em; }
.pd-sino { color: var(--pn-t2); }
.pd-ver { display: flex; align-items: center; gap: .4em; font-size: .8em; font-weight: 500; }
.pd-t { display: none; flex: 1; flex-direction: column; min-height: 0; padding: 1.6em 2em 0; overflow: hidden; position: relative; }
[data-tela="pedidos"] .pd-t[data-t="pedidos"], [data-tela="cardapio"] .pd-t[data-t="cardapio"], [data-tela="promocoes"] .pd-t[data-t="promocoes"],
[data-tela="entregadores"] .pd-t[data-t="entregadores"], [data-tela="caixa"] .pd-t[data-t="caixa"], [data-tela="fidelidade"] .pd-t[data-t="fidelidade"],
[data-tela="avaliacoes"] .pd-t[data-t="avaliacoes"], [data-tela="atendimento"] .pd-t[data-t="atendimento"], [data-tela="agentes"] .pd-t[data-t="agentes"] { display: flex; }
.pd-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5em; }
.pd-cab h4 { font-size: 1.65em; font-weight: 700; letter-spacing: -.02em; }
.pd-cab p { margin-top: .25em; max-width: 46em; font-size: .82em; color: var(--pn-t2); }
.pd-cab p span { margin-left: .3em; }
.pd-vivo { display: inline-block; width: .55em; height: .55em; margin-right: .4em; border-radius: 50%; background: #147a3d; }
.pd-bts { display: flex; align-items: center; gap: .55em; flex: none; }
.pd-bts > u, .pd-acoes u { display: inline-flex; align-items: center; padding: .5em .85em; border: 1px solid var(--pn-l2); border-radius: .6em; background: #fff; font-size: .78em; font-weight: 600; white-space: nowrap; }
.pd-j .pd-ic { width: 1.3em; height: 1.3em; color: var(--pn-t2); }
.pd-j [data-cor] { background: var(--pd-ac); border-color: var(--pd-ac); color: #fff; }
.pd-j [data-escuro] { background: #1f2023; border-color: #1f2023; color: #fff; }
.pd-j .pd-campo { min-width: 12em; color: var(--pn-t2); font-weight: 400; }
.pd-abas { display: flex; gap: 1.6em; margin-top: 1.1em; border-bottom: 1px solid var(--pn-l2); }
.pd-abas span { display: inline-flex; align-items: center; gap: .45em; padding: .55em 0 .7em; font-size: .82em; font-weight: 500; color: var(--pn-t2); white-space: nowrap; }
.pd-abas span[data-on] { color: var(--pn-t); font-weight: 600; box-shadow: inset 0 -2px 0 var(--pn-t); }
.pd-abas em { display: grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em; border-radius: 999px; background: #ececef; font-style: normal; font-size: .8em; font-weight: 600; }
.pd-abas em[data-pix] { background: #b42318; color: #fff; }
.pd-abas-p { gap: 1.2em; margin-top: .8em; }
.pd-caixa { background: #fff; border: 1px solid var(--pn-l); border-radius: .9em; padding: 1em 1.1em; }
.pd-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1em; margin-top: 1.1em; align-items: start; }
.pd-lt { display: flex; align-items: center; gap: .6em; justify-content: space-between; padding-bottom: .5em; font-size: .8em; }
.pd-lt small { color: var(--pn-t2); }
.pd-li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .8em; padding: .6em .2em; border-top: 1px solid var(--pn-l); }
.pd-li > span b { display: block; font-size: .84em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-li > span small, .pd-li > em { font-size: .74em; color: var(--pn-t2); font-style: normal; }
.pd-li[data-on] { background: #fbf6f2; border-radius: .5em; }
.pd-chave { position: relative; display: block; width: 2.3em; height: 1.3em; border-radius: 999px; background: #147a3d; }
.pd-chave::after { content: ""; position: absolute; top: .18em; right: .18em; width: .94em; height: .94em; border-radius: 50%; background: #fff; }
.pd-chave[data-off] { background: #c8c8cc; }
.pd-chave[data-off]::after { right: 1.18em; }
.pd-foto { display: block; width: 2.5em; height: 2.5em; border-radius: 50%; background: #f1c27d; box-shadow: inset 0 0 0 .28em #d78e3d, inset 0 0 0 .6em #f1c27d, inset 0 0 0 2em #e4572e; }
.pd-foto[data-k="1"] { box-shadow: inset 0 0 0 .28em #d78e3d, inset 0 0 0 .6em #f1c27d, inset 0 0 0 2em #f6e3a1; }
.pd-foto[data-k="2"] { box-shadow: inset 0 0 0 .28em #d78e3d, inset 0 0 0 .6em #f1c27d, inset 0 0 0 2em #7a3b1c; }
.pd-foto[data-k="3"] { background: #e9b46c; box-shadow: inset 0 0 0 .3em #c27a32; border-radius: .6em; }
.pd-foto[data-k="4"] { box-shadow: inset 0 0 0 .28em #d78e3d, inset 0 0 0 .6em #f1c27d, inset 0 0 0 2em #9fbf4a; }
.pd-j .pd-rot { margin-top: 1em; font-size: .78em; font-weight: 600; }
.pd-rot span { font-weight: 400; color: var(--pn-t2); }
.pd-selo-n { display: inline-flex; padding: .1em .5em; border-radius: 999px; background: #fde3d2; color: #24110a; font-size: .68em; font-weight: 700; }
.pd-bt { display: block; margin-top: .65em; padding: .55em .8em; border-radius: .55em; background: #f2f2f4; font-size: .8em; font-weight: 600; text-align: center; }
/* pedidos */
.pd-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9em; margin-top: 1em; }
.pd-col-t { display: flex; align-items: center; gap: .45em; font-size: .82em; font-weight: 600; }
.pd-col-t i { width: .55em; height: .55em; border-radius: 50%; background: #2456e6; }
.pd-col[data-c="1"] .pd-col-t i { background: #a15c07; }
.pd-col[data-c="2"] .pd-col-t i { background: #147a3d; }
.pd-col[data-c="3"] .pd-col-t i { background: #6b3fd4; }
.pd-col-t em { display: grid; place-items: center; min-width: 1.5em; height: 1.5em; border-radius: 999px; background: #e7e7ea; font-style: normal; font-size: .82em; }
.pd-card { margin-top: .7em; padding: .8em .85em; background: #fff; border-radius: .85em; box-shadow: 0 1px 2px rgba(31, 32, 35, .05), 0 0 0 1px rgba(31, 32, 35, .07); }
.pd-card[data-alerta] { box-shadow: inset .22em 0 0 #b42318, 0 0 0 1px rgba(31, 32, 35, .07); }
.pd-card-t { display: flex; align-items: center; gap: .45em; }
.pd-card-t b { font-size: 1.15em; font-weight: 800; letter-spacing: -.01em; }
.pd-modo { padding: .1em .5em; border: 1px solid var(--pn-l2); border-radius: 999px; font-size: .7em; }
.pd-card-t small { margin-left: auto; display: inline-flex; align-items: center; gap: .25em; font-size: .74em; color: var(--pn-t2); }
.pd-card[data-alerta] .pd-card-t small { color: #b42318; font-weight: 600; }
.pd-itens { margin-top: .45em; }
.pd-itens span { display: block; font-size: .8em; }
.pd-itens span[data-sub] { padding-left: 1em; font-size: .72em; color: var(--pn-t2); }
.pd-nota { display: flex; align-items: center; gap: .4em; margin-top: .5em; padding: .45em .6em; border-radius: .5em; background: #fff4dc; color: #7a4a06; font-size: .72em; }
.pd-ent { display: flex; align-items: center; gap: .4em; margin-top: .45em; font-size: .72em; color: var(--pn-t2); }
.pd-ent i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #ececef; font-style: normal; font-size: .85em; font-weight: 700; }
.pd-pg { display: flex; flex-wrap: wrap; align-items: center; gap: .35em .5em; margin-top: .55em; font-size: .7em; color: var(--pn-t2); }
.pd-pg > span:first-child { padding: .15em .5em; border-radius: .4em; background: #f2f2f4; color: var(--pn-t); }
.pd-pg > .pd-pix { background: #e2f5f8; color: #0b7285; }
.pd-pg > .pd-ok { background: #e6f6ec; color: #147a3d; }
.pd-pg b { margin-left: auto; font-size: 1.3em; font-weight: 800; color: var(--pn-t); }
/* cardápio */
.pd-editor .pd-ed-t { display: flex; align-items: center; gap: .7em; font-size: .95em; }
.pd-precos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; margin-top: .55em; }
.pd-precos p { display: grid; gap: .15em; padding: .55em .6em; border: 1px solid var(--pn-l2); border-radius: .6em; }
.pd-precos span { font-size: .7em; color: var(--pn-t2); }
.pd-precos b { font-size: .86em; }
.pd-op { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8em; align-items: center; padding: .55em 0; border-top: 1px solid var(--pn-l); margin-top: .5em; font-size: .8em; }
.pd-op em { font-style: normal; color: var(--pn-t2); }
.pd-op .pd-chave { font-size: 1.15em; }
.pd-j .pd-salvar { margin-top: 1em; width: 8em; margin-left: auto; }
/* promoções e sugestões */
.pd-promo { grid-template-columns: minmax(0, 1fr) auto auto; padding: .8em .3em; }
.pd-promo b em { margin-left: .35em; padding: .1em .5em; border-radius: 999px; background: #e6f6ec; color: #147a3d; font-style: normal; font-size: .82em; font-weight: 500; }
.pd-promo b em[data-off] { background: #ececef; color: var(--pn-t2); }
.pd-promo strong { font-size: .84em; }
.pd-sug-t { display: flex; align-items: center; gap: .6em; font-size: .9em; }
.pd-sug-t .pd-chave { margin-left: auto; font-size: .85em; }
.pd-sug-r { margin-top: .5em; font-size: .78em; color: var(--pn-t2); }
.pd-sug-r b { color: var(--pn-t); font-weight: 600; }
.pd-sacola { margin-top: .9em; padding: .9em 1em; border-radius: .9em; background: #fbf6f2; border: 1px dashed #e9c9b4; }
.pd-sacola > p:first-child { font-size: .95em; font-weight: 700; }
.pd-sacola-i { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7em; margin-top: .6em; padding: .55em .6em; background: #fff; border-radius: .6em; font-size: .78em; }
.pd-sacola-i i { width: 2em; height: 2.4em; border-radius: .45em; background: #2b2f6b; }
.pd-sacola-i:last-child i { background: #f2a33a; }
.pd-sacola-i small { display: block; color: var(--pn-t2); }
.pd-sacola-i u { padding: .35em .75em; border: 1px solid var(--pd-ac); border-radius: 999px; color: var(--pd-ac); font-weight: 600; }
/* entregadores */
.pd-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; margin-top: 1.1em; }
.pd-nums p { display: grid; gap: .3em; padding: .85em 1em; background: #fff; border: 1px solid var(--pn-l); border-radius: .85em; }
.pd-nums small { font-size: .74em; color: var(--pn-t2); }
.pd-nums b { font-size: 1.5em; font-weight: 700; letter-spacing: -.02em; }
.pd-nums span { font-size: .7em; color: var(--pn-t2); }
.pd-nums3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-nums3 p[data-k="2"] b { font-size: 1.15em; color: #44464d; }
.pd-rua { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: .8em 1em; margin-top: 1em; }
.pd-rua .pd-lt { grid-column: 1 / -1; justify-content: flex-start; }
.pd-rua .pd-lt small { margin-left: auto; }
.pd-mapa-e { position: relative; height: 21em; border-radius: .7em; background: #e8eee3; overflow: hidden; }
.pd-j .pd-mapa { position: absolute; inset: 0; width: 100%; height: 100%; stroke-linecap: butt; }
.pd-m1 { stroke: #fff; stroke-width: 7; }
.pd-m2 { stroke: #f4d7a2; stroke-width: 5; }
.pd-rota { stroke: #6b3fd4; stroke-width: 3; stroke-dasharray: 6 5; }
.pd-casa { position: absolute; left: 42%; top: 50%; width: 1.9em; height: 1.9em; border-radius: .45em; background: #1f2023; box-shadow: 0 0 0 .2em #fff; }
.pd-pino { position: absolute; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #1f2023; color: #fff; box-shadow: 0 0 0 .2em #fff; font-style: normal; font-size: .72em; font-weight: 700; }
.pd-pino[data-p="0"] { left: 72%; top: 24%; background: #6b3fd4; }
.pd-pino[data-p="1"] { left: 22%; top: 18%; }
.pd-pino[data-p="2"] { left: 58%; top: 70%; }
.pd-gente p { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25em .6em; padding: .65em .2em; border-bottom: 1px solid var(--pn-l); }
.pd-gente i { grid-row: span 2; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #1f2023; color: #fff; font-style: normal; font-size: .72em; font-weight: 700; }
.pd-gente b { display: block; font-size: .82em; }
.pd-gente small { font-size: .72em; color: var(--pn-t2); }
.pd-gente small[data-vivo] { color: #147a3d; font-weight: 600; }
.pd-gente em { width: fit-content; padding: .15em .55em; border-radius: 999px; background: #f1ecfd; color: #6b3fd4; font-style: normal; font-size: .7em; font-weight: 600; }
/* caixa */
.pd-acoes { display: flex; gap: .55em; margin-top: .9em; }
.pd-acoes u:last-child { margin-left: auto; padding-inline: 2em; }
.pd-lanc { margin-top: .9em; }
.pd-fil { display: inline-flex; gap: .2em; padding: .2em; border-radius: .6em; background: #f2f2f4; }
.pd-fil span { padding: .3em .6em; border-radius: .45em; font-size: .9em; color: var(--pn-t2); }
.pd-fil span[data-on] { background: #fff; color: var(--pn-t); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pd-ln { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; align-items: center; gap: .8em; padding: .65em .2em; border-top: 1px solid var(--pn-l); }
.pd-ln > small { font-size: .74em; color: var(--pn-t2); }
.pd-ln b { display: block; font-size: .82em; font-weight: 600; }
.pd-ln span small { font-size: .72em; color: var(--pn-t2); }
.pd-ln strong { font-size: .86em; }
.pd-ln strong[data-neg] { color: #b42318; }
/* fidelidade */
.pd-duas-f { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.pd-seg { display: inline-flex; gap: .2em; padding: .2em; border-radius: .6em; background: #f2f2f4; font-size: .8em; }
.pd-seg span { padding: .35em .8em; border-radius: .45em; color: var(--pn-t2); }
.pd-seg span[data-on] { background: #fff; color: var(--pn-t); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pd-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; margin-top: 1em; }
.pd-campos p { display: grid; gap: .3em; }
.pd-campos small { font-size: .72em; font-weight: 600; }
.pd-campos u { padding: .5em .65em; border: 1px solid var(--pn-l2); border-radius: .5em; font-size: .8em; }
.pd-premios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; margin-top: .5em; }
.pd-premios span { padding: .7em; border: 1px solid var(--pn-l2); border-radius: .6em; font-size: .78em; font-weight: 600; }
.pd-premios span[data-on] { box-shadow: inset 0 0 0 1.5px var(--pn-t); }
.pd-cartela { padding: 1em 1.1em; border-radius: .8em; background: #f2f2f4; }
.pd-cartela small { font-size: .72em; font-weight: 600; color: var(--pn-t2); }
.pd-j .pd-prog { margin-top: .6em; font-size: .76em; font-weight: 600; color: var(--pn-t2); }
.pd-cartela b { display: block; margin-top: .4em; font-size: 1.1em; font-weight: 600; line-height: 1.3; }
.pd-j .pd-selos { display: flex; gap: .45em; margin-top: .8em; }
.pd-selos i { width: 1.45em; height: 1.45em; border-radius: 50%; box-shadow: inset 0 0 0 .15em #1f2023; background: transparent; }
.pd-selos i:nth-child(-n+3) { background: #1f2023; }
.pd-previa .pd-bt { margin-top: 1em; padding: .75em; }
/* avaliações */
.pd-avaliacoes .pd-cab .pd-seg { flex: none; }
.pd-resumo { display: grid; grid-template-columns: 11em minmax(0, 1.3fr) 10em minmax(0, 1fr); gap: 1.3em; margin-top: 1.1em; align-items: start; }
.pd-nota-g { display: grid; gap: .25em; }
.pd-nota-g b { font-size: 2.4em; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.pd-nota-g small { font-size: .72em; color: var(--pn-t2); }
.pd-nota-e b { font-size: 1.7em; }
.pd-estrelas { color: #9a5b00; font-size: .9em; letter-spacing: .08em; }
.pd-barras p { display: grid; grid-template-columns: 2.3em minmax(0, 1fr); align-items: center; gap: .5em; margin-top: .25em; font-size: .72em; }
.pd-barras > p > i { display: block; height: .55em; border-radius: 999px; background: #ececef; overflow: hidden; }
.pd-barras > p > i > i { display: block; height: 100%; border-radius: inherit; background: #b26f12; }
.pd-barras > p > i > i[data-baixa] { background: #b42318; }
.pd-citados { display: flex; flex-wrap: wrap; gap: .35em; align-items: center; }
.pd-citados span { padding: .25em .6em; border: 1px solid var(--pn-l2); border-radius: 999px; font-size: .72em; }
.pd-av-nova { margin-top: 1em; box-shadow: inset .22em 0 0 #147a3d; }
.pd-av-nova p { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; font-size: .82em; }
.pd-av-nova p + p { margin-top: .5em; display: block; }
.pd-av-nova p:first-child small { margin-left: auto; color: var(--pn-t2); }
.pd-av-nova p.pd-citados { display: flex; margin-top: .6em; }
.pd-av-nova .pd-bt { margin: 0 0 0 auto; padding: .45em 1em; }
.pd-toast { position: absolute; right: 2em; bottom: 1.4em; display: flex; align-items: center; gap: .5em; padding: .7em 1em; border-radius: .7em; background: #fff; box-shadow: 0 1em 2em -1em rgba(31, 32, 35, .35), 0 0 0 1px rgba(31, 32, 35, .08); font-size: .8em; font-weight: 600; color: #147a3d; }
/* atendimento */
.pd-j .pd-atendimento, .pd-j .pd-agentes { padding: 0; }
.pd-inbox { display: grid; grid-template-columns: 25em minmax(0, 1fr); height: 100%; }
.pd-conversas { padding: 1.3em 1.2em; border-right: 1px solid var(--pn-l); background: #fff; }
.pd-conversas h4 { font-size: 1.4em; font-weight: 700; }
.pd-conversas .pd-campo { display: flex; align-items: center; gap: .5em; margin-top: .8em; padding: .55em .8em; border-radius: 999px; background: #f2f2f4; font-size: .78em; }
.pd-conversas .pd-fil { margin-top: .8em; font-size: .8em; }
.pd-cv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65em; align-items: center; margin-top: .4em; padding: .65em .55em; border-radius: .7em; }
.pd-cv[data-on] { background: #f2f2f4; }
.pd-cv > i { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #0b7a43; color: #fff; font-style: normal; font-size: .8em; font-weight: 700; }
.pd-cv > i[data-site] { background: #2456e6; }
.pd-cv b { display: block; font-size: .82em; }
.pd-cv span small { display: block; font-size: .74em; color: var(--pn-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-cv em { display: grid; justify-items: end; gap: .25em; font-style: normal; }
.pd-cv em small { font-size: .68em; color: var(--pn-t2); }
.pd-cv em u { padding: .1em .45em; border-radius: 999px; background: #fff4dc; color: #7a4a06; font-size: .66em; font-weight: 600; }
.pd-cv em u[data-ia] { background: #f1ecfd; color: #6b3fd4; }
.pd-chat { display: flex; flex-direction: column; min-width: 0; background: #f6f6f7; }
.pd-chat-t { display: flex; align-items: center; justify-content: space-between; padding: .9em 1.3em; background: #fff; border-bottom: 1px solid var(--pn-l); font-size: .9em; }
.pd-chat-t .pd-bt { margin: 0; padding: .45em 1.1em; }
.pd-ia-faixa { padding: .5em 1.3em; background: #f1ecfd; color: #5a32b8; font-size: .76em; font-weight: 600; }
.pd-baloes { display: flex; flex-direction: column; gap: .55em; flex: 1; padding: 1.2em 1.4em; }
.pd-baloes p { max-width: 68%; padding: .6em .85em; border-radius: .9em; font-size: .8em; line-height: 1.4; }
.pd-baloes [data-de="c"] { align-self: flex-start; background: #fff; box-shadow: 0 0 0 1px var(--pn-l); border-top-left-radius: .2em; }
.pd-baloes [data-de="ia"] { align-self: flex-end; background: #dcf7e3; border-top-right-radius: .2em; }
.pd-baloes .pd-digita { display: none; gap: .3em; }
.pd-digita i { width: .45em; height: .45em; border-radius: 50%; background: #5c5e66; }
.pd-conversas + .pd-chat .pd-escrever, .pd-escrever { margin: .8em 1.3em 1.3em; padding: .7em 1em; border-radius: .8em; background: #fff; box-shadow: 0 0 0 1px var(--pn-l2); font-size: .8em; color: var(--pn-t2); }
/* agentes */
.pd-ag-cab { display: flex; align-items: center; gap: .8em; padding: 1em 2em; background: #fff; border-bottom: 1px solid var(--pn-l); }
.pd-ag-cab > i { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; background: #1f2023; color: #fff; font-style: normal; font-size: .85em; font-weight: 700; }
.pd-ag-cab b { display: block; font-size: 1.3em; }
.pd-ag-cab small { display: flex; align-items: center; gap: .5em; font-size: .74em; color: var(--pn-t2); }
.pd-ag-cab small u { padding: .1em .5em; border-radius: 999px; background: #ececef; color: var(--pn-t); }
.pd-ag-cab em { margin-left: auto; display: flex; gap: 1.2em; font-style: normal; font-size: .8em; font-weight: 500; }
.pd-ag { display: grid; grid-template-columns: 16em minmax(0, 1fr); gap: 2em; padding: 1.4em 2em; }
.pd-passos li { display: flex; align-items: center; gap: .7em; padding: .7em .8em; border-radius: .7em; font-size: .84em; }
.pd-passos li[data-on] { background: #fff; box-shadow: 0 0 0 1px var(--pn-l2); }
.pd-passos i { display: grid; place-items: center; flex: none; width: 2em; height: 2em; border-radius: 50%; background: #ececef; font-style: normal; font-size: .85em; font-weight: 700; }
.pd-passos li[data-on] i { background: #1f2023; color: #fff; }
.pd-passos b { display: block; font-weight: 600; }
.pd-passos small { font-size: .82em; color: var(--pn-t2); }
.pd-j .pd-ag > div > .pd-rot { display: block; margin: 0; font-weight: 500; color: var(--pn-t2); }
.pd-ag h4 { margin-top: .2em; font-size: 1.6em; font-weight: 700; letter-spacing: -.02em; }
.pd-ajuda { margin-top: .4em; max-width: 42em; font-size: .82em; color: var(--pn-t2); }
.pd-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; margin-top: 1.1em; }
.pd-opcoes p { position: relative; display: grid; gap: .4em; padding: 1em 2.6em 1em 1.1em; background: #fff; border-radius: .85em; box-shadow: 0 0 0 1px var(--pn-l2); }
.pd-opcoes p[data-on] { box-shadow: 0 0 0 2px #1f2023; }
.pd-opcoes b { display: flex; align-items: center; gap: .5em; font-size: .92em; font-weight: 600; }
.pd-opcoes small { font-size: .76em; color: var(--pn-t2); line-height: 1.45; }
.pd-opcoes p > i { position: absolute; right: 1em; top: 1em; width: 1.2em; height: 1.2em; border-radius: 50%; box-shadow: inset 0 0 0 .12em #b9b9c0; }
.pd-opcoes p[data-on] > i { box-shadow: inset 0 0 0 .38em #1f2023; }
.pd-j .pd-continuar { width: 9em; margin: 1.2em 0 0 auto; padding: .75em; }

/* ---- estreita (celular, abaixo de 48rem de tela): sem o trilho e a barra; a letra cresce ---- */
@media (max-width: 47.99rem) {
  .pd-j, .pd-curta .pd-j { font-size: calc(100cqi / 40); }
  .pd-casca { grid-template-columns: minmax(0, 1fr); }
  .pd-tr, .pd-bm, .pd-busca, .pd-ver, .pd-trilha { display: none; }
  .pd-topo { height: 3em; justify-content: flex-end; }
  .pd-t { padding: 1.2em 1.2em 0; }
  .pd-cab .pd-bts u:not([data-cor]), .pd-j .pd-ic { display: none; }
  .pd-cols { grid-template-columns: repeat(4, 14.5em); }
  .pd-duas, .pd-duas-f, .pd-rua { grid-template-columns: minmax(0, 1fr); }
  .pd-editor, .pd-gente { display: none; }
  .pd-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-resumo { grid-template-columns: 9em minmax(0, 1fr); }
  .pd-resumo > :nth-child(n+3) { display: none; }
  .pd-inbox { grid-template-columns: minmax(0, 1fr); }
  .pd-conversas { display: none; }
  .pd-baloes p { max-width: 82%; }
  .pd-ag { grid-template-columns: minmax(0, 1fr); padding: 1.2em; }
  .pd-passos { display: none; }
  .pd-opcoes { grid-template-columns: minmax(0, 1fr); }
  .pd-ag-cab em { display: none; }
}

/* ---- o laço (só com [data-pd-vivo]: primeiro gesto e na tela) ---- */
[data-pd-vivo] .pd-card[data-novo] { animation: pd-chega 7s cubic-bezier(.2, .8, .2, 1) infinite; }
[data-pd-vivo] .pd-abas em[data-pix] { animation: pd-pulsa 1.6s ease-in-out infinite; }
[data-pd-vivo] .pd-vivo { animation: pd-pisca 1.6s ease-in-out infinite; }
[data-pd-vivo] .pd-li:nth-child(5) .pd-chave, [data-pd-vivo] .pd-promo:nth-child(3) .pd-chave { animation: pd-liga 6s steps(1) infinite; }
[data-pd-vivo] .pd-li:nth-child(5) .pd-chave::after, [data-pd-vivo] .pd-promo:nth-child(3) .pd-chave::after { animation: pd-liga-b 6s ease infinite; }
[data-pd-vivo] .pd-precos p { animation: pd-luz 6s ease infinite; }
[data-pd-vivo] .pd-precos p:nth-child(2) { animation-delay: .5s; }
[data-pd-vivo] .pd-precos p:nth-child(3) { animation-delay: 1s; }
[data-pd-vivo] .pd-precos p:nth-child(4) { animation-delay: 1.5s; }
[data-pd-vivo] .pd-sacola { animation: pd-sobe 6s cubic-bezier(.2, .8, .2, 1) infinite; }
[data-pd-vivo] .pd-sacola-i:nth-child(2) u { animation: pd-toque 6s ease infinite; }
[data-pd-vivo] .pd-pino[data-p="0"] { animation: pd-anda0 8s ease-in-out infinite; }
[data-pd-vivo] .pd-pino[data-p="1"] { animation: pd-anda1 9s ease-in-out infinite; }
[data-pd-vivo] .pd-pino[data-p="2"] { animation: pd-anda2 10s ease-in-out infinite; }
[data-pd-vivo] .pd-rota { animation: pd-traco 2s linear infinite; }
[data-pd-vivo] .pd-ln[data-k="0"] { animation: pd-chega 7s cubic-bezier(.2, .8, .2, 1) infinite; }
[data-pd-vivo] .pd-selos i:nth-child(4) { animation: pd-selo4 7s ease infinite; }
[data-pd-vivo] .pd-selos i:nth-child(5) { animation: pd-selo5 7s ease infinite; }
[data-pd-vivo] .pd-toast { animation: pd-toast 7s cubic-bezier(.2, .8, .2, 1) infinite; }
[data-pd-vivo] .pd-av-nova { animation: pd-chega 7s cubic-bezier(.2, .8, .2, 1) 1s infinite; }
[data-pd-vivo] .pd-barras > p > i > i { animation: pd-barra 7s cubic-bezier(.2, .8, .2, 1) infinite; transform-origin: left; }
[data-pd-vivo] .pd-baloes p { animation: pd-balao 10s cubic-bezier(.2, .8, .2, 1) infinite both; }
[data-pd-vivo] .pd-baloes p[data-k="1"] { animation-delay: .8s; }
[data-pd-vivo] .pd-baloes p[data-k="2"] { animation-delay: 1.6s; }
[data-pd-vivo] .pd-baloes p[data-k="3"] { animation-delay: 3.2s; }
[data-pd-vivo] .pd-baloes .pd-digita { display: flex; animation: pd-digita 10s steps(1) infinite; }
[data-pd-vivo] .pd-digita i { animation: pd-pisca 1s ease-in-out infinite; }
[data-pd-vivo] .pd-digita i:nth-child(2) { animation-delay: .2s; }
[data-pd-vivo] .pd-digita i:nth-child(3) { animation-delay: .4s; }
[data-pd-vivo] .pd-opcoes p[data-k="1"] { animation: pd-escolhe 8s ease infinite; }
[data-pd-vivo] .pd-opcoes p[data-k="1"] > i { animation: pd-escolhe-i 8s ease infinite; }
@keyframes pd-chega { 0% { transform: translateY(-1.2em); opacity: 0; } 8% { transform: none; opacity: 1; background-color: #fde3d2; } 30%, 100% { background-color: #fff; } }
@keyframes pd-pulsa { 50% { transform: scale(1.18); } }
@keyframes pd-pisca { 50% { opacity: .35; } }
@keyframes pd-liga { 0%, 45% { background: #c8c8cc; } 50%, 95% { background: #147a3d; } }
@keyframes pd-liga-b { 0%, 45% { right: 1.18em; } 50%, 95% { right: .18em; } 100% { right: 1.18em; } }
@keyframes pd-luz { 0%, 8% { background: #fff; } 12% { background: #fde3d2; border-color: #e9a07a; } 26%, 100% { background: #fff; } }
@keyframes pd-sobe { 0% { transform: translateY(1em); opacity: 0; } 10%, 100% { transform: none; opacity: 1; } }
@keyframes pd-toque { 0%, 40% { background: transparent; color: var(--pd-ac); transform: none; } 45% { background: var(--pd-ac); color: #fff; transform: scale(.92); } 52%, 90% { background: var(--pd-ac); color: #fff; transform: none; } 100% { background: transparent; } }
@keyframes pd-anda0 { 50% { transform: translate(-4.5em, 3em); } }
@keyframes pd-anda1 { 50% { transform: translate(3em, 2em); } }
@keyframes pd-anda2 { 50% { transform: translate(-3.5em, -2.5em); } }
@keyframes pd-traco { to { stroke-dashoffset: -22; } }
@keyframes pd-selo4 { 0%, 20% { background: transparent; transform: none; } 26% { background: #1f2023; transform: scale(1.25); } 32%, 92% { background: #1f2023; transform: none; } 100% { background: transparent; } }
@keyframes pd-selo5 { 0%, 50% { background: transparent; transform: none; } 56% { background: #C8470D; transform: scale(1.3); } 62%, 92% { background: #C8470D; transform: none; } 100% { background: transparent; } }
@keyframes pd-toast { 0%, 4% { transform: translateY(2em); opacity: 0; } 10%, 60% { transform: none; opacity: 1; } 68%, 100% { transform: translateY(2em); opacity: 0; } }
@keyframes pd-barra { 0% { transform: scaleX(.1); } 18%, 100% { transform: none; } }
@keyframes pd-balao { 0% { transform: translateY(.8em); opacity: 0; } 6%, 92% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes pd-digita { 0% { opacity: 0; } 22% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes pd-escolhe { 0%, 40% { box-shadow: 0 0 0 1px #dddde1; } 46%, 92% { box-shadow: 0 0 0 2px #C8470D; } 100% { box-shadow: 0 0 0 1px #dddde1; } }
@keyframes pd-escolhe-i { 0%, 40% { box-shadow: inset 0 0 0 .12em #b9b9c0; } 46%, 92% { box-shadow: inset 0 0 0 .38em #C8470D; } }

/* =============== o construtor (components/dlv/Construtor.vue) =============== */
@property --t-fundo { syntax: '<color>'; inherits: true; initial-value: #FFF8F2; }
@property --t-dest { syntax: '<color>'; inherits: true; initial-value: #C8470D; }
@property --t-texto { syntax: '<color>'; inherits: true; initial-value: #24110A; }
.pc5-j { --t-fundo: #FFF8F2; --t-dest: #C8470D; --t-texto: #24110A; --t-fonte: var(--font-texto, Inter, sans-serif); --t-raio: 999px; }
.pc5-topo { display: flex; align-items: center; gap: 1em; height: 3.4em; padding: 0 1.2em; background: #fff; border-bottom: 1px solid var(--pn-l); }
.pc5-pag { font-size: .84em; font-weight: 600; }
.pc5-pag i { font-style: normal; color: var(--pn-t2); }
.pc5-tel { display: flex; gap: .4em; margin-left: 1em; }
.pc5-tel i { width: 1.4em; height: 1em; border-radius: .2em; box-shadow: inset 0 0 0 .12em #8d8f97; }
.pc5-tel i[data-on] { box-shadow: inset 0 0 0 .14em #1f2023; }
.pc5-tel i:nth-child(3) { width: .7em; }
.pc5-topo small { margin-left: auto; font-size: .74em; color: var(--pn-t2); }
.pc5-topo .pd-bt { margin: 0; padding: .45em 1.2em; }
.pc5-corpo { display: grid; grid-template-columns: 16em minmax(0, 1fr) 14em; height: 42em; }
.pc5-esq, .pc5-dir { padding: 1em; background: #fff; border-right: 1px solid var(--pn-l); overflow: hidden; }
.pc5-dir { border-right: 0; border-left: 1px solid var(--pn-l); }
.pc5-esq .pd-abas { margin-top: 0; }
.pc5-temas { display: grid; gap: .35em; margin-top: .5em; }
.pc5-temas span { display: flex; align-items: center; gap: .25em; padding: .45em .55em; border-radius: .55em; box-shadow: 0 0 0 1px var(--pn-l2); font-size: .76em; font-weight: 600; }
.pc5-temas span i { width: .9em; height: .9em; border-radius: 50%; }
.pc5-temas span i:nth-child(3) { margin-right: .4em; }
.pc5-temas [data-k="0"] i:nth-child(1) { background: #FFF8F2; box-shadow: inset 0 0 0 1px #ddd; }
.pc5-temas [data-k="0"] i:nth-child(2) { background: #C8470D; }
.pc5-temas [data-k="0"] i:nth-child(3) { background: #24110A; }
.pc5-temas [data-k="1"] i:nth-child(1) { background: #EEF5FB; box-shadow: inset 0 0 0 1px #ddd; }
.pc5-temas [data-k="1"] i:nth-child(2) { background: #0B5CAD; }
.pc5-temas [data-k="1"] i:nth-child(3) { background: #0D2236; }
.pc5-temas [data-k="2"] i:nth-child(1) { background: #F3F7EC; box-shadow: inset 0 0 0 1px #ddd; }
.pc5-temas [data-k="2"] i:nth-child(2) { background: #2F7A3A; }
.pc5-temas [data-k="2"] i:nth-child(3) { background: #17321C; }
.pc5-temas [data-k="0"] { box-shadow: 0 0 0 2px #1f2023; }
.pc5-cor { display: flex; align-items: center; gap: .55em; margin-top: .55em; font-size: .76em; }
.pc5-cor i { width: 1.9em; height: 1.4em; border-radius: .35em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.pc5-cor[data-k="0"] i { background: var(--t-fundo); }
.pc5-cor[data-k="1"] i { background: var(--t-dest); }
.pc5-cor[data-k="2"] i { background: var(--t-texto); }
.pc5-fonte, .pc5-med { display: flex; align-items: center; justify-content: space-between; margin-top: .55em; padding-top: .55em; border-top: 1px solid var(--pn-l); font-size: .76em; }
.pc5-fonte small, .pc5-med small { color: var(--pn-t2); }
.pc5-fonte b { font-family: var(--t-fonte); font-size: 1.5em; font-weight: 800; line-height: 1; }
.pc5-meio { position: relative; padding: 1.4em; overflow: hidden; }
.pc5-site { background: var(--t-fundo); color: var(--t-texto); border-radius: .6em; box-shadow: 0 1em 2.5em -1.4em rgba(20, 12, 8, .35), 0 0 0 1px rgba(31, 32, 35, .07); overflow: hidden; }
.pc5-nav { display: flex; align-items: center; gap: 1.2em; padding: .9em 1.4em; font-size: .78em; }
.pc5-nav b { margin-right: auto; font-family: var(--t-fonte); font-size: 1.35em; font-weight: 800; letter-spacing: -.02em; }
.pc5-nav u, .pc5-hero u { padding: .45em 1em; border-radius: var(--t-raio); background: var(--t-dest); color: #fff; font-weight: 700; }
.pc5-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 1em; padding: 1.4em 1.4em 1.6em; }
.pc5-h { font-family: var(--t-fonte); font-size: 2.6em; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.pd-j .pc5-ap { margin: .7em 0 1.1em; font-size: .82em; opacity: .8; }
.pc5-hero u { display: inline-block; font-size: .82em; }
.pc5-prato { justify-self: center; width: 13em; aspect-ratio: 1; border-radius: 50%; background: var(--t-dest) url(/produto/capa/pizza-320-v1.webp) center / 92% no-repeat; }
.pc5-sec { padding: 0 1.4em; font-family: var(--t-fonte); font-size: 1.05em; font-weight: 800; }
.pc5-prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; padding: .8em 1.4em 1.4em; }
.pc5-prods p { display: grid; gap: .2em; padding: .6em; border-radius: .7em; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); font-size: .76em; }
.pc5-prods i { height: 4.6em; border-radius: .5em; background: color-mix(in srgb, var(--t-dest) 16%, #fff) url(/produto/capa/pizza-320-v1.webp) center / auto 86% no-repeat; }
.pc5-prods small { opacity: .75; }
.pc5-criar { position: absolute; right: 1.6em; bottom: 1.6em; width: 19em; padding: 1em; background: #fff; border-radius: .9em; box-shadow: 0 1.4em 3em -1.2em rgba(20, 12, 8, .45), 0 0 0 1px rgba(31, 32, 35, .08); }
.pd-j .pc5-criar-t { font-size: .95em; font-weight: 700; margin-bottom: .4em; }
.pc5-criar > p:not(.pc5-criar-t) { display: flex; align-items: center; gap: .6em; padding: .45em .5em; border-radius: .55em; font-size: .76em; }
.pc5-criar > p[data-on] { background: #fbe9df; }
.pc5-criar i { flex: none; width: 1em; height: 1em; border-radius: 50%; box-shadow: inset 0 0 0 .12em #b9b9c0; }
.pc5-criar p[data-on] i { box-shadow: inset 0 0 0 .32em #1f2023; }
.pc5-criar b { display: block; font-weight: 600; }
.pc5-criar small { color: var(--pn-t2); }
.pc5-vars { display: grid; gap: .6em; margin-top: .6em; }
.pc5-vars p { display: grid; gap: .3em; padding: .4em; border-radius: .6em; box-shadow: 0 0 0 1px var(--pn-l2); font-size: .72em; }
.pc5-vars p[data-k="1"] { box-shadow: 0 0 0 2px #1f2023; }
.pc5-vars i { display: block; height: 4.6em; border-radius: .4em; background: #f2f2f4; position: relative; overflow: hidden; }
.pc5-vars i::before, .pc5-vars i::after { content: ""; position: absolute; border-radius: .2em; }
.pc5-vars i[data-v="0"] { background: #3b2a22; }
.pc5-vars i[data-v="0"]::before { left: 12%; top: 30%; width: 50%; height: 14%; background: #fff; }
.pc5-vars i[data-v="0"]::after { left: 12%; top: 55%; width: 30%; height: 12%; background: #C8470D; }
.pc5-vars i[data-v="1"]::before { left: 8%; top: 28%; width: 40%; height: 14%; background: #1f2023; }
.pc5-vars i[data-v="1"]::after { right: 8%; top: 15%; width: 36%; height: 70%; background: #e3b98f; border-radius: 50%; }
.pc5-vars i[data-v="2"]::before { left: 8%; top: 18%; width: 84%; height: 30%; background: #1f2023; }
.pc5-vars i[data-v="2"]::after { left: 8%; top: 58%; width: 60%; height: 22%; background: #1f2023; }
.pc5-vars i[data-v="3"] { background: #C8470D; }
.pc5-vars i[data-v="3"]::before { left: 30%; top: 10%; width: 40%; height: 80%; background: #f1c27d; border-radius: 50%; }
@media (max-width: 47.99rem) {
  .pc5-j { font-size: calc(100cqi / 40); }
  .pc5-corpo { grid-template-columns: minmax(0, 1fr); height: 40em; }
  .pc5-meio { padding: .8em; }
  .pc5-h { font-size: 2.1em; }
  .pc5-nav span { display: none; }
  .pc5-esq, .pc5-dir, .pc5-tel { display: none; }
  .pc5-hero { grid-template-columns: minmax(0, 1fr) 9em; }
  .pc5-prato { width: 9em; }
  .pc5-criar { right: 1em; bottom: 1em; width: 18em; }
}
/* o laço: o tema troca a cada 4 s (Brasa, Mar, Jardim) e a janela de criar página entra no fim */
[data-pd-vivo] .pc5-j { animation: pc5-tema 12s steps(1) infinite; }
[data-pd-vivo] .pc5-temas span { animation: pc5-chip 12s steps(1) infinite; }
[data-pd-vivo] .pc5-temas [data-k="1"] { animation-delay: -8s; }
[data-pd-vivo] .pc5-temas [data-k="2"] { animation-delay: -4s; }
[data-pd-vivo] .pc5-criar { animation: pc5-criar 12s cubic-bezier(.2, .8, .2, 1) infinite; }
[data-pd-vivo] .pc5-hero > div { animation: pc5-hero 4s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes pc5-tema {
  0% { --t-fundo: #FFF8F2; --t-dest: #C8470D; --t-texto: #24110A; --t-fonte: var(--font-texto, Inter, sans-serif); --t-raio: 999px; }
  33.33% { --t-fundo: #EEF5FB; --t-dest: #0B5CAD; --t-texto: #0D2236; --t-fonte: Georgia, "Times New Roman", serif; --t-raio: .3em; }
  66.66% { --t-fundo: #F3F7EC; --t-dest: #2F7A3A; --t-texto: #17321C; --t-fonte: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; --t-raio: .8em; }
}
@keyframes pc5-chip { 0% { box-shadow: 0 0 0 2px #1f2023; } 33.33%, 100% { box-shadow: 0 0 0 1px #dddde1; } }
@keyframes pc5-criar { 0%, 62% { transform: translateY(1.5em) scale(.96); opacity: 0; } 68%, 94% { transform: none; opacity: 1; } 100% { transform: translateY(1.5em); opacity: 0; } }
@keyframes pc5-hero { 0% { transform: translateY(.6em); opacity: 0; } 12%, 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pd *, .pc5 *, .pc5-j { animation: none !important; transition: none !important; }
}


/* =============== vindo de assets/css/paginas-produto.css (rodada 8): o quadro, as fichas, o trilho e o projeto do caso ===============
   Tudo abaixo da dobra: as seções que usam pedem esta folha (Trilho e o caso em components/secoes/*.vue). */
/* =============================== quadro de pedidos =============================== */
.pc-quadro { --g: .5em; border-radius: 1.4em; background: var(--dlv-papel); border: 1px solid rgba(14, 52, 132, .1); box-shadow: var(--dlv-sombra); overflow: hidden; font-size: .6875rem; line-height: 1.3; color: var(--dlv-tinta); }
.pc-quadro-topo { display: flex; align-items: center; gap: .45em; height: 2.6em; padding-inline: 1em; background: var(--dlv-nevoa); border-bottom: 1px solid var(--dlv-linha); }
.pc-quadro-topo i { width: .6em; height: .6em; border-radius: 50%; background: var(--dlv-linha-2); }
.pc-quadro-topo b { margin-left: .6em; font-weight: 600; }
.pc-quadro-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); padding: 1em 1em 0; }
.pc-quadro-cols span { display: flex; align-items: center; gap: .45em; font-weight: 600; white-space: nowrap; }
.pc-quadro-cols span::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--qc); }
.pc-quadro [data-col="0"] { --qc: var(--dlv-acao); }
.pc-quadro [data-col="1"] { --qc: var(--dlv-ambar-vivo); }
.pc-quadro [data-col="2"] { --qc: var(--dlv-verde); }
.pc-quadro [data-col="3"] { --qc: var(--dlv-rodape); }
.pc-quadro-pista {
  position: relative; margin: .7em 1em 1em; height: 17em;
  background: linear-gradient(90deg, var(--dlv-nevoa) calc(100% - var(--g)), transparent 0) 0 0 / calc(25% + var(--g) / 4) 100%; border-radius: .8em;
}
.pc-pedido {
  position: absolute; left: 0; top: 0; display: grid; align-content: start; gap: .15em; width: calc((100% - 3 * var(--g)) / 4 - .6em); height: calc((100% - var(--g)) / 2 - .6em); margin: .3em;
  padding: .7em .75em; border-radius: .8em; background: var(--dlv-papel); border-top: 3px solid var(--qc); box-shadow: 0 6px 14px -8px rgba(14, 52, 132, .35), 0 0 0 1px rgba(14, 52, 132, .06);
  translate: calc(var(--c) * (100% + var(--g) + .6em)) calc(var(--l) * (100% + var(--g) + .6em));
  transition: translate .75s var(--ease-solto), opacity .35s ease, border-color .5s ease; overflow: hidden;
}
.pc-pedido small { color: var(--dlv-sec-2); font-size: .9em; white-space: nowrap; }
.pc-pedido b { font-weight: 600; font-size: 1.1em; }
.pc-pedido span { color: var(--dlv-sec); }
.pc-pedido em { align-self: end; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-pedido[data-sai] { opacity: 0; transition: opacity .35s ease; }
.pc-pedido[data-novo] { animation: pc-novo 1.2s ease-out; }
@keyframes pc-novo { 0% { box-shadow: 0 0 0 0 rgba(232, 85, 15, .55), 0 6px 14px -8px rgba(14, 52, 132, .35) } 100% { box-shadow: 0 0 0 12px rgba(232, 85, 15, 0), 0 6px 14px -8px rgba(14, 52, 132, .35) } }

/* =============================== ficha (a peça de cada passo do trilho) =============================== */
.pc-ficha { --fc: var(--dlv-acao); --fs: var(--dlv-acao-suave); display: grid; gap: .5rem; width: min(100%, 26rem); padding: 1.25rem; border-radius: 20px; background: var(--dlv-papel); border: 1px solid var(--dlv-linha); box-shadow: var(--dlv-sombra-leve); font-size: .9375rem; line-height: 1.4; color: var(--dlv-tinta); }
.pc-ficha:is([data-k="1"], [data-k="4"], [data-k="5"]) { --fc: var(--dlv-verde); --fs: var(--dlv-verde-suave); }
.pc-ficha:is([data-k="2"], [data-k="6"]) { --fc: var(--dlv-ambar); --fs: var(--dlv-ambar-suave); }
.pc-ficha[data-k="3"] { --fc: var(--dlv-rosa); --fs: var(--dlv-rosa-suave); }
.pc-ficha > small { justify-self: start; padding: .2rem .6rem; border-radius: 999px; background: var(--fs); color: var(--fc); font-size: .75rem; font-weight: 600; }
.pc-ficha > b { font-family: var(--font-marca); font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.pc-ficha li { position: relative; padding: .5rem 0 .5rem 1.6rem; border-top: 1px solid var(--dlv-linha); color: var(--dlv-sec); }
.pc-ficha li::before { content: ""; position: absolute; left: .25rem; top: .7rem; width: .4rem; height: .7rem; border: solid var(--fc); border-width: 0 2px 2px 0; rotate: 45deg; }
.pc-fecho { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; margin-top: .25rem; padding: .45rem .95rem; border-radius: 999px; background: var(--fc); color: #fff; font-size: .8125rem; font-weight: 600; }
.pc-fecho::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
/* mapa da entrega: os anéis de taxa por distância, a rota e o motoboy */
.pc-mapa { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--dlv-nevoa); margin-bottom: .35rem; }
.pc-mapa-ruas { stroke: var(--dlv-papel); stroke-width: 7; fill: none; }
.pc-mapa-aneis circle { fill: rgba(232, 85, 15, .05); stroke: var(--dlv-acao); stroke-width: 1; stroke-dasharray: 3 4; }
.pc-mapa-aneis circle:nth-child(2) { stroke: var(--dlv-verde); fill: rgba(6, 122, 104, .04); }
.pc-mapa-aneis circle:nth-child(3) { stroke: var(--dlv-ambar-vivo); fill: none; }
.pc-mapa-txt { font-size: 8px; font-weight: 600; fill: var(--dlv-sec); }
.pc-mapa-rota { fill: none; stroke: var(--dlv-acao); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 7; }
.pc-mapa-loja { fill: var(--dlv-tinta); stroke: var(--dlv-papel); stroke-width: 3; }
.pc-mapa-cli { fill: var(--dlv-verde); stroke: var(--dlv-papel); stroke-width: 3; }
.pc-mapa-rot { font-size: 9px; font-weight: 700; fill: var(--dlv-tinta); }
.pc-mapa-moto { offset-path: path("M96 104h54V46h96v40"); offset-distance: 64%; offset-rotate: 0deg; }
.pc-mapa-moto circle { fill: var(--dlv-acao); stroke: var(--dlv-papel); stroke-width: 2.5; }
.pc-mapa-moto path { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pc-mapa-taxa rect { fill: var(--dlv-papel); stroke: var(--dlv-linha-2); }
.pc-mapa-taxa text { font-size: 9px; font-weight: 600; fill: var(--dlv-sec); }
.pc-mapa-taxa .pc-mapa-valor { font-size: 11px; font-weight: 700; fill: var(--dlv-tinta); }
@media (prefers-reduced-motion: no-preference) {
  html.dlv-vivo .pc-mapa-moto { animation: pc-moto 6s cubic-bezier(.45, 0, .55, 1) infinite; }
  html.dlv-vivo .pc-mapa-aneis circle:first-child { animation: pc-anel 3s ease-in-out infinite; }
}
@keyframes pc-moto { 0%, 6% { offset-distance: 0% } 88%, 100% { offset-distance: 100% } }
@keyframes pc-anel { 50% { fill: rgba(232, 85, 15, .12) } }

/* =============================== trilho (linha do tempo de passos) =============================== */
.pg-trilho { background: var(--dlv-nevoa); }
.pg-trilho-cab { margin-bottom: clamp(2rem, 4vw, 3rem); }
.tr { display: grid; }
/* o trilho acabou de virar abas (components/dlv/Trilho.vue): os passos que não estão abertos somem já, sem a transição */
.pg-trilho[data-vivo-entrando] :is(.tr-cab h3, .tr-texto, .tr-peca) { transition: none !important; }
.tr-passo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding-bottom: 2.25rem; }
.tr-passo::before { content: ""; position: absolute; left: 1.0625rem; top: 2.6rem; bottom: .35rem; width: 2px; border-radius: 2px; background: var(--dlv-linha-2); }
.tr-passo:last-child { padding-bottom: 0; }
.tr-passo:last-child::before { display: none; }
.tr-cab { display: contents; }
.tr-n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--dlv-papel); box-shadow: 0 0 0 1px var(--dlv-linha-2); color: var(--dlv-acao); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .4s ease, color .4s ease, box-shadow .4s ease; }
.tr-cab h3 { align-self: center; font-family: var(--font-marca); font-size: 1.1875rem; font-weight: 600; line-height: 1.25; transition: color .4s ease; }
.tr-texto { grid-column: 2; margin-top: .4rem; max-width: 34rem; font-size: 1rem; line-height: 1.5; color: var(--dlv-sec); }
.tr-peca { grid-column: 2; margin-top: 1.1rem; }
@media (width >= 64rem) {
  /* sem movimento: cada passo com o texto de um lado e a peça do outro */
  .tr-passo { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.25rem; padding-bottom: 2.75rem; }
  .tr-peca { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; justify-self: end; width: min(100%, 26rem); }
  /* cena presa: a lista à esquerda, um passo aberto por vez, e a peça do passo da vez à direita */
  .pg-trilho[data-vivo] [data-dlv-pino] { position: relative; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); column-gap: 4rem; align-content: center; min-height: 34rem; padding-block: 1rem; }
  .pg-trilho[data-vivo] .pg-trilho-cab { grid-column: 1; margin-bottom: 1.5rem; }
  .pg-trilho[data-vivo] :is(.tr, .pg-ia-palco) { grid-column: 1; }
  .pg-trilho[data-vivo] .tr-passo { position: static; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding-bottom: .55rem; }
  .pg-trilho[data-vivo] .tr-passo::before { display: none; }
  .pg-trilho[data-vivo] .tr-passo:not([data-atual]) .tr-texto { display: none; }
  .pg-trilho[data-vivo] .tr-passo:not([data-atual]) h3 { color: var(--dlv-sec-2); font-size: 1.0625rem; }
  .pg-trilho[data-vivo] .tr-passo[data-atual] .tr-n { background: var(--dlv-acao); color: #fff; box-shadow: 0 0 0 5px var(--dlv-acao-suave); }
  .pg-trilho[data-vivo] .tr-passo[data-feito] .tr-n { background: var(--dlv-verde-suave); color: var(--dlv-verde); box-shadow: none; }
  .pg-trilho[data-vivo] .tr-texto { padding-bottom: .5rem; }
  .pg-trilho[data-vivo] .tr-peca {
    position: absolute; grid-area: auto; justify-self: auto; inset: 0 0 0 auto; width: 51%; display: grid; place-items: center; margin: 0; opacity: 0; visibility: hidden; translate: 0 24px; scale: .97;
    transition: opacity .4s ease, translate .6s var(--ease-solto), scale .6s var(--ease-solto), visibility 0s linear .4s;
  }
  .pg-trilho[data-vivo] .tr-passo[data-atual] .tr-peca { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition-delay: .1s, .1s, .1s, 0s; }
  .pg-trilho[data-vivo] .tr-peca .pc-ficha { width: min(100%, 27rem); padding: 1.6rem; font-size: 1rem; box-shadow: var(--dlv-sombra); }
  /* encaixe: as peças se acumulam em 2 × 2, cada uma encostada na anterior, e o teste ao vivo fecha a cena */
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .tr-peca { inset: auto; left: calc(49% + 1rem); top: 1rem; width: 24.5%; place-items: stretch; translate: 28px 0; scale: 1; }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .tr-passo:nth-child(even) .tr-peca { left: calc(74.5% + 1.5rem); width: calc(25.5% - 1.5rem); }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .tr-passo:nth-child(n+3) .tr-peca { top: 14.25rem; translate: 0 28px; }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .tr-passo:is([data-atual], [data-feito]) .tr-peca { opacity: 1; visibility: visible; translate: 0 0; transition-delay: .1s, .1s, .1s, 0s; }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .tr-passo[data-feito] .pc-ficha { box-shadow: var(--dlv-sombra-leve); }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .pc-ficha { width: 100%; height: 12.75rem; padding: 1rem; gap: .3rem; font-size: .8125rem; align-content: start; }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .pc-ficha > b { font-size: .9375rem; }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .pc-ficha li { padding-block: .3rem; }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .pc-ficha li::before { top: .45rem; }
  .pg-trilho[data-vivo] .tr[data-modo="encaixe"] .pc-fecho { padding: .25rem .7rem; font-size: .75rem; }
  .pg-trilho[data-vivo] .pc-teste { position: absolute; left: calc(49% + 1rem); right: 0; top: 27.5rem; margin: 0; opacity: 0; translate: 0 20px; transition: opacity .4s ease, translate .6s var(--ease-solto); }
  .pg-trilho[data-vivo][data-passo="3"] .pc-teste { opacity: 1; translate: 0 0; transition-delay: .35s; }
  .pg-ia-es[data-vivo] [data-dlv-pino] { min-height: 37rem; align-content: start; padding-top: 1.5rem; }
}
/* teste ao vivo do estúdio */
.pc-teste { display: grid; gap: .45rem; margin-top: 1.5rem; padding: 1rem; border-radius: 20px; background: var(--dlv-marinho); color-scheme: light; }
.pc-teste > small { display: flex; align-items: center; gap: .45rem; font-size: .75rem; font-weight: 600; color: var(--dlv-verde-vivo); }
.pc-teste > small::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.pc-teste .pc-balao { font-size: .8125rem; }

/* =============================== o projeto do caso (página Site exclusivo) =============================== */
.pg-cs { background: var(--dlv-papel); }
.pg-cs-h2 { font-size: clamp(1.875rem, 4.2vw, 3.25rem); max-width: 22ch; }
.pg-cs-topo .dlv-apoio { max-width: 44rem; }
.pg-cs h3:not(.dlv-h2) { font-family: var(--font-marca); font-size: clamp(1.5rem, 2.8vw, 2.125rem); font-weight: 600; line-height: 1.2; }
.pg-cs h3:not(.dlv-h2) + p { margin-top: .8rem; max-width: 32rem; font-size: 1rem; line-height: 1.55; color: var(--dlv-sec); }
.pg-cs-era { display: grid; gap: 1rem; align-items: stretch; margin-top: clamp(2rem, 4vw, 3rem); }
.pg-cs-era > div { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 24px; background: var(--dlv-neutro); border: 1px solid var(--dlv-linha); }
.pg-cs-era > div[data-k="virou"] { background: var(--dlv-marinho); border-color: transparent; color: #fff; box-shadow: var(--dlv-sombra); }
.pg-cs-era h3:not(.dlv-h2) { font-size: 1.25rem; }
.pg-cs-era > div[data-k="virou"] p { color: var(--dlv-noite-sec); }
.pg-cs-era > span { display: grid; place-items: center; font-size: 1.5rem; font-weight: 600; color: var(--dlv-acao); rotate: 90deg; }
.pg-cs-nota { margin-top: 1rem; text-align: center; font-size: .8125rem; color: var(--dlv-sec-2); }
.pg-cs .pc-cmp { margin-top: clamp(2.5rem, 5vw, 4rem); }
.pg-cs-cena { display: grid; gap: 2rem; align-items: center; margin-top: clamp(4rem, 9vw, 7rem); }
.pg-cs-legenda { margin-top: 1rem; font-size: .8125rem; color: var(--dlv-sec-2); }
.pg-cs-fontes { display: grid; gap: .6rem; margin-top: 1.5rem; }
.pg-cs-fontes li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-radius: 16px; background: var(--dlv-neutro); }
.pg-cs-fontes b { font-family: var(--font-marca); font-size: 1.25rem; font-weight: 700; }
.pg-cs-fontes span { font-size: .8125rem; color: var(--dlv-sec); }
.pg-cs-cores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.pg-cs-cores li { display: grid; gap: .2rem; font-size: .75rem; }
.pg-cs-cores i { display: block; aspect-ratio: 3 / 4; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(13, 13, 28, .08), 0 14px 24px -16px rgba(13, 13, 28, .4); margin-bottom: .4rem; }
.pg-cs-cores b { font-weight: 600; }
.pg-cs-cores span { color: var(--dlv-sec); font-variant-numeric: tabular-nums; }
.pg-cs-dna { margin-top: 1.5rem; padding: 1.25rem 1.4rem; border-radius: 20px; border: 1px solid var(--dlv-linha); }
.pg-cs-dna h4 { font-size: .875rem; font-weight: 600; color: var(--dlv-sec); }
.pg-cs-dna ol { display: grid; margin-top: .5rem; counter-reset: dna; }
.pg-cs-dna li { counter-increment: dna; display: flex; gap: .75rem; padding-block: .55rem; border-top: 1px solid var(--dlv-linha); font-weight: 500; }
.pg-cs-dna li::before { content: counter(dna); color: var(--dlv-acao); font-weight: 700; font-variant-numeric: tabular-nums; }
/* a home em movimento */
.pg-cs-rolo { margin-top: clamp(4rem, 9vw, 7rem); padding-block: clamp(3rem, 6vw, 5rem); background: var(--dlv-marinho); color: #fff; }
.pg-cs-rolo-grade { display: grid; gap: 2rem; align-items: center; }
.pg-cs .pg-cs-rolo-texto p { color: var(--dlv-noite-sec); }
.pg-cs-rolo-cena { position: relative; padding-bottom: 2rem; }
.pg-cs-janela { overflow: hidden; aspect-ratio: 16 / 10; }
.pg-cs-janela img { display: block; width: 100%; height: auto; }
/* a tira anda inteira (utils/dlv-movimento.ts); os recortes da cena de montar ficam por cima dela, invisíveis em repouso */
.pg-cs-tira { position: relative; will-change: transform; }
.pg-cs-janela .pg-cs-tira-mt { position: absolute; left: 0; opacity: 0; }
.pg-cs-rolo-cena .dlv-cel { position: absolute; right: 2%; bottom: 0; width: 24%; background: var(--dlv-tinta); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .8); }
.pg-cs-rolo-cena .dlv-cel .pg-cs-janela { aspect-ratio: 390 / 844; width: calc(100% - 5cqw); margin: 2.5cqw; border-radius: 10.2% / 4.7%; }
.pg-cs-rolo-cena .dlv-cel img { width: 100%; margin: 0; border-radius: 0; }
.pg-cs-rolo-cena .dlv-janela { margin-right: 8%; border-color: rgba(255, 255, 255, .14); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .85); }
/* ---- rodada 3: as cenas de baixo do caso são HTML que não hidrata (components/dlv/Caso.vue) ---- */
/* imagens que esperam a cena chegar perto (utils/dlv-perto.ts): sem JavaScript vale o <noscript> ao lado */
html:not(.kd-js) .pg-cs img[data-srcset] { display: none; }
html.kd-js .pg-cs-cenas noscript { display: none; }
html:not(.kd-js) .pg-cs-cenas noscript { display: contents; }
.pg-cs-cab { display: grid; justify-items: center; text-align: center; }
/* cena presa (montador e fluxo): só com o movimento ligado (data-vivo, utils/dlv-movimento.ts). A cena fica alta, o
   miolo gruda na tela (sticky, altura em svh) e a rolagem avança os passos. O fundo é do bloco de fora: o trilho por
   trás tem a mesma cor da cena. Sem movimento, fica o estado final do servidor. */
.pg-cs-mt, .pg-cs-fluxo { margin-top: clamp(4rem, 9vw, 7rem); }
:is(.pg-cs-mt, .pg-cs-fluxo)[data-vivo] { height: calc(100svh + var(--n) * 34svh); padding-block: 0; }
:is(.pg-cs-mt, .pg-cs-fluxo)[data-vivo] > .pg-cs-pino { position: sticky; top: 0; display: grid; align-content: center; height: 100svh; padding-block: 4.75rem .75rem; }
.pg-cs :is(.pg-cs-mt, .pg-cs-fluxo) [data-dlv-passo] > h4 { font-family: var(--font-marca); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; }
.pg-cs :is(.pg-cs-mt, .pg-cs-fluxo) [data-dlv-passo] > p { margin-top: .25rem; font-size: .9375rem; line-height: 1.45; color: var(--dlv-sec); }
/* o montador em cinco quadros da mesma tela */
.pg-cs-mt { --n: 5; padding-block: clamp(3rem, 6vw, 5rem); background: var(--dlv-neutro); }
.pg-cs-mt-grade { display: grid; gap: 2rem; justify-items: center; }
.pg-cs-mt-texto { justify-self: stretch; }
.pg-cs-mt-passos { display: grid; gap: .5rem; margin-top: 1.5rem; }
.pg-cs-mt-passos li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; align-items: center; padding: .7rem .9rem; border-radius: 16px; background: var(--dlv-papel); border: 1px solid var(--dlv-linha); transition: opacity .3s ease, border-color .3s ease, box-shadow .3s ease; }
.pg-cs-mt-passos li > span { grid-row: span 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--dlv-acao-suave); color: var(--dlv-acao); font-size: .8125rem; font-weight: 700; transition: background .3s ease, color .3s ease; }
.pg-cs-mt-cel { width: min(16.5rem, 74%); }
.pg-cs-mt-tela { display: grid; }
.pg-cs-mt-tela img { grid-area: 1 / 1; opacity: 0; transition: opacity .4s ease; }
.pg-cs-mt-tela :is(img[data-atual], noscript img) { opacity: 1; }
.pg-cs-mt[data-vivo] .pg-cs-mt-passos li:not([data-atual]) { opacity: .5; }
.pg-cs-mt[data-vivo] .pg-cs-mt-passos li[data-atual] { border-color: var(--dlv-acao); box-shadow: 0 0 0 3px var(--dlv-acao-suave); }
.pg-cs-mt[data-vivo] .pg-cs-mt-passos li[data-atual] > span { background: var(--dlv-acao); color: #fff; }
@media (width < 64rem) {
  /* no celular a cena presa cabe numa tela: o título, o passo da vez e o aparelho */
  .pg-cs-mt[data-vivo] .pg-cs-mt-grade { gap: .9rem; }
  .pg-cs-mt[data-vivo] .pg-cs-mt-passos { margin-top: .75rem; }
  .pg-cs-mt[data-vivo] .pg-cs-mt-passos li { grid-area: 1 / 1; }
  .pg-cs-mt[data-vivo] .pg-cs-mt-passos li:not([data-atual]) { opacity: 0; visibility: hidden; }
  .pg-cs-mt[data-vivo] .pg-cs-mt-cel { width: min(15rem, 74%, calc((100svh - 21.5rem) * .46)); }
}
/* o pedido em seis passos: fila de telas (carrossel de arrastar no celular, grade no computador; com o movimento, a fila
   anda com a rolagem e o passo da vez fica no centro) */
.pg-cs-fluxo { --n: 6; }
.pg-cs-fluxo-vista { margin-top: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pg-cs-fluxo-vista::-webkit-scrollbar { display: none; }
.pg-cs-fluxo-trilho { --w: min(15rem, 62vw); display: flex; gap: 1.25rem; width: max-content; padding: .5rem calc(50vw - var(--w) / 2) 1rem; }
.pg-cs-fluxo-trilho > li { flex: none; width: var(--w); scroll-snap-align: center; display: grid; align-content: start; justify-items: center; text-align: center; transition: opacity .35s ease, scale .35s ease; }
.pg-cs-fluxo-trilho .dlv-cel { width: 100%; }
.pg-cs-fluxo-trilho h4 { display: flex; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.pg-cs-fluxo-trilho h4 > span:first-child { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--dlv-acao-suave); color: var(--dlv-acao); font-family: var(--font-texto); font-size: .8125rem; font-weight: 700; }
.pg-cs-fluxo-trilho li:nth-child(3n + 2) h4 > span:first-child { background: var(--dlv-ambar-suave); color: var(--dlv-ambar); }
.pg-cs-fluxo-trilho li:nth-child(3n) h4 > span:first-child { background: var(--dlv-verde-suave); color: var(--dlv-verde); }
.pg-cs-fluxo-trilho li > p { max-width: 15rem; }
.pg-cs-fluxo-legenda { margin-top: .75rem; text-align: center; }
.pg-cs-fluxo[data-vivo] .pg-cs-fluxo-vista { margin-top: 1rem; overflow: hidden; scroll-snap-type: none; }
.pg-cs-fluxo[data-vivo] .pg-cs-fluxo-trilho { --w: min(17rem, 62vw, calc((100svh - 22.5rem) * .46)); will-change: transform; }
.pg-cs-fluxo[data-vivo] .pg-cs-fluxo-trilho > li:not([data-atual]) { opacity: .45; scale: .9; }
/* o pedido cai no painel: do celular do cliente (pedido confirmado) para a fila (cartão de pedido novo). O estado de
   repouso é o final; o movimento passa por data-ato 0 (enviando), 1 (confirmado), 2 (a caminho) e 3 (chegou) */
.pg-cs-pn-cena { display: grid; justify-items: center; gap: 1rem; }
.pg-cs-pn-cena .pc-quadro { justify-self: stretch; font-size: .625rem; }
.pg-cs-pn-cena .pc-quadro-pista { height: 20em; }
.pg-cs-pn-cel { width: 9.5rem; }
.pg-cs-pn-tela { display: grid; align-content: center; justify-items: center; gap: 2.4cqw; margin: 2.5cqw; padding: 16cqw 7cqw 9cqw; aspect-ratio: 390 / 720; border-radius: 10.2% / 5.5%; background: var(--dlv-papel); text-align: center; font-size: 6.6cqw; line-height: 1.3; color: var(--dlv-tinta); }
.pg-cs-pn-tela > small { font-size: .85em; font-weight: 600; color: var(--dlv-sec); }
.pg-cs-pn-ok { display: grid; place-items: center; width: 26cqw; height: 26cqw; border-radius: 50%; background: var(--dlv-verde-suave); transition: scale .45s var(--ease-solto), background .3s ease; }
.pg-cs-pn-ok i { width: 38%; height: 21%; border-left: 3px solid var(--dlv-verde); border-bottom: 3px solid var(--dlv-verde); rotate: -45deg; translate: 0 -18%; transition: opacity .3s ease; }
.pg-cs-pn-tela > b { display: grid; font-family: var(--font-marca); font-size: 1.2em; font-weight: 700; line-height: 1.2; }
.pg-cs-pn-tela > b > span { grid-area: 1 / 1; transition: opacity .3s ease; }
.pg-cs-pn-antes { opacity: 0; }
.pg-cs-pn-tela > span { font-size: .9em; color: var(--dlv-sec); }
.pg-cs-pn-tela > em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-cs-pn-tela > .pg-cs-pn-env { margin-top: 2cqw; padding: 1.6cqw 4.5cqw; border-radius: 999px; background: var(--dlv-verde-suave); color: var(--dlv-verde); transition: opacity .3s ease; }
.pc-pedido-novo { justify-self: start; padding: .1em .6em; border-radius: 999px; background: var(--dlv-acao); color: #fff; font-style: normal; font-size: .82em; font-weight: 700; white-space: nowrap; }
.pc-pedido[data-chega] { transition: opacity .45s ease, scale .5s var(--ease-solto); }
.pc-pedido[data-chega] > span { -webkit-line-clamp: 1; line-clamp: 1; }
.pg-cs-pn-cena[data-ato="0"] .pg-cs-pn-antes { opacity: 1; }
.pg-cs-pn-cena[data-ato="0"] :is(.pg-cs-pn-depois, .pg-cs-pn-env, .pg-cs-pn-ok i) { opacity: 0; }
.pg-cs-pn-cena[data-ato="0"] .pg-cs-pn-ok { scale: .7; background: var(--dlv-nevoa); }
.pg-cs-pn-cena:is([data-ato="0"], [data-ato="1"], [data-ato="2"]) [data-chega] { opacity: 0; scale: .7; }
.pg-cs-pn-cena[data-ato="3"] [data-chega] { animation: pc-novo 1.2s ease-out .25s 2; }
.pg-cs-pn-cena .pg-cs-seta { flex-direction: column; }
html.dlv-vivo .pg-cs-pn-cena:is([data-ato="0"], [data-ato="1"]) .pg-cs-seta i { animation: none; }
.pg-cs-seta { display: flex; gap: .3rem; }
.pg-cs-seta i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--dlv-acao); opacity: .3; }
@media (prefers-reduced-motion: no-preference) { html.dlv-vivo .pg-cs-seta i { animation: pg-seta 1.5s ease-in-out infinite; } .pg-cs-seta i:nth-child(2) { animation-delay: .2s; } .pg-cs-seta i:nth-child(3) { animation-delay: .4s; } }
@keyframes pg-seta { 0%, 100% { opacity: .25; scale: .8 } 40% { opacity: 1; scale: 1.2 } }
.pg-cs-ag > :last-child { padding: clamp(1rem, 3vw, 2rem); border-radius: 28px; background: var(--dlv-marinho); }
.pg-cs-lanc { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-top: 1.25rem; font-size: .9375rem; font-weight: 500; }
.pg-cs-fecho { margin-top: clamp(4rem, 9vw, 7rem); }
@media (width >= 48rem) {
  .pg-cs-era { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .pg-cs-era > span { rotate: none; }
  .pg-cs-pn-cena { grid-template-columns: 9.5rem auto minmax(0, 1fr); align-items: center; justify-items: stretch; gap: .75rem; }
  .pg-cs-pn-cena .pg-cs-seta { flex-direction: row; }
  .pg-cs-pn-cena .pc-quadro { font-size: .6875rem; }
}
@media (width >= 64rem) {
  .pg-cs-cena { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 4rem; }
  .pg-cs-id { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
  .pg-cs-ag > :first-child { order: 2; }
  .pg-cs-ag { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
  .pg-cs-rolo-grade { grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); gap: 3.5rem; }
  .pg-cs-rolo[data-vivo] { min-height: 100svh; display: grid; align-items: center; }
  .pg-cs-pn-cena .pc-quadro { font-size: .75rem; }
  .pg-cs-pn-cel { width: 10.5rem; }
  .pg-cs-pn-cena { grid-template-columns: 10.5rem auto minmax(0, 1fr); }
  .pg-cs-mt-grade { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 4rem; align-items: center; }
  .pg-cs-mt-cel { width: min(17.5rem, calc((100svh - 9rem) * .46)); }
  /* sem o movimento (ou com menos movimento): os seis passos lado a lado */
  .pg-cs-fluxo:not([data-vivo]) .pg-cs-fluxo-vista { overflow: visible; }
  .pg-cs-fluxo:not([data-vivo]) .pg-cs-fluxo-trilho { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(1216px, calc(100% - 4rem)); margin-inline: auto; padding-inline: 0; }
  .pg-cs-fluxo:not([data-vivo]) .pg-cs-fluxo-trilho > li { width: auto; }
}

/* ---- a peça do passo da vez ocupa a metade direita (maior e legível) ---- */
@media (width >= 64rem) { .pg-trilho[data-vivo] .tr:not([data-modo="encaixe"]) .tr-peca .pc-ficha { width: min(100%, 31rem); padding: 1.9rem; font-size: 1.0625rem; } .pg-trilho[data-vivo] .tr:not([data-modo="encaixe"]) .pc-ficha > b { font-size: 1.375rem; } }
/* ---- print de tela no celular: recortado na parte que importa, em tamanho legível (passa da borda da moldura) ---- */
@media (width < 40rem) { .pg-cd-tela img { width: 190%; max-width: none; } }
.pg-cs .pg-cs-rolo .pg-cs-rolo-texto p { color: var(--dlv-noite-sec); }
.pc-pedido span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* rodada 3: o selo de recurso novo numa linha da ficha do trilho (pagamento online) */
.pc-ficha li .pc-ficha-novo { margin-left: .5rem; vertical-align: middle; }


/* =============== vindo de assets/css/paginas-produto.css (rodada 8): o que fica abaixo da dobra em cada página de produto ===============
   (cardápio e motor de preço, visão geral, lançamentos, copiloto do atendente, recursos do site, papéis de Como funciona) */
.pg-cd-grade, .pg-vs-grade, .pg-ia-cp-grade { display: grid; gap: 2.25rem; align-items: center; }
.pg-cd-tela { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.pc-motor { display: grid; gap: .9rem; padding: 1.35rem; border-radius: 24px; background: var(--dlv-marinho); color: #fff; box-shadow: var(--dlv-sombra); }
.pc-motor-titulo { font-size: .8125rem; font-weight: 600; color: var(--dlv-ambar-vivo); }
.pc-motor-pizza { display: flex; align-items: center; gap: .9rem; }
.pc-motor-pizza i { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: conic-gradient(var(--dlv-ambar-vivo) 0 50%, var(--dlv-rosa) 0); box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
.pc-motor-pizza div { display: grid; gap: .1rem; font-size: .875rem; color: var(--dlv-noite-sec); }
.pc-motor-pizza b { font-size: 1rem; font-weight: 600; color: #fff; }
.pc-motor-regras { display: grid; gap: .4rem; }
.pc-motor-regras li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.pc-motor-regras span { display: grid; gap: .1rem; }
.pc-motor-regras b { font-size: .9375rem; font-weight: 600; }
.pc-motor-regras small { font-size: .75rem; color: var(--dlv-noite-sec); }
.pc-motor-regras em { font-family: var(--font-marca); font-style: normal; font-weight: 600; font-size: 1.0625rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--dlv-ambar-vivo); }
@media (prefers-reduced-motion: no-preference) { html.dlv-vivo .pc-motor-regras li { animation: pc-regra 8s ease-in-out infinite; animation-delay: calc(var(--k) * 2s); } }
@keyframes pc-regra { 0%, 22% { background: rgba(255, 255, 255, .16); border-color: var(--dlv-ambar-vivo) } 28%, 100% { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1) } }
.pg-vs { background: var(--dlv-neutro); }
.pc-grafico { display: grid; gap: 1rem; }
.pc-grafico-cartao { padding: 1.25rem; border-radius: 22px; background: var(--dlv-papel); border: 1px solid var(--dlv-linha); box-shadow: var(--dlv-sombra-leve); }
.pc-grafico-cartao > p { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .9375rem; }
.pc-grafico-cartao > p b { font-weight: 600; }
.pc-pico { padding: .2rem .65rem; border-radius: 999px; background: var(--dlv-ambar-suave); color: var(--dlv-ambar); font-size: .75rem; font-weight: 600; }
.pc-barras { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: .6rem; height: 11rem; margin-top: 1.1rem; }
.pc-barras span { display: grid; grid-template-rows: 1fr auto; gap: .4rem; height: 100%; align-items: end; text-align: center; }
.pc-barras i { display: block; height: var(--v); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--dlv-acao), var(--dlv-ciano)); }
.pc-barras [data-pico] i { background: linear-gradient(180deg, var(--dlv-ambar-vivo), var(--dlv-ambar)); }
.pc-barras small { font-size: .75rem; color: var(--dlv-sec); font-variant-numeric: tabular-nums; }
.pc-funil { display: grid; gap: .55rem; }
.pc-funil-linha { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: .75rem; font-size: .875rem; color: var(--dlv-sec); }
.pc-funil-linha i { display: block; width: var(--v); height: 1.35rem; border-radius: 6px; background: var(--dlv-acao); }
.pc-funil-linha[data-k="1"] i { background: var(--dlv-ciano); }
.pc-funil-linha[data-k="2"] i { background: var(--dlv-verde); }
.pc-funil-linha[data-k="3"] i { background: var(--dlv-ambar-vivo); }
.pg-lanc { background: var(--dlv-papel); }
.pg-lanc-grade { display: grid; gap: .9rem; margin-top: clamp(2rem, 4vw, 3rem); }
.pg-lanc .dlv-cartao { padding: 1.4rem; background: linear-gradient(160deg, var(--dlv-ia-suave), var(--dlv-papel) 70%); border-color: color-mix(in srgb, var(--dlv-ia) 18%, var(--dlv-papel)); }
.pg-lanc .dlv-cartao h3 { font-size: 1.0625rem; }
@media (width >= 40rem) { .pg-lanc-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width >= 64rem) {
  .pg-cd-grade { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: 4rem; }
  .pg-vs-grade { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 4rem; }
  .pc-grafico { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; }
  .pg-lanc-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-lanc-grade.pg-lanc-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pg-ia-cp { background: var(--dlv-papel); }
.pg-ia-cp-grade > :first-child { order: 2; }
.pc-sugestao { display: grid; gap: .7rem; padding: 1.25rem; border-radius: 24px; background: var(--dlv-neutro); border: 1px solid var(--dlv-linha); box-shadow: var(--dlv-sombra); }
.pc-sugestao-topo { display: flex; align-items: center; gap: .7rem; font-size: .9375rem; }
.pc-sugestao-cartao { display: grid; gap: .6rem; padding: 1.1rem; border-radius: 18px; background: var(--dlv-papel); border: 1px solid color-mix(in srgb, var(--dlv-ia) 35%, var(--dlv-papel)); box-shadow: 0 18px 40px -22px rgba(109, 59, 245, .55); }
.pc-sugestao-cartao small { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; color: var(--dlv-ia); }
.pc-sugestao-cartao small::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.pc-sugestao-cartao p { font-size: 1rem; line-height: 1.5; color: var(--dlv-tinta); }
.pc-sugestao-cartao div { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.pc-sugestao-cartao div span { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--dlv-linha-forte); font-size: .875rem; font-weight: 600; color: var(--dlv-tinta); }
.pc-sugestao-cartao div .pc-sg-enviar { background: var(--dlv-ia); border-color: var(--dlv-ia); color: #fff; }
.pc-sugestao-modos { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .35rem; }
.pc-sugestao-modos span { padding: .3rem .75rem; border-radius: 999px; background: var(--dlv-papel); border: 1px solid var(--dlv-linha-2); font-size: .75rem; font-weight: 600; color: var(--dlv-sec); }
.pc-sugestao-modos span[data-on] { background: var(--dlv-ia-suave); border-color: var(--dlv-ia); color: var(--dlv-ia); }
@media (prefers-reduced-motion: no-preference) { html.dlv-vivo .pc-sg-enviar { animation: pc-pulso 2.6s ease-out infinite; } }
@keyframes pc-pulso { 0%, 40% { box-shadow: 0 0 0 0 rgba(109, 59, 245, .5) } 80%, 100% { box-shadow: 0 0 0 12px rgba(109, 59, 245, 0) } }
.pg-ia-lanc { background: var(--dlv-nevoa); }
@media (width >= 64rem) {
  .pg-ia-cp-grade { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: 4rem; }
  .pg-ia-cp-grade > :first-child { order: 0; }
}
.pg-st-cmp { background: var(--dlv-papel); }
.pg-st-rc { background: var(--dlv-nevoa); }
.pg-st-blocos { display: grid; gap: 1.25rem; margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.pg-st-blocos > li { display: grid; gap: 1.5rem; align-items: center; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: 28px; background: var(--dlv-papel); border: 1px solid var(--dlv-linha); }
.pg-st-blocos h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-family: var(--font-marca); font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 600; line-height: 1.2; }
.pg-st-blocos h3 + p { margin-top: .75rem; max-width: 30rem; color: var(--dlv-sec); line-height: 1.5; }
.pg-st-peca { display: grid; place-items: center; min-height: 15rem; padding: 1.5rem 1rem; border-radius: 20px; background: var(--dlv-acao-suave); perspective: 1600px; }
.pg-st-blocos > li[data-k="1"] .pg-st-peca { background: var(--dlv-verde-suave); }
.pg-st-blocos > li[data-k="2"] .pg-st-peca { background: var(--dlv-ambar-suave); }
.pg-st-peca .dlv-cel { width: min(17.5rem, 78%); margin-block: .5rem -6rem; }
.pg-st-blocos > li[data-k="0"] .pg-st-peca { overflow: hidden; align-items: start; max-height: 30rem; }
.pc-app { display: grid; gap: .9rem; width: min(100%, 20rem); }
.pc-app-tela { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; padding: 1.25rem 1rem; border-radius: 26px; background: var(--dlv-marinho); }
.pc-app-ico { display: grid; justify-items: center; gap: .35rem; font-size: .625rem; font-weight: 500; color: #fff; }
.pc-app-ico i { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 28%; background: var(--dlv-marinho-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-style: normal; }
.pc-app-ico[data-k="0"] i { background: var(--dlv-verde); }
.pc-app-ico[data-k="1"] i { background: var(--dlv-ambar-vivo); }
.pc-app-ico[data-k="2"] i { background: var(--dlv-rodape); }
.pc-app-casa i { background: var(--pz-c2); font-family: var(--font-marca); font-size: 1.5rem; font-weight: 700; box-shadow: 0 0 0 3px var(--dlv-verde-vivo); }
@media (prefers-reduced-motion: no-preference) { html.dlv-vivo .pc-app-casa i { animation: pc-casa 3.2s var(--ease-solto) infinite; } }
@keyframes pc-casa { 0%, 55%, 100% { scale: 1 } 65% { scale: 1.14 } 75% { scale: 1 } }
.pc-app-aviso { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; border-radius: 16px; background: var(--dlv-papel); box-shadow: var(--dlv-sombra-leve); font-size: .875rem; }
.pc-app-aviso b { font-weight: 600; }
.pc-app-aviso span { padding: .2rem .65rem; border-radius: 999px; background: var(--dlv-verde-suave); color: var(--dlv-verde); font-size: .75rem; font-weight: 600; }
.pc-busca { display: grid; gap: .75rem; width: min(100%, 28rem); }
.pc-busca > small { font-size: .75rem; font-weight: 600; color: var(--dlv-ambar); }
.pc-busca-res { display: grid; gap: .3rem; padding: 1.1rem 1.25rem; border-radius: 18px; background: var(--dlv-papel); box-shadow: var(--dlv-sombra-leve); }
.pc-busca-res span { font-size: .75rem; color: var(--dlv-sec); }
.pc-busca-res b { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--dlv-acao); }
.pc-busca-res p { font-size: .875rem; line-height: 1.45; color: var(--dlv-sec); }
.pc-busca-res div { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.pc-busca-res i { padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--dlv-linha-2); font-size: .75rem; font-style: normal; font-weight: 500; color: var(--dlv-tinta); }
.pc-busca-post { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; border-radius: 16px; background: var(--dlv-papel); box-shadow: var(--dlv-sombra-leve); font-size: .875rem; }
.pc-busca-post b { font-weight: 600; }
.pc-busca-post em { flex: none; padding: .2rem .65rem; border-radius: 999px; background: var(--dlv-verde-suave); color: var(--dlv-verde); font-size: .75rem; font-weight: 600; font-style: normal; }
@media (width >= 56rem) {
  .pg-st-blocos > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  .pg-st-blocos > li:nth-child(even) .pg-st-peca { order: 2; }
  .pg-st-peca { min-height: 21rem; }
}
.pg-cf-pp { background: var(--dlv-papel); }
.pg-cf-papeis { display: grid; gap: 1rem; margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.pg-cf-papel { padding: clamp(1.4rem, 3vw, 2rem); border-radius: 24px; background: var(--dlv-neutro); border: 1px solid var(--dlv-linha); }
.pg-cf-papel h3 { font-family: var(--font-marca); font-size: 1.25rem; font-weight: 600; }
.pg-cf-papel > p { margin-top: .6rem; font-weight: 600; line-height: 1.45; }
.pg-cf-papel[data-k="kadelta"] { background: var(--dlv-marinho); border-color: transparent; color: #fff; --dlv-cor: var(--dlv-acao-vivo); box-shadow: var(--dlv-sombra); }
.pg-cf-papel[data-k="kadelta"] li { color: #fff; }
.pg-cf-papel[data-k="contato"] { background: var(--dlv-verde-suave); border-color: color-mix(in srgb, var(--dlv-verde) 22%, var(--dlv-papel)); --dlv-cor: var(--dlv-verde); }
.pg-cf-papel[data-k="contato"] > p { color: var(--dlv-verde); }
.pg-cf-dp { background: var(--dlv-neutro); }
.pg-cf-dp .dlv-cartao { background: var(--dlv-papel); border-color: var(--dlv-linha); }
.pg-cf-dp .dlv-cartao h3 { font-size: 1.0625rem; }
@media (width >= 64rem) { .pg-cf-papeis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pc-barras i { background: #C4C4C4; }
.pc-barras [data-pico] i { background: var(--fx-brasa); }
.pg-lanc .dlv-cartao { background: var(--fx-branco); }