/*
 * A pele moderna do beta (etapa 163).
 *
 * O beta serve o app inteiro com esta folha por cima, e só ela. O app não é
 * editado nem importado: o `scripts/vestir.mjs` copia o export e encaixa este
 * arquivo como a ÚLTIMA folha de estilo de cada página, então o que está aqui
 * vence por ordem, sem `!important`.
 *
 * A divisão de trabalho é a mesma da pele de pergaminho do beta 2:
 *
 *   - cor sai da tabela `pele/paleta.mjs`, que reescreve os hex no CSS já
 *     compilado (o Tailwind do app usa `@theme inline` e embute a cor em cada
 *     utilitário, então trocar `--color-*` numa folha a mais não pintaria nada);
 *   - matéria sai daqui: textura, bisel, sombra quente, moldura. O pergaminho
 *     era uma superfície com grão, vinco e borda tostada; o que entra no lugar
 *     é superfície lisa.
 *
 * O que NÃO muda, de propósito:
 *
 *   - a profundidade dos botões (o `.candy` do app, com a borda de baixo mais
 *     grossa e o afundar de 3 px no toque) continua exatamente como está. Ela é
 *     a dinâmica que a pessoa dona pediu para manter, e já era a do app;
 *   - o anel de foco, os raios, os movimentos e o portão de `prefers-reduced-
 *     motion` continuam vindo do app, só com as cores novas;
 *   - a trilha de pedras da Jornada continua sendo desenhada pelo app: o que
 *     sai é a pintura por baixo dela.
 */

/* ---------- 1. os tokens que são lidos por nome ----------
   A troca em massa de `paleta.mjs` alcança os hex embutidos nos utilitários.
   Estes aqui são lidos por `var()` no CSS do app e pelo `style` em linha de
   alguns componentes, então recebem o valor certo por nome. Sem isto, a chama
   da sequência herdava o verde do degrau de ação, porque os dois eram o mesmo
   #245640 no app. */
:root {
  --color-chama: #e8a317;
  --color-chama-miolo: #f6dfa6;
  --color-chama-numero: #8c6414;
  --color-talento: #e8a317;
  --color-talento-aro: #b37c12;
  --color-talento-numero: #8c6414;
  --color-ouro: #e8a317;
  --color-luz: #f3c14a;
  --color-vida: #bd5f2e;
  --color-pergaminho-degrau: #c8c5b8;
  /* A sombra quente do app (rgba de marrom) vira sombra neutra: cinza não tem
     cor para brigar com o resto da tela. */
  --shadow-warm-lg: 0 24px 80px -24px rgba(31, 35, 32, 0.16);
}

/* ---------- 2. nada mais é papel ----------
   O app carrega quatro texturas de papel (`/fundo/papel-pagina.webp`,
   `papel-claro.webp`, `papel.webp`) e o vinco tostado do pergaminho. Todas
   saem daqui. As imagens continuam publicadas pelo app, mas nenhuma é baixada,
   porque nenhuma regra as pede mais. */
/* O chão do documento é a mesma cor da página (`#fbfcfb`, o `.bg-papel` do
   app). Já foi um azul de céu: com ele, qualquer faixa que a página não
   cobrisse (o pé do Perfil, o fim de uma lista) aparecia como uma tarja azul
   embaixo do conteúdo, e a tela parecia não ter fim (etapa 210). */
html {
  background: #fbfcfb;
}
body {
  color: #1f2320;
  /* O `body` também é papel: se a peça que pinta a página terminar antes do fim
     do documento, o que sobra continua branco em vez de virar tarja. */
  background: #fbfcfb;
}
.bg-papel {
  background-image: none;
  background-color: #fbfcfb;
}
.bg-superficie {
  background-image: none;
  background-color: #ffffff;
}
/* O cartão de pergaminho vira cartão branco. A cor vem do próprio `.pergaminho`
   (242, 241, 235), não de um token: sem esta linha o creme sobrevive a toda a
   troca de paleta e é ele que fazia a tela parecer amarelada mesmo com o chão
   branco. O degrau embaixo dos cartões e dos nós acompanha, dois passos mais
   escuro que o branco, e não o bege que o app desenhava. */
.pergaminho {
  background-image: none;
  background-color: #ffffff;
  box-shadow: none;
}
.bg-pergaminho-degrau {
  background-color: #e8eae7;
}
[class~="bg-pergaminho-degrau/60"] {
  background-color: rgba(232, 234, 231, 0.6);
}
/* A luz âmbar que o app acende atrás de um elemento vira uma luz neutra, dois
   passos mais fraca: ela marcava presença demais no fundo agora claro. */
.glow-amber::before {
  background: radial-gradient(closest-side, rgba(46, 107, 82, 0.14), transparent 72%);
}
/* A halo de ouro que o app pintava atrás do Haja e do nó ativo vira um brilho
   contido: inteiro, ele é a maior mancha quente da tela e puxava o chão claro
   de volta para o creme. */
.aura-halo {
  opacity: 0.5;
}

/* ---------- 3. superfície lisa com profundidade ----------
   O `.candy` do app continua sendo o mesmo botão de sempre, com a face, a
   borda de baixo grossa e o afundar no toque. O que muda é o acabamento:
   canto um pouco menor, contorno de um fio só e uma sombra de dois pixels que
   descola a peça do chão sem pintar bisel. */
.candy {
  border-radius: 18px;
  background: #ffffff;
  border-color: #e4e2d9;
  box-shadow: 0 1px 2px rgba(31, 35, 32, 0.05);
}
/* A face verde do botão de ação: o gradiente vem dos tokens já trocados, mas a
   sombra do app está escrita em `rgba` de âmbar e não passaria pela tabela de
   hex. Aqui ela é reescrita na cor do degrau verde. */
.candy-amber {
  border-radius: 18px;
  box-shadow:
    0 5px 0 #245640,
    0 14px 28px -10px rgba(46, 107, 82, 0.45);
}
.candy-amber:active:not(:disabled) {
  box-shadow:
    0 1px 0 #245640,
    0 6px 14px -8px rgba(46, 107, 82, 0.35);
}

/* ---------- 4. o chão da Jornada: a estrada que não acaba (etapa 173) ------
   A pessoa dona pediu em 30 de outubro de 2026 que o fundo da Jornada fosse
   infinito: uma página clara, uma estrada de creme descendo sem corte, as
   bolhas das lições sobre ela e, ao lado, a janela de cada mundo.

   Antes disto o chão era uma pintura por unidade presa na janela (etapas 167 a
   169). Ela saiu inteira. O que ficou no lugar são três camadas, nesta ordem:

   1. a **fita**, que é a imagem da referência em `fita.webp`, repetida sem fim
      (etapa 193). Até a 192 ela era desenhada pelo `pele/chao.js` com cinco
      cópias do `<path>` do app;
   2. o **papel**, o branco em volta da fita;
   3. as **figurinhas**, de quatro a seis por unidade: retratos pintados da cena
      daquela unidade, pousados ao lado da fita, nos vãos livres entre uma lição
      e a seguinte, sem moldura e sem fundo (etapas 186 e 189).

   O seletor é o `div` do `FundoJornada` do app (o único lugar do CSS compilado
   com `bg-pergaminho` e `-z-10` na mesma peça): a pele não pode renomear
   classe nenhuma, porque não mexe no código. */
