/* 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; }
}