/* As cenas da porta de fora (27/09/2026, refeitas no mesmo dia com os componentes da página): a noite que vira
   dia, a prévia que se monta sozinha, o dia do agente, a prova das duas clientes e os pedidos ao Ponto. Tudo usa
   o que a página já tinha: a moldura branca das provas com o Ponto sentado nela, o caminho desenhado, o seletor
   dos planos e as linhas das Dúvidas. Cada cena cabe numa tela; a noite é o único interlúdio escuro. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rotulo-secao { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.rotulo-pequeno { margin: 22px 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.entra { animation: sobe 500ms steps(1, end) both; }
/* a palavra que vira (public/palavra-que-vira.js): as letras soltas que deslizam, como no app */
.pv-palavra { display: inline-block; white-space: nowrap; }
.pv-letra { display: inline-block; white-space: pre; }
.pv-fantasma { position: absolute; pointer-events: none; white-space: pre; }
.pv-bloco { display: inline-block; }

/* a grade de cena: o texto à esquerda, a prova à direita (a da abertura) */
.cena-grade { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.cena-texto .titulo-misto, .pedidos-cabeca .titulo-misto { max-width: 520px; font-size: clamp(32px, 3.3vw, 42px); }
.cena-texto .bloco-texto { max-width: 440px; }
.periodo-esq { margin: 22px 0 14px; }
/* o Ponto sentado na moldura, como na prova do envio */
.prova .ponto-sentado { top: -46px; right: 22px; z-index: 3; pointer-events: none; }


/* ---------- os bilhetes do app (public/style.css, Conversar), a identidade da conversa ----------
   O seu é um retângulo de papel-2 levemente torto; o do Ponto é papel branco com a marca PONTO à
   esquerda e "obliq." à direita, os passos com o lápis e o visto, o texto e os cartões. Mensagem que vai
   para o lead é bilhete de papel com sombra de tinta, como na ficha. Nada de balão arredondado. */
.bilhete { font-size: 15px; line-height: 1.55; color: var(--tinta); }
.bilhete.entra { animation: bilheteEntra .5s both; }
@keyframes bilheteEntra {
  0% { opacity: 0; animation-timing-function: step-end; }
  1% { opacity: 1; translate: 0 18px; animation-timing-function: step-end; }
  25% { translate: 0 4px; animation-timing-function: step-end; }
  50% { translate: 0 1.5px; animation-timing-function: step-end; }
  75% { translate: 0 .3px; animation-timing-function: step-end; }
  100% { opacity: 1; translate: 0 0; }
}
.bilhete-voce { align-self: flex-end; max-width: 86%; rotate: .6deg; padding: 10px 16px; border: 1px solid var(--linha); border-radius: 5px; background: var(--papel-2); white-space: pre-wrap; }
.bilhete-agente { position: relative; align-self: flex-start; width: 100%; max-width: 96%; rotate: -.35deg; padding: 12px 16px 16px; border: 1px solid var(--linha); border-radius: 6px; background: var(--branco); box-shadow: 0 18px 34px -24px rgba(27, 24, 20, .5); }
.bilhete-marca { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.bilhete-marca .ass-obliq { margin-left: auto; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; text-transform: none; color: var(--tinta); font-variation-settings: 'SOFT' 55, 'opsz' 80; }
.ass-ponto { color: var(--azul); }
.bilhete-marca .ponto svg { width: 36px; height: 24px; }
.bilhete-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bilhete-passos:empty { display: none; }
.bilhete-passos li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-2); }
.bilhete-passos li.feito { color: var(--tinta-3); }
.bilhete-passo-icone { display: grid; place-items: center; width: 20px; height: 20px; }
.bilhete-passo-icone .il { --il-s: 18px; }
.il--vivo { animation: ilVivo 250ms steps(3, jump-end) infinite; }
.bilhete-rascunho { position: relative; margin: 0 -4px; height: 74px; }
.bilhete-rascunho:empty { display: none; }
.bilhete-rascunho .pp-rascunho { margin: 0; }
.bilhete-status { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; font-size: 13px; color: var(--tinta-2); }
.bilhete-status[hidden] { display: none; }
.bilhete-status-tempo { flex-shrink: 0; font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.bilhete-passos:not(:empty) ~ .bilhete-texto:not(:empty) { margin-top: 10px; }
.bilhete-texto p { margin: 0; }
.bilhete-texto .pp-palavra { display: inline-block; }
.bilhete-cartoes:not(:empty) { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.conv-cartao { rotate: .35deg; }
/* a mensagem para o lead: o bilhete da ficha */
.bilhete-msg { display: block; padding: 10px 14px; background: #FFFDF8; border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 18px 30px -24px rgba(27, 24, 20, .45); font-size: 14px; line-height: 1.45; color: var(--tinta); }
.bilhete-msg-rotulo { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
/* o chip do ajudante, em cima da conversa, e o ajudante sentado no cartão da tarefa */
.conv-ajudante-chip { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 4px 14px 4px 6px; border: 1px solid var(--linha); border-radius: 999px; background: var(--branco); box-shadow: 0 10px 22px -16px rgba(27, 24, 20, .5); color: var(--tinta); font: inherit; }
.conv-ajudante-chip .ponto svg { width: 36px; height: 24px; }
.conv-ajudante-texto { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.conv-ajudante-texto strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-ajudante-texto small { font-size: 11.5px; color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.conv-ajudante-chip.entra { animation: sobe 500ms steps(1, end) both; }
.tarefa { position: relative; margin-top: 26px; padding: 10px 12px; background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; rotate: .35deg; }
.tarefa-cabeca { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.tarefa-cabeca .il { --il-s: 18px; }
.tarefa-cabeca .direita { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.tarefa-linha { margin: 3px 0 0 26px; font-size: 12.5px; color: var(--tinta-2); }
.ajudante-ponto { position: absolute; top: -30px; z-index: 3; pointer-events: none; }
.ajudante-ponto svg { width: 48px; height: 32px; }

/* ---------- a noite ---------- */
.noite { --n-fundo: #0B0D13; --n-tinta: #EDE8DC; --n-tinta-2: #9A968C; --n-balao: #171A24; --n-linha: rgba(237, 232, 220, .14); --n-azul: #93A8FF;
  position: relative; padding: 64px 0 56px; background: var(--n-fundo); color: var(--n-tinta); border-bottom: 1px solid var(--linha); }
/* noite e dia trocam num fade em poses da casa: 8 poses de 125 ms, sem curva lisa (27/09/2026). As cores são
   propriedades registradas para o navegador conseguir animá-las. */
@property --n-fundo { syntax: '<color>'; inherits: true; initial-value: #0B0D13; }
@property --n-tinta { syntax: '<color>'; inherits: true; initial-value: #EDE8DC; }
@property --n-tinta-2 { syntax: '<color>'; inherits: true; initial-value: #9A968C; }
@property --n-balao { syntax: '<color>'; inherits: true; initial-value: #171A24; }
@property --n-linha { syntax: '<color>'; inherits: true; initial-value: rgba(237, 232, 220, .14); }
@property --n-azul { syntax: '<color>'; inherits: true; initial-value: #93A8FF; }
.noite { transition: --n-fundo 1s steps(8, end), --n-tinta 1s steps(8, end), --n-tinta-2 1s steps(8, end), --n-balao 1s steps(8, end), --n-linha 1s steps(8, end), --n-azul 1s steps(8, end); }
.noite.dia { --n-fundo: #FAF7F0; --n-tinta: #1B1814; --n-tinta-2: #5A564D; --n-balao: #FFFFFF; --n-linha: rgba(27, 24, 20, .12); --n-azul: #2946D8; }
.noite-miolo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.noite-relogio { display: flex; flex-direction: column; }
.noite-dia { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--n-tinta-2); }
.noite-hora { font-family: var(--display); font-weight: 600; font-size: clamp(76px, 12vw, 156px); line-height: .95; letter-spacing: -0.03em; font-variation-settings: 'SOFT' 55, 'opsz' 80; font-variant-numeric: tabular-nums; }
/* a conversa numa coluna só: você à direita, o Ponto e o WhatsApp à esquerda, com a mesma borda */
.noite-cena { display: grid; gap: 12px; width: min(440px, 100%); justify-self: end; }
/* a conversa da noite nos bilhetes do app, no escuro como o app no tema escuro: uma coluna só, com a altura
   guardada para a resposta não empurrar a frase quando chega */
.noite-cena { align-self: start; width: min(440px, 100%); min-height: 270px; justify-self: end; display: flex; flex-direction: column; gap: 14px; }
.noite-cena .bilhete { font-size: 15px; }
.noite-voce { align-self: flex-end; max-width: 86%; margin: 0; background: var(--n-balao); border-color: var(--n-linha); color: var(--n-tinta); }
.noite-agente { width: 100%; max-width: 100%; background: var(--n-balao); border-color: var(--n-linha); box-shadow: none; }
.noite-agente .bilhete-marca { color: var(--n-tinta-2); margin-bottom: 4px; }
.noite-agente .ass-obliq { color: var(--n-tinta); }
.noite-agente .ass-ponto { color: var(--n-azul); }
.noite-agente .ponto svg { width: 36px; height: 24px; }
.noite .pt-b { fill: var(--n-azul); }
.noite .pt-k { fill: var(--n-balao); }
.noite .pt-g { fill: var(--n-tinta-2); }
.noite-status { margin: 0; color: var(--n-tinta); }
.noite-zap { font-size: 15px; }
.noite-zap[hidden] { display: none; }
.noite-frase { margin: 44px 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4.8vw, 60px); line-height: 1.1; letter-spacing: -0.02em; font-variation-settings: 'SOFT' 55, 'opsz' 80; }
.nf-1 { display: block; }
.cidade { display: inline-block; }
.cidade input { font: inherit; letter-spacing: inherit; font-variation-settings: inherit; color: var(--n-azul); background: transparent; border: 0; border-bottom: 2px dashed color-mix(in srgb, var(--n-azul) 55%, transparent); padding: 0; margin: 0; max-width: 100%; }
.cidade input::placeholder { color: inherit; opacity: .8; }
.cidade input:focus { outline: none; border-bottom-style: solid; }
/* a régua invisível do nome da cidade fica presa no canto: solta, ela alargava a página no celular (27/09/2026) */
.cidade-medida { position: absolute; left: 0; top: 0; visibility: hidden; white-space: pre; pointer-events: none; }
.noite-responde { position: relative; white-space: nowrap; }
.noite-responde::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: -.08em; height: .22em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c30-5 62-6 96-4s64 3 98-3' fill='none' stroke='%232946D8' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left / 100% 100%; clip-path: inset(0 100% 0 0); }
.noite-responde.risca::after { animation: risca 500ms steps(4, end) forwards; }
@keyframes risca { to { clip-path: inset(0 0 0 0); } }
.noite-nota { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; margin: 16px 0 0; font-size: 13.5px; color: var(--n-tinta-2); }
.noite-nota .link { font-size: 13.5px; color: var(--n-tinta); background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--ui); }

/* ---------- a prévia que se monta: o caminho à esquerda, a moldura à direita ---------- */
.montagem-passos { margin-top: 4px; gap: 0; }
.montagem-passos li { display: block; padding: 0 0 10px; }
.montagem-passos li:not(:last-child)::after { bottom: -8px; }
.montagem-passos button { display: grid; grid-template-columns: 44px auto; grid-template-rows: auto auto; column-gap: 12px; padding: 6px 0; border: 0; background: none; color: var(--tinta); text-align: left; font-family: var(--ui); cursor: pointer; opacity: .42; }
.montagem-passos button .il { grid-row: 1 / 3; align-self: center; }
.montagem-passos strong { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.2; }
.montagem-passos small { font-size: 14px; color: var(--tinta-2); }
.montagem-passos button:hover, .montagem-passos button.feito { opacity: .75; }
.montagem-passos button.ativo { opacity: 1; }
/* (03/10/2026, o Vitor: a linha azul "fica meio ruidosa" e no celular quebrava em duas) a etapa da vez se destaca só
   pela tinta cheia, com as outras esmaecidas */
.montagem-passos button.ativo strong { text-decoration: none; }
.navegador-barra { display: flex; align-items: center; gap: 6px; padding: 2px 4px 10px; }
.navegador-barra i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--tinta) 16%, transparent); }
.navegador-url { flex: 1; min-width: 0; margin-left: 8px; padding: 4px 12px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linha); font-size: 12.5px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.navegador-url:hover { color: var(--tinta); }
.navegador-tela { position: relative; height: 470px; overflow: hidden; border-radius: 3px; background: var(--papel-2); }
.m-camada { position: absolute; inset: 0; padding: 20px; overflow: hidden; }
.m-rotulo { margin: 0 0 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
/* 1. o material: as fotos caem na mesa, uma por pose, um pouco tortas */
.m-fotos { position: relative; height: calc(100% - 30px); }
/* mais específica que ".prova-moldura img { width: 100% }" da página, que abria cada foto na largura da moldura */
.navegador-tela .m-foto { width: 23%; height: auto; }
.m-foto { position: absolute; width: 23%; aspect-ratio: 4 / 5; object-fit: cover; border: 5px solid var(--branco); border-radius: 3px; box-shadow: 0 10px 22px -12px rgba(27, 24, 20, .5); background: var(--papel); }
.m-marca { position: absolute; right: 4%; bottom: 3%; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; background: var(--branco); border: 1px solid var(--linha); border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 18px -12px rgba(27, 24, 20, .4); }
.m-marca img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
/* 2. as cores medidas */
.m-cores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-cor { border-radius: 8px; border: 1px solid var(--linha); overflow: hidden; background: var(--branco); }
.m-cor i { display: block; height: 52px; }
.m-cor p { margin: 0; padding: 6px 9px 7px; font-size: 12px; line-height: 1.3; }
.m-cor b { display: block; font-size: 12px; }
.m-cor span { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.m-pares { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.m-par { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.m-par i { display: grid; place-items: center; height: 26px; border-radius: 6px; font: 700 12.5px var(--ui); font-style: normal; border: 1px solid var(--linha); }
.m-par b { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-par em { font-style: normal; font-weight: 700; color: var(--verde); }
.m-par.reprova em { color: #B4432B; }
/* 3. a letra */
.m-letra { display: grid; place-content: center; height: 100%; text-align: center; }
.m-aa { font-size: clamp(90px, 12vw, 150px); line-height: 1; }
.m-letra-nomes { margin: 14px 0 0; font-size: 15px; }
.m-registro { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--tinta); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* 4. a página, com a crítica dela mesma na margem */
.m-pagina { position: absolute; inset: 0; overflow: hidden; }
.m-pagina img { display: block; width: 100%; height: auto; }
/* a correção a lápis: a nota circulada à mão, o risco e a nota nova, num bilhete de papel torto */
.m-nota { position: absolute; right: 14px; top: 14px; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; width: min(300px, 86%); padding: 12px 14px; background: #FFFDF8; border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 18px 30px -22px rgba(27, 24, 20, .5); rotate: -1.4deg; }
.m-nota-notas { display: flex; gap: 2px; }
.m-nota-num { position: relative; display: grid; place-items: center; width: 62px; height: 42px; color: #B4432B; }
.m-nota-num[hidden] { display: none; }
.m-nota-num b { font-family: var(--display); font-weight: 700; font-size: 25px; font-variation-settings: 'SOFT' 55, 'opsz' 60; font-variant-numeric: tabular-nums; }
.m-nota-num svg { position: absolute; inset: -4px -2px; width: calc(100% + 4px); height: calc(100% + 8px); overflow: visible; }
.m-nota-num path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-nota-num.traca path { animation: traco 750ms steps(6, end) forwards; }
.m-nota-num.riscada b { opacity: .55; }
.m-depois { color: var(--verde); }
@keyframes traco { to { stroke-dashoffset: 0; } }
.m-nota-texto { display: grid; gap: 2px; margin: 0; font-size: 13px; line-height: 1.4; }
.m-nota-rotulo { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #B4432B; }
.m-nota.ok .m-nota-rotulo { color: var(--verde); }
/* 5. o link no WhatsApp */
.m-zap { display: grid; place-content: center; height: 100%; }
.m-zap-balao { width: min(340px, 100%); padding: 7px; background: var(--branco); border: 1px solid var(--linha); border-radius: 16px; border-bottom-right-radius: 4px; box-shadow: 0 18px 36px -22px rgba(27, 24, 20, .5); }
.m-zap-cartao { border-radius: 10px; overflow: hidden; border: 1px solid var(--linha); }
.m-zap-cartao img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: top; }
.m-zap-cartao span { display: block; padding: 7px 10px; font-size: 12.5px; color: var(--tinta-2); background: var(--papel); }
.m-zap-texto { margin: 8px 6px 2px; font-size: 14px; overflow-wrap: anywhere; }

/* ---------- o modo autônomo: as réguas do app e o relógio na moldura ---------- */
.regras { display: grid; gap: 12px; margin: 22px 0 0; max-width: 440px; }
.regua-ctl { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
.regua-nome { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.regua-ctl output { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
/* a régua: marcas a lápis em cada valor possível e o traço da tinta; o cursor é a marca grossa do app */
.regua-pista { grid-column: 1 / -1; position: relative; height: 30px; margin-top: 2px; }
.regua-pista::before { content: ''; position: absolute; left: 9px; right: 9px; top: 6px; height: 11px; opacity: .4;
  background: repeating-linear-gradient(to right, var(--tinta) 0 1.5px, transparent 1.5px calc((100% - 1.5px) / var(--marcas))); }
.regua-pista::after { content: ''; position: absolute; left: 9px; right: 9px; top: 17px; border-top: 2px solid var(--tinta); border-radius: 2px; }
.regua-pista input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 30px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.regua-pista input::-webkit-slider-runnable-track { height: 30px; background: transparent; }
.regua-pista input::-moz-range-track { height: 30px; background: transparent; }
.regua-pista input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 30px; border: 7px solid transparent; border-radius: 4px; background: var(--tinta); background-clip: padding-box; }
.regua-pista input::-moz-range-thumb { width: 4px; height: 30px; border: 7px solid transparent; border-radius: 4px; background: var(--tinta); background-clip: padding-box; }
.regua-pista input:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
/* as mensagens que chamam você: balões do lead, 2 por linha */
.chama { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 460px; }
.chama-msg { display: grid; gap: 4px; padding: 10px 12px; background: #FFFDF8; border: 1px solid var(--linha); border-radius: 6px; text-align: left; font-family: var(--ui); color: var(--tinta); cursor: pointer; box-shadow: 0 10px 20px -18px rgba(27, 24, 20, .5); }
.chama-msg:hover { border-color: color-mix(in srgb, var(--tinta) 45%, transparent); }
.chama-msg.ativo { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.chama-tipo { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.chama-tipo .il { --il-s: 16px; }
.chama-texto { font-size: 14px; line-height: 1.35; }
.dial-moldura { position: relative; padding: 14px; }
.dial-svg { display: block; width: 100%; max-width: 440px; margin: 0 auto; }
/* centrados pela margem, não por transform: a animação de entrada (sobe) usa transform */
.dial-centro, .dial-aviso { position: absolute; inset: 0; margin: auto; height: fit-content; }
.dial-centro { display: grid; justify-items: center; text-align: center; width: 170px; pointer-events: none; }
.dial-centro .ponto svg { width: 72px; height: 48px; }
.dial-hora { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.dial-faz { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--tinta-2); min-height: 2.7em; }
.dial-aviso { z-index: 3; width: min(250px, 70%); padding: 12px 14px; background: var(--branco); border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 18px 36px -22px rgba(27, 24, 20, .55); font-size: 14px; text-align: left; }
.dial-aviso[hidden], .dial-centro[hidden] { display: none; }
.dial-aviso .quem { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.dial-aviso .fala-lead { display: block; margin: 4px 0 8px; font-size: 15px; }
.dial-aviso .dele { display: flex; align-items: flex-start; gap: 8px; padding-top: 8px; border-top: 1px solid var(--linha); color: var(--tinta-2); }
.dial-aviso .dele .ponto svg { width: 36px; height: 24px; }

/* ---------- a prova: as fichas à esquerda, o site no ar na moldura ---------- */
.casos { display: grid; gap: 12px; margin-top: 22px; max-width: 470px; }
.caso { display: grid; gap: 12px; width: 100%; padding: 14px 16px; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; text-align: left; font-family: var(--ui); color: var(--tinta); cursor: pointer; opacity: .72; }
.caso:hover { opacity: .9; }
.caso.ativo { opacity: 1; border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta), 0 20px 36px -28px rgba(27, 24, 20, .5); }
.caso-topo { display: flex; align-items: center; gap: 12px; }
.caso-topo strong { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.2; font-variation-settings: 'SOFT' 55, 'opsz' 40; }
.caso-topo small { display: block; font-size: 13px; color: var(--tinta-2); }
/* o anel da nota, o mesmo do app: a volta é a nota de verdade */
.caso-nota { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--verde) calc(var(--n) * 1%), color-mix(in srgb, var(--tinta) 10%, transparent) 0); }
.caso-nota::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--branco); }
.caso-nota b { position: relative; font-family: var(--display); font-size: 15px; }
.caso-tempo { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.caso-tempo::before { content: ''; position: absolute; left: 5px; right: 30%; top: 5px; border-top: 1.5px dashed color-mix(in srgb, var(--tinta) 30%, transparent); }
.caso-tempo li { position: relative; display: grid; gap: 1px; padding-top: 16px; }
.caso-tempo li::before { content: ''; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--branco); border: 1.5px solid var(--tinta); }
.caso-tempo li:last-child::before { background: var(--tinta); }
.caso-tempo time { font-family: var(--display); font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.caso-tempo span { font-size: 12.5px; color: var(--tinta-2); }
.caso-msg { display: block; padding: 8px 12px 9px; background: #FFFDF8; border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 18px 30px -24px rgba(27, 24, 20, .45); font-size: 14px; }
.caso-msg span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.caso-tela { display: block; height: 470px; border-radius: 3px; background-color: var(--papel-2); background-size: 100% auto; background-position: 50% 0; background-repeat: no-repeat; }

/* ---------- os pedidos: as abas, a lista das Dúvidas e a conversa na moldura ---------- */
.pedidos-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.pedidos-cabeca .bloco-texto { margin: 0; }
.pedidos-abas { display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 24px 0 18px; padding: 4px; background: var(--papel-2); border: 1px solid var(--linha); border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.pedidos-abas::-webkit-scrollbar { display: none; }
.pedidos-aba { flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--tinta-2); font: 600 14.5px var(--ui); cursor: pointer; }
.pedidos-aba .il { --il-s: 26px; }
.pedidos-aba.ativo { background: var(--branco); color: var(--tinta); box-shadow: 0 1px 3px rgba(27, 24, 20, .15); }
.pedidos-mesa { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.pedidos-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(27, 24, 20, .14); }
.pedidos-lista > li { border-bottom: 1px solid rgba(27, 24, 20, .14); }
.pedido { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 15px 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--tinta);
  font-family: var(--display); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; font-variation-settings: 'SOFT' 55, 'opsz' 18; }
/* a seta a lápis: anda um passo quando o ponteiro chega, e fica azul no pedido da vez */
.pedido::after { content: ''; flex: none; width: 30px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cpath d='M2 8.5c7-1 15-1.2 24-.4M20 3.5l6 4.6-6.4 4.4' fill='none' stroke='%235A564D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; transition: transform 250ms steps(2, end); }
.pedido:hover::after { transform: translateX(5px); }
.pedido.ativo { color: var(--azul); }
.pedido-il { flex: none; }
.pedido-texto { flex: 1; min-width: 0; }
.pedido:hover .pedido-il { animation: ilVivo 250ms steps(3, jump-end) infinite; }
.pedido.ativo::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cpath d='M2 8.5c7-1 15-1.2 24-.4M20 3.5l6 4.6-6.4 4.4' fill='none' stroke='%232946D8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transform: translateX(5px); }
/* o prospect em miniatura: a lateral e a conversa do app, na escala da moldura */
.pedidos-mesa { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; }
.mini-app { display: grid; grid-template-columns: 168px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 450px; padding: 0; overflow: hidden; }
.mini-lateral { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding: 14px 12px 12px; background: var(--papel); border-right: 1px solid var(--linha); font-size: 12.5px; }
.mini-lateral .il { --il-s: 16px; }
.mini-marca { display: flex; align-items: baseline; gap: 5px; margin: 0 0 10px; padding: 0 2px; white-space: nowrap; }
.mini-marca .il { align-self: center; margin-right: 2px; }
.mini-marca b { font-family: var(--display); font-weight: 700; font-size: 14.5px; font-variation-settings: 'SOFT' 55, 'opsz' 40; }
.mini-marca small { font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.mini-marca i { font-style: normal; font-family: var(--display); font-weight: 700; font-size: 11px; }
.mini-marca em { font-style: normal; color: var(--azul); }
.mini-busca { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 4px; padding: 6px 8px; border-radius: 999px; background: var(--tinta); color: var(--papel); font-weight: 700; font-size: 12px; }
.mini-busca .il { filter: invert(1) sepia(.25) brightness(1.04); }
.mini-grupo { margin: 6px 6px 2px; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.mini-item { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 7px; color: var(--tinta-2); white-space: nowrap; }
.mini-item > span:not(.il) { overflow: hidden; text-overflow: ellipsis; }
.mini-item.ativo { background: var(--branco); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 3px rgba(27, 24, 20, .12); }
.mini-item.pisca { background: color-mix(in srgb, var(--azul) 10%, var(--branco)); color: var(--tinta); }
.mini-num { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.mini-luz { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--tinta) 18%, transparent); }
.mini-luz.ligada { background: var(--verde); }
.mini-pe { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 8px 6px 2px; border-top: 1px solid var(--linha); }
.mini-pe strong { display: block; font-size: 12px; }
.mini-pe small { display: block; font-size: 11px; color: var(--tinta-2); }
.mini-wa { width: 20px; height: 20px; color: var(--verde); flex: none; }
.mini-conversa { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--papel); }
.mini-ajudantes { position: absolute; left: 0; right: 0; top: 8px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; }
.mini-fio { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 14px; padding: 46px 16px 16px; scrollbar-width: none; }
.mini-fio::-webkit-scrollbar { display: none; }
.mini-fio .bilhete { font-size: 13.5px; }
.mini-fio .bilhete-agente { max-width: 100%; }
.mini-caixa { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 5px 5px 5px 14px; background: var(--branco); border: 1px solid var(--linha); border-radius: 999px; }
.mini-caixa input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 13.5px var(--ui); color: var(--tinta); padding: 6px 0; }
.mini-caixa input:focus { outline: none; }
.mini-enviar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--tinta); cursor: pointer; }
.mini-enviar .il { --il-s: 16px; filter: invert(1) sepia(.25) brightness(1.04); }
/* o que ele mostra junto da resposta */
.art { display: grid; gap: 6px; margin-top: 9px; }
.art-linha { display: flex; align-items: center; gap: 9px; padding: 7px 9px; background: var(--papel); border: 1px solid var(--linha); border-radius: 6px; font-size: 13px; line-height: 1.3; }
.art-linha small { display: block; color: var(--tinta-2); font-size: 12px; }
.art-linha .direita { margin-left: auto; font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
.art-linha .ok { color: var(--verde); font-weight: 700; }
.mini-nota { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(var(--verde) calc(var(--n) * 1%), color-mix(in srgb, var(--tinta) 10%, transparent) 0); }
.mini-nota::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--papel); }
.mini-nota b { position: relative; font: 700 11.5px var(--display); }
.art-zap { padding: 8px 12px; background: #FFFDF8; border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 14px 26px -22px rgba(27, 24, 20, .45); font-size: 13px; }
.art-zap.dele { background: var(--papel-2); box-shadow: none; rotate: -.3deg; }
.art-rotulo { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.art-riscado { text-decoration: line-through; color: var(--tinta-3); }
.art-botao { justify-self: start; padding: 6px 14px; border-radius: 999px; background: var(--tinta); color: var(--papel); font-size: 12.5px; font-weight: 700; }
.art-previa { border: 1px solid var(--linha); border-radius: 6px; overflow: hidden; }
.art-previa img { display: block; width: 100%; height: 130px; object-fit: cover; object-position: top; }
.art-previa span { display: block; padding: 6px 9px; font-size: 12px; color: var(--tinta-2); background: var(--papel); }
.art-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.art-numeros div { padding: 8px 9px; background: var(--papel); border: 1px solid var(--linha); border-radius: 6px; }
.art-numeros b { display: block; font: 700 22px var(--display); line-height: 1; }
.art-numeros span { font-size: 11.5px; color: var(--tinta-2); }
/* no celular a resposta abre embaixo do pedido tocado */
.pedido-inline { padding: 0 0 16px; display: grid; gap: 8px; }
.pedido-inline[hidden] { display: none; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .cena-grade, .noite-miolo, .pedidos-mesa, .pedidos-cabeca { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .noite-miolo { gap: 18px; }
  .noite-cena { justify-self: stretch; width: 100%; }
  .noite-frase { margin-top: 28px; }
  .prova .ponto-sentado { right: 14px; }
  /* a prévia: a moldura em cima, os passos numa fileira embaixo dela */
  .so-ele .cena-grade, .sozinho .cena-grade, .prova-real .cena-grade { row-gap: 14px; }
  .cena-texto > .rotulo-secao { margin-bottom: -6px; }
  .cena-texto > .bloco-texto { margin-top: 0; }
  .montagem-palco { order: 2; margin-top: 40px; }
  .so-ele .cena-texto { display: contents; }
  .so-ele .rotulo-secao, .so-ele .titulo-misto, .so-ele .bloco-texto { order: 1; }
  .so-ele .periodo-esq { order: 3; margin: 0; }
  .montagem-passos { order: 4; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; }
  .montagem-passos li, .montagem-passos li:nth-child(even) { margin: 0; padding: 0; }
  .montagem-passos li::after { display: none; }
  .montagem-passos button { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; text-align: center; row-gap: 4px; padding: 4px 0; }
  .montagem-passos button .il { grid-row: auto; }
  .montagem-passos strong { font-size: 12px; line-height: 1.2; }
  .montagem-passos small { display: none; }
  .navegador-tela { height: 330px; }
  .m-cor i { height: 34px; }
  .navegador-tela .m-foto { width: 28%; }
  .m-par { grid-template-columns: 38px minmax(0, 1fr) auto; font-size: 12px; }
  /* o relógio em cima, as réguas e os balões embaixo */
  .sozinho .cena-texto, .prova-real .cena-texto { display: contents; }
  .sozinho .rotulo-secao, .sozinho .titulo-misto, .sozinho .bloco-texto { order: 1; }
  .dial { order: 2; margin-top: 8px; }
  .regras { order: 3; margin: 0; }
  .sozinho .rotulo-pequeno { order: 4; margin: 0 0 -16px; }
  .chama { order: 5; }
  .dial-svg { max-width: 300px; }
  .dial-centro { width: 118px; }
  .dial-centro .ponto svg { width: 48px; height: 32px; }
  .dial-hora { font-size: 20px; }
  .dial-faz { font-size: 11px; min-height: 0; }
  .prova-real .rotulo-secao, .prova-real .titulo-misto, .prova-real .bloco-texto { order: 1; }
  .caso-palco { order: 2; margin-top: 40px; }
  .casos { order: 3; margin: 0; }
  .caso-tela { height: 300px; }
  .casos { max-width: none; }
  /* os pedidos: sem a moldura da conversa; a resposta abre no próprio pedido */
  .pedidos-palco { display: none; }
  /* comando de terminal não roda no celular: fica só o botão de baixar */
  .instalar-ou, .instalar .comando { display: none; }
  .pedido-inline .bilhete { font-size: 14px; }
  .pedido-inline { display: flex; flex-direction: column; gap: 12px; }
  .pedidos-abas { width: 100%; margin: 22px 0 10px; }
  .pedido { font-size: 17px; padding: 15px 0; }
}
@media (max-width: 480px) {
  .chama { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .chama-msg { padding: 8px 10px; }
  .chama-texto { font-size: 13px; }
  .caso-tempo span { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .noite { transition: none; }
  .m-nota-num path { stroke-dashoffset: 0; animation: none !important; }
  .noite-responde.risca::after { animation: none; clip-path: none; }
  .pedido::after { transition: none; }
}

/* a estrada da noite (01/10/2026, o Vitor: "no começo também, na demonstração do agente que fica de noite e de dia
   tem muito espaço vazio"; e a revisão que via o prospect "sem organização"): a estrada dos leads do app (A semana)
   em miniatura, embaixo do relógio. As paradas, as dicas, os ícones e as cores são os do app; os bilhetes andam
   com a noite (escritos às 21:19, enviados às 09:00, a resposta às 09:41). A via é a mesma conta do app: curva pelos
   marcos, duas margens a lápis e a faixa tracejada, redesenhada quando a largura muda. */
.noite { --c-prontos: #ABA496; --c-abertura: #E2B55E; --c-respondeu: #C49AD6; --c-reuniao: #6CC0C0; }
.noite.dia { --c-prontos: #7A7367; --c-abertura: #B07A1E; --c-respondeu: #8A5A9C; --c-reuniao: #2E7C7E; }
.noite-estrada { position: relative; margin-top: 26px; }
.ne-trilho { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; }
.ne-via { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.ne-via path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ne-via-chao { stroke: var(--n-balao); }
.ne-via-margem { stroke: var(--n-tinta-2); stroke-width: 1.2; opacity: .7; }
.ne-via-margem.passada { stroke-width: .7; opacity: .35; }
.ne-via-faixa { stroke: var(--n-tinta-2); stroke-width: 1.2; stroke-dasharray: 6 9; opacity: .7; }
.ne-parada { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; text-align: center; }
.ne-parada[data-k="prontos"] { --cor: var(--c-prontos); }
.ne-parada[data-k="abertura"] { --cor: var(--c-abertura); }
.ne-parada[data-k="respondeu"] { --cor: var(--c-respondeu); }
.ne-parada[data-k="reuniao"] { --cor: var(--c-reuniao); }
.ne-parada.baixa { padding-top: 30px; }
.ne-marco { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--cor); border-radius: 52% 48% 50% 47% / 48% 53% 47% 52%; background: var(--n-fundo); box-shadow: 0 0 0 4px var(--n-fundo); rotate: -3deg; }
.ne-parada.baixa .ne-marco { rotate: 4deg; }
.ne-marco .il { --il-s: 26px; }
.noite:not(.dia) .noite-estrada .il { filter: invert(1) sepia(.25) brightness(1.04); }
.ne-nome { display: inline-flex; align-items: baseline; gap: 5px; margin-top: 5px; font-family: var(--display); font-weight: 600; font-size: 14.5px; line-height: 1.1; color: var(--n-tinta); font-variation-settings: 'SOFT' 55, 'opsz' 30; }
.ne-nome b { min-width: 18px; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--cor) 22%, transparent); font-family: var(--ui); font-size: 10.5px; font-weight: 700; color: var(--n-tinta); font-variant-numeric: tabular-nums; }
.ne-parada > small { font-size: 11px; line-height: 1.3; color: var(--n-tinta-2); }
.ne-pilha { position: relative; width: 100%; min-height: 58px; margin-top: 12px; }
.ne-vazio { margin: 6px 0 0; font-size: 11.5px; font-style: italic; color: var(--n-tinta-2); opacity: .8; }
/* o bilhete de cima da pilha, preso com o alfinete; as folhas de trás dizem que há mais */
.ne-bilhete { position: relative; display: grid; gap: 1px; padding: 11px 8px 7px; text-align: left; background: var(--n-balao); border: 1px solid var(--n-linha); border-top: 2px solid var(--cor); border-radius: 4px; rotate: var(--giro, 0deg); box-shadow: 0 12px 20px -18px rgba(0, 0, 0, .6); }
.ne-pilha[data-n="2"] .ne-bilhete, .ne-pilha[data-n="3"] .ne-bilhete { box-shadow: 3px 3px 0 -1px var(--n-balao), 3px 3px 0 0 var(--n-linha), 0 12px 20px -18px rgba(0, 0, 0, .6); }
.ne-pilha[data-n="3"] .ne-bilhete { box-shadow: 3px 3px 0 -1px var(--n-balao), 3px 3px 0 0 var(--n-linha), 6px 6px 0 -1px var(--n-balao), 6px 6px 0 0 var(--n-linha), 0 12px 20px -18px rgba(0, 0, 0, .6); }
.ne-bilhete .ne-alfinete { position: absolute; top: -9px; left: 50%; margin-left: -9px; --il-s: 18px; }
.ne-bilhete strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--n-tinta); }
.ne-bilhete small { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--n-tinta-2); }
.ne-bilhete small b { padding: 0 4px; border-radius: 3px; background: color-mix(in srgb, #5AB08A 22%, transparent); color: var(--n-tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
/* chega: cai de cima em poses (o bilhete do app), e o alfinete faz a ação dele */
.ne-bilhete.chega { animation: neChega .375s steps(3, jump-end) backwards; }
@keyframes neChega { from { opacity: 0; transform: translateY(-12px); rotate: calc(var(--giro, 0deg) + 6deg); } 34% { opacity: 1; } to { opacity: 1; transform: none; rotate: var(--giro, 0deg); } }
.ne-bilhete.chega .ne-alfinete { animation: neAlfinete 1.5s steps(12, jump-none) both; }
@keyframes neAlfinete { from { background-position: calc(var(--il-s) * (var(--il-p) + 3) * -1) 0; } to { background-position: calc(var(--il-s) * (var(--il-p) + 14) * -1) 0; } }
@media (max-width: 900px) {
  .noite-estrada { margin-top: 18px; }
  .ne-trilho { gap: 0 6px; }
  .ne-parada > small { display: none; }
  .ne-nome { font-size: 13px; }
  .ne-marco { width: 38px; height: 38px; }
  .ne-marco .il { --il-s: 22px; }
  .ne-bilhete { padding: 10px 6px 6px; }
  .ne-bilhete strong { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .ne-bilhete.chega, .ne-bilhete.chega .ne-alfinete { animation: none; } }
.ne-via { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }

/* a lista do Ponto na noite (01/10/2026): o que ele fez, passo a passo, com a tinta da noite ou do dia */
.noite-passos { gap: 5px; margin-top: 2px; }
.noite-passos li { align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--n-tinta); }
.noite-passos li.feito { color: var(--n-tinta-2); }
.noite-passos .bilhete-passo-icone { margin-top: -1px; }
.noite:not(.dia) .noite-agente .il { filter: invert(1) sepia(.25) brightness(1.04); }
.noite-agente .bilhete-cartoes:not(:empty) { margin-top: 12px; }
.noite-cena { min-height: 0; }
@media (max-width: 900px) { .noite-cena { min-height: 452px; } }
/* a altura final da coluna do Ponto (a lista inteira e a resposta), para a manchete não pular enquanto as linhas entram */
@media (min-width: 901px) { .noite-cena { min-height: 404px; } .noite-frase { margin-top: 36px; } }

/* os recém-abertos (01/10/2026): o livro de registro da cidade. A folha branca com o fio por dentro, as fichas em
   linha (o ramo no medalhão, o nome, há quantos dias abriu, o telefone do cadastro, a nota estimada), o carimbo
   torto no canto e o Ponto sentado na borda procurando. As fichas entram uma a uma quando a folha aparece. */
.recem-pontos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.recem-pontos li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: center; }
.recem-pontos strong { display: block; font-size: 15.5px; color: var(--tinta); }
.recem-pontos small { display: block; font-size: 13.5px; color: var(--tinta-2); }
.recem-pontos li:hover .il { animation: ilVivo 250ms steps(3, jump-end) infinite; }
.recem-plano { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.recem-etiqueta { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 7px; border: 1px solid var(--linha); border-radius: 6px; background: var(--branco); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.recem-etiqueta .il { rotate: -6deg; }
.recem-etiqueta.forte { border-color: var(--tinta); color: var(--tinta); }
.recem-etiqueta.forte .il { rotate: 7deg; }

.recem-palco { position: relative; margin: 0; }
.recem-palco .ponto-sentado { top: -46px; right: 28px; }
.recem-livro { position: relative; padding: 22px 24px 16px; background: var(--branco); border: 1px solid var(--linha); border-radius: 10px; box-shadow: 0 26px 48px -34px rgba(27, 24, 20, .5); }
.recem-livro::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--linha); border-radius: 6px; pointer-events: none; }
.recem-cabeca { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px 12px; border-bottom: 1px solid var(--linha); }
.recem-titulo { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.recem-cidade { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--tinta); font-variation-settings: 'SOFT' 55, 'opsz' 40; }
.recem-cidade .il { rotate: -8deg; }
.recem-fichas { list-style: none; margin: 0; padding: 0; }
.recem-fichas li { display: grid; grid-template-columns: 46px minmax(0, 1fr) 24px 44px; gap: 14px; align-items: center; padding: 12px 2px; border-bottom: 1px dashed var(--linha); }
.recem-ramo { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--linha); border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 3px var(--papel), inset 0 0 0 4px var(--linha); }
.recem-ramo .il { --il-s: 28px; }
.recem-nome { display: grid; gap: 1px; min-width: 0; }
.recem-nome strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--tinta); font-variation-settings: 'SOFT' 55, 'opsz' 40; }
.recem-nome small { font-size: 12.5px; color: var(--tinta-2); }
.recem-zap { display: grid; place-items: center; }
.recem-zap.vazio::before { content: ''; width: 10px; height: 1.5px; background: var(--tinta-3); opacity: .6; }
.recem-nota { justify-self: end; min-width: 40px; padding: 3px 0; border: 1.5px solid var(--tinta-3); border-radius: 50% 46% 52% 48% / 52% 50% 48% 50%; text-align: center; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--tinta-2); font-variant-numeric: tabular-nums; rotate: -4deg; }
.recem-nota.alta { border-color: var(--verde); color: var(--verde); }
.recem-pe { position: relative; margin: 12px 0 0; font-size: 12px; font-style: italic; color: var(--tinta-3); }
/* o carimbo: tinta, borda dupla, torto, no canto de cima da folha */
.recem-carimbo { position: absolute; z-index: 2; top: -16px; left: -18px; padding: 5px 12px; border: 2px solid var(--tinta); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--branco), inset 0 0 0 3px var(--tinta); background: var(--branco); font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta); rotate: -8deg; }
.recem-palco figcaption { margin: 12px 2px 0; font-size: 13px; color: var(--tinta-2); }
/* a entrada: as fichas em poses, uma a cada 2, e o carimbo bate no fim */
.recem-palco.espera .recem-fichas li, .recem-palco.espera .recem-carimbo { opacity: 0; }
.recem-palco.entra .recem-fichas li { animation: recemFicha .375s steps(3, jump-end) backwards; animation-delay: calc(var(--i) * 250ms); }
.recem-palco.entra .recem-carimbo { animation: recemCarimbo .375s steps(3, jump-end) backwards; animation-delay: 1.5s; }
@keyframes recemFicha { from { opacity: 0; transform: translateY(-8px); } 34% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes recemCarimbo { from { opacity: 0; transform: scale(1.5); } 34% { opacity: 1; } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .recem .cena-grade { row-gap: 40px; }
  .recem-livro { padding: 18px 16px 14px; }
  .recem-fichas li { grid-template-columns: 40px minmax(0, 1fr) 20px 40px; gap: 10px; }
  .recem-ramo { width: 40px; height: 40px; }
  .recem-ramo .il { --il-s: 24px; }
  .recem-nome strong { font-size: 15.5px; }
  .recem-carimbo { left: -6px; }
}
@media (prefers-reduced-motion: reduce) { .recem-palco.espera .recem-fichas li, .recem-palco.espera .recem-carimbo { opacity: 1; } .recem-palco.entra .recem-fichas li, .recem-palco.entra .recem-carimbo { animation: none; } }

/* onde procurar (01/10/2026, com a base do Brasil): a cidade, a região e o estado, em etiquetas */
.recem-onde { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.recem-onde .recem-etiqueta:nth-child(2) .il { rotate: 7deg; }
.recem-plano { margin-top: 12px; }
/* o plano numa linha (30/09/2026: as cinco etiquetas pesavam) */
.recem-linha { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; font-size: 14.5px; color: var(--tinta-2); }
.recem-linha .il { rotate: -6deg; }

/* o Ponto dos recém-abertos chega andando pela borda do livro (30/09/2026): do carimbo até o canto, em passos */
.recem-palco.espera #recem-ponto { opacity: 0; }
#recem-ponto.recem-chega { animation: recemChega 2.4s steps(16, jump-end) both; }
@keyframes recemChega { from { right: calc(100% - 190px); } to { right: 28px; } }
@media (prefers-reduced-motion: reduce) { #recem-ponto.recem-chega { animation: none; } }


/* ---------- a mensagem de cada ramo (04/10/2026) ----------
   A mesma confeitaria, seis pessoas vendendo: as tags (retângulo de canto arredondado, o ícone torto dentro)
   trocam quem vende, e o lápis reescreve a conversa do WhatsApp na moldura. Mensagem é bilhete de papel, como
   no resto da casa: a que sai em papel esverdeado à direita, a que chega em branco à esquerda. */
.jeito-rotulo { margin: 26px 0 10px; }
.jeito-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 470px; }
.jeito-tag { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 9px 12px; background: var(--branco); border: 1px solid var(--linha); border-radius: 6px; font: 600 14.5px var(--ui); color: var(--tinta-2); text-align: left; cursor: pointer; transition: border-color .12s steps(2, end); }
.jeito-tag .il { rotate: -6deg; }
.jeito-tag:nth-child(even) .il { rotate: 7deg; }
.jeito-tag:hover { border-color: color-mix(in srgb, var(--tinta) 45%, transparent); color: var(--tinta); }
.jeito-tag.ativo { color: var(--tinta); border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta), 0 14px 26px -22px rgba(27, 24, 20, .55); background: #FFFDF8; }
.jeito-tag:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.il.jt-acao { animation: jtAcao 1500ms steps(12, jump-none) backwards; }
@keyframes jtAcao { from { background-position: calc(var(--il-s) * (var(--il-p) + 3) * -1) 0; } to { background-position: calc(var(--il-s) * (var(--il-p) + 14) * -1) 0; } }
.jeito-nota { display: flex; align-items: center; gap: 10px; max-width: 470px; margin: 18px 0 0; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--tinta) 28%, transparent); border-radius: 6px; font-size: 14.5px; line-height: 1.45; color: var(--tinta-2); }
.jeito-nota b { color: var(--tinta); font-weight: 600; }

.jeito-zap { padding: 0; overflow: hidden; }
.jeito-cabeca { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--papel); border-bottom: 1px solid var(--linha); }
.jeito-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--branco); border: 1px solid var(--linha); }
.jeito-contato { display: grid; min-width: 0; line-height: 1.25; }
.jeito-contato strong { font-family: var(--display); font-weight: 700; font-size: 16.5px; font-variation-settings: 'SOFT' 55, 'opsz' 40; }
.jeito-contato small { font-size: 12.5px; color: var(--tinta-2); }
.jeito-voce { display: grid; margin-left: auto; text-align: right; line-height: 1.25; }
.jeito-voce small { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.jeito-voce b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.jeito-fio { list-style: none; margin: 0; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--papel-2) 55%, var(--branco)); }
.jeito-marca { display: flex; align-items: center; gap: 10px; margin: 2px 0; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.jeito-marca::before, .jeito-marca::after { content: ''; flex: 1; border-top: 1px dashed color-mix(in srgb, var(--tinta) 22%, transparent); }
.jeito-marca span { flex: none; max-width: 80%; text-align: center; }
.jeito-marca-muda { margin-top: 10px; color: var(--tinta-2); }
.jeito-marca-muda b { color: var(--tinta); }
.jeito-msg { position: relative; max-width: 84%; padding: 8px 12px 6px; border: 1px solid var(--linha); border-radius: 6px; font-size: 14.5px; line-height: 1.45; box-shadow: 0 12px 22px -20px rgba(27, 24, 20, .5); }
.jeito-msg p { display: grid; margin: 0; overflow-wrap: anywhere; }
.jeito-msg time { display: block; margin-top: 2px; font-size: 11px; text-align: right; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.jeito-msg.sai { align-self: flex-end; background: color-mix(in srgb, var(--verde) 9%, var(--branco)); rotate: .35deg; }
.jeito-msg.chega { align-self: flex-start; background: var(--branco); rotate: -.4deg; }
/* a escrita: o texto inteiro, invisível, guarda o tamanho; o escrito vai por cima, com o lápis na ponta */
.jt-cheio, .jt-vivo { grid-area: 1 / 1; }
.jt-cheio { visibility: hidden; }
.jt-lapis { display: inline-block; width: 30px; height: 42px; margin: -40px -26px -4px 1px; vertical-align: baseline; pointer-events: none; }
.jeito-escrita.escrevendo time { visibility: hidden; }
.jeito-msg.jt-espera { visibility: hidden; }
.jeito-assunto { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 18px; background: var(--branco); border-top: 1px solid var(--linha); font-size: 14px; color: var(--tinta-2); }
.jeito-assunto b { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--tinta); font-variation-settings: 'SOFT' 55, 'opsz' 40; }

/* ---------- a prova: o número, e o caso da obliq dentro dele ---------- */
.prova-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 470px; margin: 22px 0 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.prova-numeros div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 14px 0 12px; }
.prova-numeros div + div { padding-left: 18px; border-left: 1px solid var(--linha); }
.prova-numeros dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1; font-variation-settings: 'SOFT' 55, 'opsz' 80; letter-spacing: -0.02em; }
.prova-numeros dt { margin-top: 6px; font-size: 13px; color: var(--tinta-2); }
.casos-cabeca { max-width: 470px; margin-top: 30px; }
.casos-cabeca .rotulo-pequeno { margin: 0 0 4px; }
.casos-texto { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }
.casos-cabeca + .casos { margin-top: 14px; }

/* ---------- a prévia, menor, para quem vende site ---------- */
.so-ele-menor { padding: 72px 0; }
.so-ele-menor .rotulo-secao { display: flex; align-items: center; gap: 8px; }
.so-ele-menor .rotulo-secao .il { rotate: -6deg; }
.so-ele-menor .cena-texto .titulo-misto { font-size: clamp(28px, 2.7vw, 34px); }
.so-ele-menor .montagem-quem, .so-ele-menor .montagem-quem button { border-radius: 6px; }
.so-ele-menor .navegador-tela { height: 380px; }

@media (max-width: 900px) {
  .jeito .cena-grade { row-gap: 14px; }
  .jeito .cena-texto { display: contents; }
  .jeito .rotulo-secao, .jeito .titulo-misto, .jeito .bloco-texto { order: 1; }
  .jeito-rotulo { order: 2; margin: 8px 0 -6px; }
  .jeito-tags { order: 3; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jeito-palco { order: 4; margin-top: 46px; }
  .jeito-nota { order: 5; max-width: none; margin: 4px 0 0; }
  .jeito-fio { padding: 16px 12px 14px; }
  .jeito-cabeca { padding: 10px 12px; gap: 10px; }
  .jeito-avatar { width: 38px; height: 38px; }
  .jeito-avatar .il { --il-s: 26px; }
  .jeito-contato strong { font-size: 15px; }
  .jeito-cabeca { flex-wrap: wrap; row-gap: 6px; }
  .jeito-voce { flex-basis: 100%; display: flex; align-items: baseline; gap: 8px; margin: 0; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--tinta) 18%, transparent); text-align: left; }
  .jeito-voce b { font-size: 13.5px; }
  .jeito-marca span { max-width: 88%; }
  .jeito-msg { max-width: 90%; font-size: 14px; }
  .jeito-assunto { padding: 10px 14px; }
  .prova-numeros, .casos-cabeca { order: 1; max-width: none; }
  .prova-numeros dd { font-size: 34px; }
  .casos-cabeca { margin-top: 18px; }
  .caso-palco { order: 2; margin-top: 46px; }
  .casos { order: 3; }
  .so-ele-menor { padding: 60px 0; }
  .so-ele-menor .navegador-tela { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .il.jt-acao { animation: none; }
}