[class~="bg-pergaminho"][class~="-z-10"] {
  background-color: #ead6be;
  /* Etapa 308 (DT-352): o chão deixou de ser papel e passou a ser **a areia da
     referência** — a mesma superfície pálida com pedrinhas cinzentas e tufos de
     capim que aparece debaixo da ovelhinha da arte nova (a cena s01u04-2, do
     `quadrados/_bruto-novo`). `pele/chao.webp` é um azulejo de 2048 px de areia
     `#ead6be` (o tom medido na referência, não o creme do papel) com as pedrinhas
     e o capim **recortados da própria arte** e carimbados com quebra de módulo,
     então a repetição continua sem emenda. Cada peça foi guardada como **camada de
     diferença** (o recorte menos a mediana da borda) e só a diferença é somada: a
     peça não traz o tom da areia dela e não faz auréola sobre outro tom.
     Ampliação: o arquivo tem 2048 px e é mostrado a 1024 px de CSS, então em tela
     de duas vezes as pedrinhas continuam nítidas.
     O azulejo é **peça fechada**, versionada como está: o gerador que o produziu
     saiu do repositório porque não reproduzia o resultado (a repetição saía com
     grão escuro e pesava 7 vezes mais). Para refazê-lo, o caminho é a receita da
     DT-352, não um `pnpm` que já não existe. */
  /* Etapa 304: o papel tinha **textura infinita**. `pele/textura.webp` era um
     azulejo de 1024 px de grão periódico (senos cujo comprimento de onda cabe um
     número inteiro de vezes no lado), então a borda direita continuava a esquerda
     e a de baixo continuava a de cima: repetido, não tinha emenda. O grão do chão
     novo usa a mesma conta e continua em `scripts/gerar-textura.mjs`.
     As cenas por unidade são filhas do chão e desbotam para transparente na
     beirada, então a textura aparece por baixo delas. */
  /* Etapa 203: o chão virou **papel puro**, e a estrada passou a ser uma camada
     por cima da pintura da unidade, no `::after` logo abaixo. Até aqui o
     `background-image` do chão era ao mesmo tempo a estrada e a paisagem, e a
     paisagem era a mesma em toda a Jornada — por isso o Êxodo aparecia com o
     cavaleiro do Apocalipse. Fundo de elemento não tem como ficar acima de um
     filho, e a pintura da unidade é filha do chão: a estrada precisou subir de
     camada para as duas coisas conviverem.

     A conta da largura continua a mesma, e é ela que a tabela de centros usa. */
  /* A largura da estrada acompanha a tela, e a proporção vem do padrão: 19% da
     largura da página. Medida na imagem de referência (483 px de largura), a
     fita tem 93 px de largura perpendicular, e é essa a conta que fica. Agora ela
     serve às figurinhas e às pedras, que pousam na beirada da fita pintada.
     Fonte única da medida: o `pele/chao.js` mede esta variável em vez de
     repetir a conta (DT-221). */
  --estrada: clamp(76px, 19vw, 150px);
  background-image: url("chao.webp");
  background-repeat: repeat;
  background-size: 1024px 1024px;
}

/* A cena presa na janela sai de cena (etapa 176): não há paisagem presa atrás da
   Jornada, e sim papel. O `::before` fica livre e vazio — quem usa o `::after` é
   a estrada, logo abaixo. */
[class~="bg-pergaminho"][class~="-z-10"]::before {
  content: none;
}

/* ---------- 4a. a estrada por cima da pintura da unidade (etapa 203) --------
   A estrada é a mesma fita de creme da etapa 191, agora **só com a estrada**:
   `scripts/gerar-fita.mjs` deixou de assar a paisagem dentro do azulejo e
   regravou a mesma tabela de centros, então `desvioEmDoc` continua pousando cada
   bolha em cima dela.

   A camada é o `::after` do chão, e não mais o `background-image` dele, porque as
   76 pinturas por unidade são filhas do chão: fundo de elemento pinta abaixo de
   qualquer filho, e a estrada sumiria embaixo da paisagem. O `::after` com
   `z-index: 1` fica acima das faixas (que estão em `auto`) e abaixo das lições,
   que moram fora do chão, num irmão posterior — o chão inteiro é `z-index: -10`.

   `inset: 0` mantém a caixa que o fundo do chão tinha, então o azulejo começa no
   mesmo `topoDoDesenho()` que a tabela de centros pressupõe. */
[class~="bg-pergaminho"][class~="-z-10"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("fita.webp");
  background-repeat: repeat-y;
  background-size: var(--fita-largura, 100%) auto;
  background-position: 50% 0;
}

/* Etapa 194: a fita não passa por trás do título da unidade.

   O título de cada unidade é um `header` grudado a 56 px do alto (`top-14`) e
   com 92 px de altura, e ele é mais estreito que a coluna: a fita aparecia nos
   vãos dos lados do cartão e por cima dele. O `header` é um bloco e já ocupa a
   largura inteira da coluna, então basta pintar o fundo dele de papel. O
   `chao.js` faz a outra metade: o desenho começa abaixo do primeiro cabeçalho.

   Fundo chapado e não gradiente: o cabeçalho é opaco por inteiro enquanto está
   grudado no alto, e um desmanche aqui apareceria como uma faixa cinza. */
header.sticky {
  background-color: #fff;
}


/* Etapa 205: as pinturas por unidade **saem**, e a Jornada volta a ser o papel
   com a estrada e as figurinhas, que é o desenho apontado como certo nas
   capturas de 30 de outubro de 2026 ("os backgrounds certos são os que estão em
   downloads agora, como estava antes").

   Na etapa 203 elas voltaram para resolver o "background de apocalipse no
   êxodo", e resolveram: a pintura passou a ser a de cada unidade. O que não deu
   certo foi a **escala**. Uma pintura em tamanho cheio atrás da coluna vira
   fundo de tela, e o padrão aprovado é o contrário: papel quase branco, a fita
   creme e **recortes pequenos** da cena ao lado dela. É o mesmo desenho em duas
   escalas, e a que vale é a que já estava aprovada.

   `display: none` vai no `<img>`, e não na faixa: a faixa é medida pelo app para
   posicionar o Haja e desenhar a trilha, então ela continua existindo com a
   altura certa. Imagem `loading="lazy"` que nunca entra na tela nunca é baixada,
   e a rede agradece: são 76 arquivos. A máscara da faixa também sai, porque sem
   pintura atrás dela não há emenda a fazer. Quem traz a cena agora é a figurinha
   do bloco 4b, um recorte da mesma arte. */
[class~="bg-pergaminho"][class~="-z-10"] img[data-pintura],
[class~="bg-pergaminho"][class~="-z-10"] > img,
[class~="bg-pergaminho"][class~="-z-10"] .paisagem-luz,
[class~="bg-pergaminho"][class~="-z-10"] .paisagem-veu {
  display: none;
}
[class~="bg-pergaminho"][class~="-z-10"] .paisagem-faixa {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---------- 4b. o desvio do app sai: quem manda no caminho é a fita ----------
   O app também desloca cada lição para cima do caminho dele (`--desvio`, escrito
   em `FundoJornada` a partir da pintura da unidade, e lido em `Unidade.tsx` como
   `translateX(var(--desvio, ...))`). Com a pele no comando, esse desvio aponta
   para uma pintura que não está mais na tela, e pior: ele é **reescrito a cada
   quadro de rolagem**, enquanto o desvio da pele só é recalculado quando a
   estrutura muda — os dois se somam em ritmos diferentes, e a bolha sai torta em
   relação à fita (é o "tem lugares que as bolhas estão tortas" de 1 de novembro
   de 2026).
   A linha de lição fica reta, e só o `translate` escrito pelo `chao.js` move a
   bolha, medido na tabela da fita. */
[data-no] {
  --desvio: 0px !important;
}

/* A vinheta sépia que o app prende na janela: dois gradientes de marrom
   (#5A3514) e creme sobre a tela inteira. Era ela que dava o ar de foto
   antiga, e na página clara escureceria as bordas. Sai. */
[class~="bg-pergaminho"][class~="-z-10"] > div.fixed {
  display: none;
}

/* O tracejado do app sai. Ele é uma reta vertical — servia de cascalho quando a
   estrada era a própria reta, mas sobre a fita pintada ele corta a curva e sai
   dela. A estrada do padrão também não tem pontilhado nenhum. Etapa 193: as
   cinco camadas `estrada-*` saíram com o desenho de código, e o seletor voltou a
   ser o simples `svg path`. */
[class~="bg-pergaminho"][class~="-z-10"] svg path {
  stroke-opacity: 0;
  stroke-dasharray: none;
}

/* ---------- 4b. as figurinhas de cada unidade (etapa 189) ----
   Cada unidade mostra de quatro a seis **retratos**: pequenos recortes da cena que
   a Kie pintou para aquela unidade, na beira da estrada. É a imagem da história
   que está sendo contada ali, e não um pictograma solto.

   Até a etapa 186 aqui morava só o pictograma do app, sem fundo, depois de a
   pessoa dona reprovar a máscara de desfoque da cena grande (31 de outubro de
   2026). Ela reprovou o pictograma também, e pediu imagem da história pintada
   pela Kie. O retrato atende as duas queixas: a cena volta, com borda viva, sem
   máscara e sem desfoque, no tamanho de figurinha que a etapa 186 acertou. A
   sombra é curta e pousa o retrato no papel em vez de desenhá-lo. Nada anima: a
   figurinha não se move, e por isso não há o que desligar em
   `prefers-reduced-motion`. */
.figurinha {
  position: absolute;
  pointer-events: none;
  /* A figurinha pousa **ao lado** da fita, no vão que sobra entre as lições
     (etapa 189): em cima dela o desenho cobria o caminho e encostava nos nós. A
     sombra macia é o que a assenta no papel sem moldura. */
  z-index: 1;
}
.figurinha .retrato {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sem moldura e sem fio de papel (etapa 189): o padrão não tem retângulo
     nenhum em volta dos desenhos. Etapa 205 (E525): a aresta saiu de vez. O
     retângulo de canto arredondado lia como foto colada no papel, e a captura
     de referência de 30 de outubro de 2026 mostra a pintura **solta** no creme,
     sem moldura. A máscara elíptica apaga a borda no próprio papel; a sombra
     saiu junto, porque sombra debaixo de vinheta vira mancha. */
  border-radius: 0;
  background: transparent;
  filter: saturate(1.06) contrast(1.03);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 42%, transparent 96%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 42%, transparent 96%);
}
/* ---------- 4c. as figurinhas autorais (etapa 211) ----
   A arte é gerada pela Kie no estilo aprovado em 2 de novembro de 2026: desenho
   chapado, moderno, **sem fundo**. Então nada de máscara elíptica (que existia
   para apagar a aresta de uma foto recortada) nem de `cover`: o recorte entra
   inteiro, com `contain`, e é o alfa da imagem que desenha a silhueta. A sombra
   acompanha a silhueta, não um retângulo, e é o que assenta o adesivo no papel. */
.figurinha.nova .retrato {
  object-fit: contain;
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 4px 5px rgba(90, 53, 20, 0.18));
}
/* A marca de lugar da etapa 221: onde ainda não há arte, o chão põe um quadrado
   tracejado do **mesmo tamanho** do adesivo, no lugar exato em que a imagem vai
   cair. Serve para acertar a posição antes de gastar crédito — a arte, quando
   chegar, entra no manifesto e substitui a marca sem mexer em nada aqui. Não é
   figurinha: é rascunho, e sai quando as 76 unidades estiverem pintadas. */
/* Etapa 223: figurinha nenhuma por baixo do cabeçalho preso da unidade. Some
   só por opacidade, e volta quando o cabeçalho sai de cima. */
.figurinha.nova {
  transition: opacity 160ms ease;
}
.figurinha.nova.sob-cabecalho {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .figurinha.nova {
    transition: none;
  }
}
.figurinha.marca {
  border: 2px dashed rgba(140, 100, 20, 0.42);
  border-radius: 14px;
  background: rgba(232, 163, 23, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.figurinha.marca .etiqueta {
  font: 600 11px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(140, 100, 20, 0.72);
}
.figurinha.sem-cena {
  border-radius: 0;
  box-shadow: none;
}
.figurinha svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 5px 7px rgba(90, 53, 20, 0.16));
}
/* As figuras de corpo claro (DESIGN 20) somem no creme da fita: ganham o
   contorno de pedra que o componente `Figura` já usa sobre fundo claro. */
.figurinha[data-figura="anjo"] svg,
.figurinha[data-figura="cordeiro"] svg,
.figurinha[data-figura="ovelha"] svg {
  filter: drop-shadow(0 0 0.75px #3c423c) drop-shadow(0 0 0.75px #3c423c) drop-shadow(0 5px 7px rgba(90, 53, 20, 0.16));
}

/* As pedras e o capim da beirada (etapa 189; arte da Kie desde a 302). Eram
   degradê de CSS e liam como bolas soltas, e por isso ficaram desligadas de 202
   a 301. Agora cada peça é uma imagem com a borda esfumada (`pele/estrada`,
   gerada por `scripts/gerar-estrada.mjs`): capim, pedrinha e uma mancha de terra
   batida em cima da fita. Continuam **fora** da fita, soltas no papel, e nada
   anima. */
.pedrinha,
.capim,
.terra {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  rotate: var(--giro, 0deg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
.pedrinha {
  opacity: 0.96;
}
.capim {
  background-position: center bottom;
  opacity: 0.92;
}
.terra {
  z-index: 0;
  background-position: center center;
  filter: blur(0.4px);
  pointer-events: none;
}

/* O nó da lição ia até a curva com uma transição de 260 ms. Na etapa 202 (E522)
   ela saiu: a pele alinhava a cada 200 px de rolagem, e com a transição isso
   virava todas as lições balançando enquanto a pessoa rolava. Agora o desvio é
   medido no papel, uma vez por mudança de estrutura, e o mesmo número sai igual
   em qualquer rolagem: sem troca de valor, não há o que animar, e o nó já nasce
   no lugar. `prefers-reduced-motion` fica satisfeito por construção. */

/* ---------- 4c. os chefões (etapa 173) ----------
   Cinco trechos da história em que alguém se põe contra o caminho, marcados por
   um selo ao lado da estrada, sempre no lado oposto ao da janela daquele mundo.
   O selo respira (o halo pulsa) e, no toque, abre um duelo de quatro perguntas
   tiradas dos fatos daquela unidade.

   O chefão é do `body`, e não do chão: a camada do chão é `-z-10` e o conteúdo
   da Jornada ficaria por cima do botão. A posição vem do `chao.js`, em
   coordenadas do documento, para ele acompanhar a faixa ao rolar.

   Etapa 214: o chefão **sai da Jornada** a pedido da pessoa dona ("tire tudo
   isso de chefão"). O `chao.js` não monta mais nenhum (`CHEFOES_LIGADOS`), e
   este `display: none` é a garantia de tela: um chefão que já esteja na página
   some no mesmo quadro, sem esperar recarga. O resto da regra e o duelo
   continuam inteiros, e voltam quando a chave ligar de novo. */
.chefao {
  display: none;
  position: absolute;
  z-index: 30;
  width: 76px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tom, #5b3f6e);
  cursor: pointer;
  transform: translate3d(0, -50%, 0);
  transition: transform 200ms ease, opacity 260ms ease;
  opacity: 1;
  -webkit-tap-highlight-color: transparent;
}
.chefao[data-fora] {
  opacity: 0;
  pointer-events: none;
}
.chefao:hover,
.chefao:focus-visible {
  transform: translate3d(0, calc(-50% - 3px), 0);
}
.chefao:focus-visible {
  outline: 2px solid var(--tom);
  outline-offset: 4px;
  border-radius: 16px;
}
.chefao-halo {
  position: absolute;
  left: 50%;
  top: 28px;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tom), transparent 72%);
  opacity: 0.2;
  animation: chefao-pulso 3.4s ease-in-out infinite;
}
.chefao-selo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--tom);
  box-shadow: 0 10px 22px -12px var(--tom);
  animation: chefao-respira 3.4s ease-in-out infinite;
}
.chefao-selo svg {
  width: 30px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chefao-nome {
  display: block;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #ece8df;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-align: center;
  color: #1f2320;
}
.chefao-nome em {
  display: block;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--tom);
}
@keyframes chefao-pulso {
  0%, 100% { transform: scale(0.86); opacity: 0.12; }
  50% { transform: scale(1.12); opacity: 0.26; }
}
@keyframes chefao-respira {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
/* No celular o selo encolhe e o rótulo fica menor: ele mora na folga entre a
   estrada e a borda, e não pode cobrir o cartão da unidade. */
@media (max-width: 639px) {
  .chefao {
    width: 58px;
  }
  .chefao-selo {
    width: 46px;
    height: 46px;
  }
  .chefao-selo svg {
    width: 24px;
    height: 21px;
  }
  .chefao-halo {
    top: 23px;
    width: 74px;
    height: 74px;
    margin: -37px 0 0 -37px;
  }
  .chefao-nome {
    margin-top: 6px;
    padding: 3px 5px;
    font-size: 9px;
  }
  .chefao-nome em {
    font-size: 8px;
    letter-spacing: 0.08em;
  }
}

/* ---------- 4d. o duelo ----------
   Uma folha que sobe do pé da tela no celular e aparece no meio no computador.
   Três vidas, quatro perguntas, resposta certa em verde e errada em vermelho;
   nada aqui grava nada, então perder não custa vida do app nem sequer deixa
   marca na Jornada. */
.duelo {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: end center;
  padding: 0 12px max(16px, env(safe-area-inset-bottom));
}
.duelo-veu {
  position: absolute;
  inset: 0;
  background: rgba(24, 26, 24, 0.42);
  animation: duelo-veu-entra 240ms ease both;
}
.duelo-palco {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 20px 18px 18px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 64px -28px rgba(31, 35, 32, 0.45);
  text-align: center;
  animation: duelo-sobe 300ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
.duelo.saindo .duelo-palco {
  animation: duelo-desce 240ms ease both;
}
.duelo.saindo .duelo-veu {
  animation: duelo-veu-sai 240ms ease both;
}
.duelo-sair {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border: 1px solid #ece8df;
  border-radius: 999px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
  color: #6b6f6b;
  cursor: pointer;
}
.duelo-chefe {
  margin: 6px auto 10px;
}
.duelo-selo {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid var(--tom, #5b3f6e);
  box-shadow: 0 12px 26px -14px var(--tom, #5b3f6e);
  animation: chefao-respira 3.4s ease-in-out infinite;
}
.duelo-selo svg {
  width: 38px;
  height: 32px;
  fill: none;
  stroke: var(--tom, #5b3f6e);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.duelo-etiqueta {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--tom, #5b3f6e);
}
.duelo-nome {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: #1f2320;
}
.duelo-linha {
  margin: 4px 0 14px;
  font-size: 13px;
  color: #6b6f6b;
}
.duelo-vidas {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 10px;
}
.duelo-vida {
  width: 40px;
  height: 8px;
  border-radius: 999px;
  background: var(--tom, #5b3f6e);
  transition: background-color 200ms ease, transform 200ms ease;
}
.duelo-vida.vazia {
  background: #e8eae7;
  transform: scaleY(0.7);
}
.duelo-conta {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #9a9e9a;
}
.duelo-texto {
  margin: 10px 0 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #1f2320;
}
.duelo-opcoes {
  display: grid;
  gap: 8px;
}
.duelo-opcao {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid #e4e2d9;
  border-radius: 14px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
  color: #1f2320;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.duelo-opcao:hover {
  transform: translate3d(0, -1px, 0);
  border-color: #cfd2ce;
}
.duelo-opcao.certa {
  border-color: #2e6b52;
  background: #eaf3ee;
  color: #245640;
}
.duelo-opcao.errada {
  border-color: #bd5f2e;
  background: #fbeeea;
  color: #8c3b2e;
}
.duelo-opcao.destaque {
  border-color: var(--tom, #5b3f6e);
  background: var(--tom, #5b3f6e);
  color: #ffffff;
  text-align: center;
}
@media (min-width: 720px) {
  .duelo {
    place-items: center;
  }
}
@keyframes duelo-sobe {
  from { transform: translate3d(0, 24px, 0); opacity: 0; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes duelo-desce {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to { transform: translate3d(0, 20px, 0); opacity: 0; }
}
@keyframes duelo-veu-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes duelo-veu-sai {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chefao-halo,
  .chefao-selo,
  .duelo-selo {
    animation: none;
  }
  .chefao,
  .chefao:hover,
  .chefao:focus-visible {
    transform: translate3d(0, -50%, 0);
  }
  .duelo-palco,
  .duelo-veu {
    animation-duration: 1ms;
  }
}

/* ---------- 5. o creme sai de vez ----------
   O `bg-luz-leve` do app era o creme da bolha "COMEÇAR JORNADA" e de alguns
   realces. Sobre o chão novo ele lê como papel envelhecido, que é justamente o
   que esta pele tira: vira branco, e a borda que o app desenha fica sendo o
   único contorno. */
.bg-luz-leve {
  background-color: #ffffff;
  background-image: none;
}

/* ---------- 6. nada de serifa (etapa 167) ----------
   O app pede Fraunces, uma serifa de jornal, em dois lugares: no utilitário
   `.font-serif` (título de seção, título de cartão, número grande) e, por
   dentro, na imagem do versículo que ele desenha em `canvas` lendo
   `getComputedStyle("--font-fraunces")`. A pessoa dona pediu fora: serifa aqui
   lê como livro antigo, que é exatamente o ar que esta pele tira.

   Por isso a troca é no TOKEN, e não na classe: quem lê a variável — o CSS
   compilado e o `canvas` — passa a receber a Nunito, a mesma sans do corpo.
   `:root` tem a mesma especificidade da classe `.__variable_*` que o `next/font`
   põe no `<html>` e esta folha entra depois de todas as do app, então vence por
   ordem, sem `!important`. O título passa a diferir do texto por peso e tamanho,
   não por família. A fonte continua baixada e publicada, mas não é desenhada. */
:root {
  --font-fraunces: var(--font-nunito), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- 13. o papel de cada unidade (etapa 208) -----------------------
   A pessoa dona mandou as capturas de 30 de outubro e pediu, com todas as
   letras: "quero que você coloque as imagens de ontem como backgrounds e faça
   as lições seguirem os caminhos". Até aqui o chão era papel liso com a fita de
   creme por cima; agora cada unidade pinta a captura do seu livro, inteira,
   com a pílula do título já recortada.

   `background-size: 100% 100%` é decisão, não preguiça: a tabela de centros
   `pele/papel.js` mede o caminho em fração da largura e da altura da captura, e
   esticar a imagem para o bloco faz a fração virar px do bloco. É o que põe a
   lição em cima do caminho pintado (DT-253, FSD 50.8).

   A fita do código **sai** enquanto o papel está posto: as duas juntas
   desenhavam dois caminhos, e era isso que lia como defeito.

   Etapa 212: o papel deixa de ser papel de parede. Ele era esticado de borda a
   borda do bloco, e a aquarela que a referência já traz dentro dele crescia até
   vazar da tela e entrar por baixo do cartão do capítulo (o `sticky`), que é o
   "sinto as imagens grandes demais, vazando da tela e sobrepostas abaixo dos
   headings". Agora a página da referência é pintada **dentro** de uma moldura de
   papel: 16 px de recuo nas laterais e 56 px no topo, e o que fica em volta é o
   papel do chão. O mapa continua linear (é o mesmo `100% 100%`, só que do
   retângulo recuado), e `chao.js` desconta os mesmos recuos ao pôr a lição sobre
   o caminho — as duas contas são a mesma (`PAPEL_RECUO`). */
[data-unidade].com-papel {
  --papel-recuo-lado: 16px;
  --papel-recuo-topo: 56px;
  /* A película clara vai na mesma pilha do fundo, como camada de cima: fundo de
     elemento pinta abaixo dos filhos, e a lição e o cartão do capítulo ficam
     legíveis sem que a aquarela suma. (Um `::before` posicionado pintaria
     **acima** dos nós, e era isso que apagava as lições.) */
  background-image:
    linear-gradient(
      180deg,
      /* O topo da unidade fica papel puro: a pílula do capítulo é branca e o
         trecho de aquarela que aparecia logo abaixo dela lia como fundo
         sobreposto ao cabeçalho (etapa 209). O papel pintado é branco ele
         mesmo, então a passagem para o desenho não tem costura. */
      #fff 0,
      #fff 48px,
      rgba(255, 255, 255, 0.72) 96px,
      rgba(255, 255, 255, 0.30) 150px,
      rgba(255, 255, 255, 0.06) 45%,
      rgba(255, 255, 255, 0.30)
    ),
    var(--papel);
  /* O gradiente cobre o bloco inteiro; a página pintada mora no retângulo
     recuado, e o papel em volta é o do chão. */
  background-size:
    100% 100%,
    calc(100% - 2 * var(--papel-recuo-lado)) calc(100% - var(--papel-recuo-topo));
  background-repeat: no-repeat;
  background-position:
    center top,
    center var(--papel-recuo-topo);
}

html.com-papel [class~="bg-pergaminho"][class~="-z-10"]::after {
  content: none;
}

/* ---------- 4d. a Jornada arrumada no banco e o editor (etapas 226 a 230b) ----
   FSD 56, DESIGN 30.21 (seção do editor), DT-269 a DT-274. A imagem anexada pela
   administração entra com `cover`, enquadre e zoom salvos; a caixa corta o que
   o zoom empurra para fora. A camada do editor (`.haja-ed-camada`) fica acima
   do conteúdo e abaixo do cabeçalho preso da unidade (z 15 contra 20). */
.figurinha.do-banco {
  overflow: clip;
  border-radius: 12px;
}
.figurinha.do-banco .retrato {
  object-fit: cover;
  -webkit-mask-image: none;
  mask-image: none;
  filter: none;
}

.haja-ed {
  --ed-verde: #2e6b52;
  --ed-tinta: #1f2320;
  --ed-apoio: #6b7168;
  --ed-erro: #a14e1f;
  --ed-linha: #e7e5dc;
  --ed-sombra: 0 10px 30px -10px rgba(31, 35, 32, 0.32), 0 2px 6px rgba(31, 35, 32, 0.08);
  font: 600 14px/1.25 var(--font-nunito, ui-sans-serif), system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ed-tinta);
}
.haja-ed-base {
  position: fixed;
  left: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1024px) {
  .haja-ed-base {
    bottom: 24px;
  }
}
.haja-ed-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ed-tinta);
  box-shadow: var(--ed-sombra), inset 0 -3px 0 var(--ed-linha);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 160ms ease;
  animation: haja-ed-entrar 320ms cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
}
.haja-ed-botao svg {
  width: 20px;
  height: 20px;
}
.haja-ed-botao:hover {
  transform: translateY(-2px);
}
.haja-ed-botao:active {
  transform: translateY(1px) scale(0.98);
}
.haja-ed-botao:focus-visible,
.haja-ed-ferramenta:focus-visible,
.haja-ed-mais:focus-visible,
.haja-ed-auto:focus-visible,
.haja-ed-tentar:focus-visible,
.haja-ed-folha button:focus-visible {
  outline: 3px solid var(--ed-verde);
  outline-offset: 3px;
}
.haja-ed.ativo .haja-ed-botao {
  background: var(--ed-verde);
  color: #ffffff;
  box-shadow: var(--ed-sombra), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
}
.haja-ed-painel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100vw - 220px);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: transform 220ms ease, opacity 220ms ease;
}
.haja-ed.ativo .haja-ed-painel {
  opacity: 1;
  transform: none;
}
.haja-ed.ativo .haja-ed-painel > * {
  pointer-events: auto;
}
.haja-ed-estado {
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(31, 35, 32, 0.1);
  font-size: 13px;
  color: var(--ed-apoio);
}
.haja-ed-estado.ok {
  color: var(--ed-verde);
}
.haja-ed-estado.erro {
  color: var(--ed-erro);
}
.haja-ed-estado:empty {
  display: none;
}
.haja-ed-tentar {
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--ed-erro);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ed-erro);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* a barra da seleção: pílula branca, presa embaixo, centralizada */
.haja-ed-barra {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 61;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  overflow-x: auto;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--ed-sombra);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px) scale(0.96);
  transition: transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 180ms ease;
}
.haja-ed-barra.visivel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
@media (max-width: 1023px) {
  /* no celular a barra sobe acima do botão Editar, que fica à esquerda */
  .haja-ed-barra {
    bottom: calc(158px + env(safe-area-inset-bottom));
  }
}
@media (min-width: 1024px) {
  /* etapa 294: separada do painel do editor, que ocupa a mesma faixa */
  .haja-ed-barra {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }
}
.haja-ed-ferramenta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  min-height: 48px;
  padding: 4px 8px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ed-tinta);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}
.haja-ed-ferramenta svg {
  width: 20px;
  height: 20px;
}
.haja-ed-ferramenta:hover {
  background: #f2f1eb;
}
.haja-ed-ferramenta:active {
  transform: scale(0.94);
}
.haja-ed-ferramenta:disabled {
  opacity: 0.38;
  cursor: default;
}
.haja-ed-ferramenta.perigo {
  color: var(--ed-erro);
}
.haja-ed-zoom {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ed-apoio);
}
.haja-ed-zoom input {
  width: 130px;
  min-height: 28px;
  accent-color: var(--ed-verde);
}
.haja-ed-aviso {
  position: fixed;
  left: 50%;
  top: calc(16px + env(safe-area-inset-top));
  z-index: 62;
  margin: 0;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ed-tinta);
  color: #ffffff;
  font: 700 14px/1.3 var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -12px);
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 200ms ease;
}
.haja-ed-aviso.visivel {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* a camada: cobre o documento inteiro, só os itens recebem toque */
.haja-ed-camada {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 15;
  pointer-events: none;
  display: none;
}
.haja-ed-camada.ativa {
  display: block;
}
html.haja-editando .figurinha.do-banco,
html.haja-editando .figurinha.nova.marca {
  opacity: 0;
}
.haja-ed-item {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  border-radius: 12px;
  outline: 2px dashed rgba(46, 107, 82, 0.55);
  outline-offset: 0;
  background: rgba(46, 107, 82, 0.06);
  transition: outline-color 140ms ease, opacity 140ms ease;
  animation: haja-ed-surgir 260ms cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards;
}
.haja-ed-item .haja-ed-corpo {
  position: absolute;
  inset: 0;
  overflow: clip;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.haja-ed-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.haja-ed-etiqueta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(46, 107, 82, 0.8);
}
.haja-ed-item.com-arte img {
  object-fit: contain;
}
.haja-ed-item.com-imagem {
  background: transparent;
}
.haja-ed-item.selecionado {
  outline: 2px solid var(--ed-verde, #2e6b52);
  box-shadow: 0 0 0 6px rgba(46, 107, 82, 0.14);
}
.haja-ed-item.pego {
  cursor: grabbing;
  box-shadow: 0 18px 40px -12px rgba(31, 35, 32, 0.4), 0 0 0 6px rgba(46, 107, 82, 0.18);
}
.haja-ed-item.recortando {
  outline: 2px solid #e8a317;
  cursor: move;
}
.haja-ed-item.recortando .haja-ed-corpo {
  overflow: visible;
}
.haja-ed-item.recortando .haja-ed-corpo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 9999px rgba(31, 35, 32, 0.45);
  pointer-events: none;
}
.haja-ed-item.recortando img {
  opacity: 0.98;
}
.haja-ed-item:focus-visible {
  outline: 3px solid var(--ed-verde, #2e6b52);
  outline-offset: 3px;
}
/* a alça: 16 px de desenho, 44 px de toque */
.haja-ed-alca {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 44px;
  height: 44px;
  cursor: nwse-resize;
  opacity: 0;
  transform: scale(0.6);
  transition: transform 160ms ease, opacity 160ms ease;
}
.haja-ed-alca::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #ffffff;
  border: 2px solid var(--ed-verde, #2e6b52);
  box-shadow: 0 2px 6px rgba(31, 35, 32, 0.25);
}
.haja-ed-item.selecionado .haja-ed-alca {
  opacity: 1;
  transform: none;
}
.haja-ed-item.recortando .haja-ed-alca {
  opacity: 0;
  pointer-events: none;
}

/* Etapa 223 na edição: nada do editor por baixo do cartão preso da unidade. */
.haja-ed-camada .sob-cabecalho {
  opacity: 0;
  pointer-events: none;
}

/* botões por unidade */
.haja-ed-unidade {
  position: absolute;
  display: flex;
  gap: 6px;
  transform: translateX(-100%);
  pointer-events: auto;
  animation: haja-ed-surgir 260ms ease backwards;
}
.haja-ed-mais,
.haja-ed-auto {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font: 800 13px/1 var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(31, 35, 32, 0.3);
  transition: transform 140ms ease, opacity 140ms ease;
}
.haja-ed-mais {
  background: var(--ed-verde, #2e6b52);
  color: #ffffff;
}
.haja-ed-auto {
  background: #ffffff;
  color: var(--ed-verde, #2e6b52);
}
.haja-ed-mais:active,
.haja-ed-auto:active {
  transform: scale(0.95);
}
.haja-ed-auto:disabled {
  opacity: 0.5;
}

/* o mascote: alça por cima do desenho do app */
.haja-ed-mascote {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  border-radius: 50%;
  cursor: grab;
  outline: 2px dashed rgba(232, 163, 23, 0.7);
  outline-offset: 4px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.haja-ed-mascote::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid #e8a317;
  opacity: 0;
  transform: scale(0.85);
  transition: transform 350ms linear, opacity 120ms ease;
}
.haja-ed-mascote.segurando::before {
  opacity: 1;
  transform: scale(1);
}
.haja-ed-mascote.pego {
  cursor: grabbing;
  outline: 3px solid #e8a317;
  animation: haja-ed-pulsar 900ms ease-in-out infinite;
}
.haja-ed-mascote.selecionado {
  outline-style: solid;
}
.haja-ed-mascote:focus-visible {
  outline: 3px solid var(--ed-verde, #2e6b52);
}
.haja-ed-dica {
  position: absolute;
  left: 50%;
  top: -34px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #1f2320;
  color: #ffffff;
  font: 700 12px/1.2 var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: transform 180ms ease, opacity 180ms ease;
}
.haja-ed-mascote:hover .haja-ed-dica,
.haja-ed-mascote.selecionado .haja-ed-dica {
  opacity: 1;
  transform: translate(-50%, 0);
}
.haja-ed-mascote.pego .haja-ed-dica {
  opacity: 0;
}

/* a folha de excluir: o mesmo desenho da folha do app */
.haja-ed-folha-fundo {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(31, 35, 32, 0.4);
  opacity: 0;
  transition: opacity 200ms ease;
}
.haja-ed-folha-fundo.aberta {
  opacity: 1;
}
.haja-ed-folha {
  width: min(480px, 100%);
  padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: #ffffff;
  color: #1f2320;
  font-family: var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
.haja-ed-folha-fundo.aberta .haja-ed-folha {
  transform: none;
}
.haja-ed-folha h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 900;
}
.haja-ed-folha p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 24px;
  color: #6b7168;
}
.haja-ed-folha-acoes {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}
.haja-ed-folha-acoes button {
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  font: 800 16px/1 var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  cursor: pointer;
}
.haja-ed-folha-excluir {
  background: #bd5f2e;
  color: #ffffff;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);
}
.haja-ed-folha-cancelar {
  background: #f2f1eb;
  color: #1f2320;
}
/* a galeria de artes do quadrado (etapa 292) */
.haja-ed-folha.haja-ed-galeria {
  width: min(760px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
.haja-ed-galeria-rolagem {
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -4px 16px;
  padding: 0 4px;
}
.haja-ed-galeria h3 {
  margin: 14px 0 8px;
  font: 800 13px/1.2 var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7168;
}
.haja-ed-galeria-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}
.haja-ed-arte {
  aspect-ratio: 1;
  padding: 6px;
  border: 2px solid #e6e3d8;
  border-radius: 16px;
  background: #fbfaf5;
  cursor: pointer;
}
.haja-ed-arte img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.haja-ed-arte.atual {
  border-color: #2f7d4f;
  box-shadow: inset 0 0 0 2px #2f7d4f;
}
.haja-ed-arte:focus-visible {
  outline: 3px solid #2f7d4f;
  outline-offset: 2px;
}
/* o pedido de arte nova, dali mesmo (etapa 293) */
.haja-ed-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  font: 700 13px/1.2 var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  color: #6b7168;
}
.haja-ed-campo textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e6e3d8;
  border-radius: 14px;
  background: #fbfaf5;
  color: #1f2320;
  font: 600 16px/22px var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  resize: vertical;
}
.haja-ed-campo textarea:focus-visible {
  outline: 3px solid #2f7d4f;
  outline-offset: 2px;
}
.haja-ed-referencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.haja-ed-referencia img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 2px solid #e6e3d8;
  border-radius: 14px;
}
.haja-ed-referencia button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  font: 800 14px/1 var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  cursor: pointer;
}
.haja-ed-quantidade {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}
.haja-ed-quantidade button {
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid #e6e3d8;
  border-radius: 14px;
  background: #fbfaf5;
  color: #1f2320;
  font: 800 14px/1 var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  cursor: pointer;
}
.haja-ed-quantidade button[aria-pressed="true"] {
  border-color: #2f7d4f;
  box-shadow: inset 0 0 0 2px #2f7d4f;
}
/* o histórico de artes geradas rola sozinho, sem empurrar os botões (etapa 295) */
.haja-ed-geradas {
  max-height: 38vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}
.haja-ed-recado {
  margin: 0 0 10px;
  font: 700 14px/20px var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  color: #6b7168;
}
.haja-ed-gerar {
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  background: #2f7d4f;
  color: #ffffff;
  font: 800 16px/1 var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);
}
.haja-ed-gerar:disabled {
  opacity: 0.6;
  cursor: progress;
}
.haja-ed.enviando .haja-ed-estado::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: haja-ed-girar 700ms linear infinite;
}

@keyframes haja-ed-entrar {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
@keyframes haja-ed-surgir {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.haja-ed-unidade {
  animation-name: haja-ed-surgir-unidade;
}
@keyframes haja-ed-surgir-unidade {
  from { opacity: 0; transform: translateX(-100%) translateY(6px); }
  to { opacity: 1; transform: translateX(-100%); }
}
@keyframes haja-ed-pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
@keyframes haja-ed-girar {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .haja-ed *,
  .haja-ed,
  .haja-ed-camada *,
  .haja-ed-folha-fundo,
  .haja-ed-folha-fundo * {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------
   Etapas 284 e 285 (DESIGN 30.25): o seletor de tela, o preenchimento da
   Jornada inteira, as artes novas e a moldura da outra tela.
   ------------------------------------------------------------------ */

.haja-ed-telas {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--ed-sombra);
}
.haja-ed-tela {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ed-apoio);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease;
}
.haja-ed-tela svg {
  width: 18px;
  height: 18px;
}
.haja-ed-tela[aria-pressed="true"] {
  background: var(--ed-verde);
  color: #ffffff;
}
.haja-ed-tela:active {
  transform: scale(0.96);
}
.haja-ed-tela:disabled {
  opacity: 0.45;
  cursor: default;
}
.haja-ed-preencher,
.haja-ed-artes {
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--ed-verde);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ed-verde);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 140ms ease, opacity 140ms ease;
}
.haja-ed-preencher:active,
.haja-ed-artes:active {
  transform: scale(0.96);
}
.haja-ed-preencher.perigo {
  border-color: var(--ed-erro);
  color: var(--ed-erro);
}
.haja-ed-preencher:disabled,
.haja-ed-artes:disabled {
  opacity: 0.45;
  cursor: default;
}
.haja-ed-tela:focus-visible,
.haja-ed-preencher:focus-visible,
.haja-ed-artes:focus-visible,
.haja-ed-moldura button:focus-visible {
  outline: 3px solid var(--ed-verde);
  outline-offset: 3px;
}
/* enquanto o preenchimento caminha, nada de arrastar nem criar por engano */
.haja-ed.preenchendo .haja-ed-item,
.haja-ed.preenchendo .haja-ed-unidade {
  pointer-events: none;
  opacity: 0.5;
}
@media (max-width: 1023px) {
  /* no celular o painel quebra em duas linhas em vez de vazar a tela */
  .haja-ed-base {
    flex-wrap: wrap;
    max-width: calc(100vw - 32px);
  }
  .haja-ed-painel {
    flex-wrap: wrap;
    max-width: 100%;
  }
}

/* a moldura da outra tela: a Jornada de verdade dentro de um `iframe` */
.haja-ed-moldura {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  /* Sem centragem por flex: numa janela menor que a moldura, o topo ficaria
     cortado e sem alcance. Com `overflow` e `margin: auto` na caixa, dá para
     rolar até a beirada. */
  overflow: auto;
  padding: 16px;
  background: rgba(28, 24, 18, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: haja-ed-fundo-entrar 180ms ease backwards;
}
.haja-ed-moldura-caixa {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: min(390px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(20, 17, 12, 0.4);
  animation: haja-ed-surgir 240ms cubic-bezier(0.2, 0.9, 0.3, 1.15) backwards;
}
/* O computador mantém os 820 px mesmo numa janela estreita: encolher a moldura
   mentiria sobre a tela que está sendo arrumada. Aí a pessoa rola para o lado. */
.haja-ed-moldura-caixa[data-tela="computador"] {
  width: 820px;
  flex: none;
}
.haja-ed-moldura-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  background: #f4f2ea;
  font: 800 13px/1.2 var(--font-nunito, ui-sans-serif), system-ui, sans-serif;
  color: var(--ed-tinta);
}
.haja-ed-moldura-barra span {
  flex: 1;
}
.haja-ed-moldura-trocar,
.haja-ed-moldura-fechar {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ed-tinta);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.haja-ed-moldura-fechar {
  background: var(--ed-verde);
  color: #ffffff;
}
.haja-ed-moldura-quadro {
  flex: 1;
  display: block;
  width: 100%;
  min-height: 460px;
  border: 0;
  background: #ffffff;
}
@keyframes haja-ed-fundo-entrar {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .haja-ed-moldura,
  .haja-ed-moldura-caixa {
    animation: none !important;
  }
}

/* ------------------------------------------------------------------
   Etapa 296 (DESIGN 30.30): no celular o editor vira duas faixas
   compactas, e a Jornada volta a ser tocável. Antes, a base quebrava em
   três linhas (Concluir e Desfazer, depois as telas, depois preencher e
   artes) e cobria meia tela do aparelho.
   ------------------------------------------------------------------ */
.haja-ed-curto {
  display: none;
}

@media (max-width: 639px) {
  /* faixa de baixo: as ferramentas do quadrado, só ícone, numa linha que rola */
  .haja-ed-barra {
    left: 8px;
    right: 8px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    max-width: none;
    gap: 2px;
    padding: 4px;
    border-radius: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    transform: translateY(16px) scale(0.96);
    transform-origin: bottom center;
  }
  .haja-ed-barra::-webkit-scrollbar {
    display: none;
  }
  .haja-ed-barra.visivel {
    transform: none;
  }
  .haja-ed-ferramenta {
    flex: 0 0 auto;
    min-width: 46px;
    min-height: 46px;
    padding: 0 4px;
  }
  /* o rótulo fica no aria-label: ícone só, seis ferramentas cabem sem cobrir a tela */
  .haja-ed-ferramenta > span {
    display: none;
  }
  .haja-ed-ferramenta svg {
    width: 22px;
    height: 22px;
  }

  /* faixa de cima: concluir, estado, tela, preencher e artes, também numa linha */
  .haja-ed-base {
    left: 8px;
    right: 8px;
    bottom: calc(140px + env(safe-area-inset-bottom));
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
  }
  .haja-ed-base::-webkit-scrollbar {
    display: none;
  }
  .haja-ed-base > * {
    flex: 0 0 auto;
  }
  .haja-ed-botao {
    min-height: 44px;
    padding: 0 14px 0 10px;
    font-size: 13px;
  }
  .haja-ed-painel {
    flex-wrap: nowrap;
    max-width: none;
  }
  .haja-ed-estado {
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  /* "Salvo" some do celular: o silêncio é a boa notícia, e a faixa precisa do
     espaço. O erro continua aparecendo, com o botão de tentar de novo. */
  .haja-ed-estado.ok {
    display: none;
  }
  .haja-ed-telas {
    padding: 2px;
  }
  /* as telas ficam só com o desenho: 390 px de largura não têm espaço para dois nomes */
  .haja-ed-tela {
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
  }
  .haja-ed-tela > span {
    display: none;
  }
  .haja-ed-preencher,
  .haja-ed-artes {
    min-height: 40px;
    padding: 0 12px;
    font-size: 12px;
    white-space: nowrap;
  }
  .haja-ed-longo {
    display: none;
  }
  .haja-ed-curto {
    display: inline;
  }

  /* a moldura do celular dentro do computador tem o mesmo aperto: vale igual */
  .haja-ed-zoom span {
    display: none;
  }
  .haja-ed-zoom input[type="range"] {
    width: 96px;
  }
}

/* ------------------------------------------------------------------
   Etapa 298 (DESIGN 30.31): a folha do editor cabe na tela e rola.
   A medida é por `border-box`, o teto é a altura visível com folga, e
   no Gerar as ações ficam presas no pé para o botão não escapar.
   ------------------------------------------------------------------ */
.haja-ed-folha,
.haja-ed-folha *,
.haja-ed-folha *::before,
.haja-ed-folha *::after {
  box-sizing: border-box;
}
.haja-ed-folha {
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.haja-ed-folha.haja-ed-galeria {
  max-height: 92vh;
  max-height: 92dvh;
  overflow: hidden;
}
/* no Gerar o corpo rola e as ações ficam no pé, sempre alcançáveis */
.haja-ed-folha.haja-ed-gerador {
  display: flex;
  flex-direction: column;
  width: min(480px, 100%);
  overflow: hidden;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.haja-ed-gerador-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.haja-ed-folha.haja-ed-gerador .haja-ed-folha-acoes {
  flex: 0 0 auto;
  margin-top: 12px;
}
.haja-ed-galeria-rolagem {
  flex: 1 1 auto;
  min-height: 0;
}