/* =============================================================
   PRUMO · boost visual (fundos com ritmo de cor, mais movimento)
   Vem depois de prumo.css e prumo-app.css e só acrescenta: nenhuma regra
   daqui é necessária para ler a página. Os estados iniciais das animações
   só valem com a classe pr-a-b-* no <html>, que o prumo-boost.js coloca
   (e tira se o efeito falhar). Tudo é CSS ou transform/opacity; a pausa
   global (html.pr-pausado) e o movimento reduzido valem para tudo.
   Ritmo das seções: papel e cobalto (abertura), tinta que troca (números),
   cartão (desafio), grafite (processo), mesa de luz (app), cianotipia
   (IA), tinta que segue o fio (antes e depois), céu por hora (corte e
   sol), hachura (decisões), vermelho-lápis (metas), grafite (convite).
   ============================================================= */

@property --pos {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

:root {
  --cinza-giz: #b9bec3;
  --verm-giz: #ff8a6e;
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- base: camadas de fundo e conteúdo por cima ---------- */
.pr-secao,
.pr-processo,
.pr-abertura,
.pr-convite,
.pr-ia {
  isolation: isolate;
  overflow: clip;
}
.pr-secao > .pr-wrap,
.pr-processo > .pr-processo__trilho,
.pr-convite > .pr-convite__miolo {
  position: relative;
  z-index: 1;
}
.pr-fundo,
.pr-soltos,
.pr-ia__chuva,
.pr-chuva,
.pr-ceu {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}
@keyframes pr-desliza {
  to {
    transform: translate(120px, 120px);
  }
}

/* =============================================================
   TÍTULOS · entrada por linha, em máscara
   ============================================================= */
.pr-w {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: 0.14em 0 0.12em;
  margin: -0.14em 0 -0.12em;
}
.pr-w__i {
  display: inline-block;
}
.pr-a-b-titulos [data-dividido] .pr-w__i {
  transform: translateY(112%);
}
.pr-a-b-titulos [data-dividido].is-entrou .pr-w__i {
  transform: none;
  transition: transform 0.95s var(--ease-saida) calc(var(--l, 0) * 0.13s + var(--k, 0) * 0.035s);
}

/* entradas com variação (esquerda, direita, escala), em cima de [data-revela] */
.pr-a-rev [data-revela="esq"] {
  transform: translateX(-44px);
}
.pr-a-rev [data-revela="dir"] {
  transform: translateX(44px);
}
.pr-a-rev [data-revela="escala"] {
  transform: translateY(18px) scale(0.93);
}

/* =============================================================
   NÚMEROS · a tinta troca com o seletor
   ============================================================= */
.pr-numeros::before,
.pr-numeros::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.pr-numeros::before {
  background:
    radial-gradient(58% 70% at 88% 14%, rgba(29, 79, 216, 0.08), transparent 70%),
    radial-gradient(50% 60% at 6% 96%, rgba(29, 79, 216, 0.05), transparent 70%);
}
.pr-numeros::after {
  background:
    radial-gradient(58% 70% at 88% 14%, rgba(228, 65, 31, 0.08), transparent 70%),
    radial-gradient(50% 60% at 6% 96%, rgba(228, 65, 31, 0.05), transparent 70%);
  opacity: 0;
}
.pr-numeros.is-antes::after {
  opacity: 1;
}
.pr-numeros.is-antes::before {
  opacity: 0;
}
.pr-gigante {
  position: absolute;
  right: -3%;
  top: 4%;
  font: 700 clamp(220px, 34vw, 560px) / 0.8 var(--f-titulo);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(29, 79, 216, 0.2);
  white-space: nowrap;
  transition: -webkit-text-stroke-color 0.8s ease;
}
.pr-numeros.is-antes .pr-gigante {
  -webkit-text-stroke-color: rgba(228, 65, 31, 0.22);
}
.pr-numeros__grade {
  perspective: 1000px;
}
.pr-num {
  overflow: hidden;
}
.pr-num:hover {
  transform: none;
  translate: 0 -4px;
}
.pr-num__barras i {
  background-image: repeating-linear-gradient(90deg, rgba(21, 24, 27, 0.16) 0 1px, transparent 1px 25%);
  background-color: rgba(21, 24, 27, 0.1);
}

/* o brilho que acompanha o cursor nos cartões inclináveis */
[data-inclinar] {
  transition: rotate 0.22s var(--ease-saida), translate 0.22s var(--ease-saida), box-shadow 0.25s ease;
}
.pr-num::after,
.pr-janela__brilho {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(29, 79, 216, 0.11), transparent 65%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.pr-num.is-inclinando::after {
  opacity: 1;
}

/* odômetro: os dígitos sobem em colunas (o texto real continua em <b data-valor>) */
.pr-odo-caixa {
  position: relative;
  display: inline-block;
  font: 700 clamp(56px, 6.4vw, 88px) / 1 var(--f-titulo);
  font-style: normal;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pr-odo-caixa b {
  font: inherit;
  letter-spacing: inherit;
}
.pr-a-b-odo [data-valor] {
  color: transparent;
}
.pr-odo {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: baseline;
  font-style: normal;
  color: var(--cobalto);
  pointer-events: none;
}
.pr-num.is-antes .pr-odo {
  color: var(--grafite);
}
.pr-odo i {
  font-style: normal;
}
.pr-odo__c {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}
.pr-odo__fita {
  display: flex;
  flex-direction: column;
  transition: transform 0.9s var(--ease-saida) calc(var(--i, 0) * 0.07s);
}
.pr-odo__fita i {
  display: block;
  height: 1em;
  line-height: 1;
}
.pr-odo__s {
  display: inline-block;
  line-height: 1;
}
.pr-odo.sem-trans .pr-odo__fita {
  transition: none;
}

/* =============================================================
   DESAFIO · cartão com os comentários soltos
   ============================================================= */
.pr-desafio {
  background:
    radial-gradient(52% 58% at 10% 14%, rgba(255, 255, 255, 0.72), transparent 70%),
    radial-gradient(46% 52% at 94% 92%, rgba(21, 24, 27, 0.07), transparent 70%),
    var(--cartao);
}
.pr-soltos {
  z-index: 3;
}
.pr-solto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w, 190px);
  padding: 9px 11px 10px;
  border: 1px solid rgba(181, 42, 10, 0.55);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(21, 24, 27, 0.16);
  font: 500 12.5px / 1.4 var(--f-mono);
  color: var(--grafite);
  animation: pr-deriva var(--t, 7s) ease-in-out var(--del, 0s) infinite alternate;
  transition: opacity 0.4s ease;
}
.pr-solto b {
  display: block;
  margin-bottom: 2px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verm-t);
}
.pr-solto--recado {
  border-style: dashed;
}
.pr-solto.is-fora {
  opacity: 0.5;
}
@keyframes pr-deriva {
  from {
    translate: 0 0;
  }
  to {
    translate: var(--dx, 10px) var(--dy, -12px);
  }
}
.pr-dplanta__quadro .pr-pl__mov,
.pr-dplanta__quadro .pr-pl__txt {
  transition: translate 0.3s ease-out;
}

/* a planta que se traça sozinha (Desafio e IA); os pinos caem no fim */
.pr-a-b-traco .pr-pl--traco .pr-pl__parede,
.pr-a-b-traco .pr-pl--traco .pr-pl__jan,
.pr-a-b-traco .pr-pl--traco .pr-pl__linha {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.pr-a-b-traco .pr-pl--traco .pr-pl__tracejado,
.pr-a-b-traco .pr-pl--traco .pr-pl__giro,
.pr-a-b-traco .pr-pl--traco .pr-pl__porta,
.pr-a-b-traco .pr-pl--traco .pr-pl__rampa,
.pr-a-b-traco .pr-pl--traco .pr-pl__txt,
.pr-a-b-traco .pr-pl--traco .pr-pl__mov {
  opacity: 0;
}
.pr-a-b-traco .is-tracado .pr-pl__tracejado {
  animation: pr-aparece 0.9s ease 0s forwards;
}
.pr-a-b-traco .is-tracado .pr-pl__parede {
  animation: pr-traco 1.5s cubic-bezier(0.5, 0, 0.3, 1) 0.2s forwards;
}
.pr-a-b-traco .is-tracado .pr-pl__int {
  animation-delay: 1s;
  animation-duration: 1.4s;
}
.pr-a-b-traco .is-tracado .pr-pl__jan {
  animation: pr-traco 1s ease 1.9s forwards;
}
.pr-a-b-traco .is-tracado .pr-pl__linha {
  animation: pr-traco 0.9s ease 1.6s forwards;
}
.pr-a-b-traco .is-tracado .pr-pl__porta,
.pr-a-b-traco .is-tracado .pr-pl__rampa,
.pr-a-b-traco .is-tracado .pr-pl__giro {
  animation: pr-aparece 0.7s ease 2.5s forwards;
}
.pr-a-b-traco .is-tracado .pr-pl__mov {
  animation: pr-aparece 0.8s ease 2.9s forwards;
}
.pr-a-b-traco .is-tracado .pr-pl__txt {
  animation: pr-aparece 0.8s ease 3.3s forwards;
}
@keyframes pr-traco {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pr-aparece {
  to {
    opacity: 1;
  }
}
/* os pontos de dor caem no lugar depois do traço */
.pr-a-b-traco .pr-dplanta__quadro:not(.is-tracado) .pr-dplanta__pino i {
  opacity: 0;
}
.pr-a-b-traco .pr-dplanta__quadro.is-tracado .pr-dplanta__pino i {
  animation: pr-cai 0.6s var(--ease-saida) calc(3.4s + var(--k, 0) * 0.14s) both;
}
@keyframes pr-cai {
  from {
    opacity: 0;
    translate: 0 -34px;
    scale: 1.3;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/* mira de prancha: linhas finas e a cota em metros, só com mouse */
.pr-mira {
  --mira: rgba(29, 79, 216, 0.75);
  --mira-bg: var(--cobalto);
  --mira-fg: #fff;
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.pr-mira.is-on {
  opacity: 1;
}
.pr-mira__h,
.pr-mira__v {
  position: absolute;
  left: 0;
  top: 0;
}
.pr-mira__h {
  right: 0;
  height: 0;
  translate: 0 var(--my, 0px);
  border-top: 1px dashed var(--mira);
}
.pr-mira__v {
  bottom: 0;
  width: 0;
  translate: var(--mx, 0px) 0;
  border-left: 1px dashed var(--mira);
}
.pr-mira__txt {
  position: absolute;
  left: 0;
  top: 0;
  translate: calc(var(--mx, 0px) + 12px) calc(var(--my, 0px) + 12px);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--mira-bg);
  color: var(--mira-fg);
  font: 500 12px / 1.2 var(--f-mono);
  white-space: nowrap;
}
.pr-mira.is-dir .pr-mira__txt {
  translate: calc(var(--mx, 0px) - 100% - 12px) calc(var(--my, 0px) + 12px);
}
.pr-mira.is-baixo .pr-mira__txt {
  translate: calc(var(--mx, 0px) + 12px) calc(var(--my, 0px) - 100% - 12px);
}
.pr-mira.is-dir.is-baixo .pr-mira__txt {
  translate: calc(var(--mx, 0px) - 100% - 12px) calc(var(--my, 0px) - 100% - 12px);
}
.pr-ia .pr-mira {
  --mira: rgba(255, 255, 255, 0.8);
  --mira-bg: #fff;
  --mira-fg: var(--cobalto-esc);
}

/* =============================================================
   PROCESSO · a mesa de desenho (papel com a grade em tinta)
   ============================================================= */
.pr-processo {
  background-color: var(--papel);
  color: var(--grafite);
}
.pr-processo::before {
  content: "";
  position: absolute;
  inset: -120px;
  z-index: 0;
  background-image:
    linear-gradient(rgba(23, 22, 19, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 22, 19, 0.075) 1px, transparent 1px),
    linear-gradient(rgba(23, 22, 19, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 22, 19, 0.035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  animation: pr-desliza 46s linear infinite;
  pointer-events: none;
}
.pr-processo :focus-visible {
  outline-color: var(--cobalto);
}
.pr-processo__palco {
  position: relative;
}
.pr-processo__palco > .pr-wrap {
  position: relative;
  z-index: 1;
}
.pr-semana {
  position: absolute;
  top: var(--y, 20%);
  left: var(--x, 0);
  font: 700 clamp(180px, 30vw, 460px) / 0.8 var(--f-titulo);
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(23, 22, 19, 0.1);
  white-space: nowrap;
}
.pr-semana span {
  display: block;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate 0.5s ease-out;
}
@media (min-width: 760px) {
  .pr-a-b-processo .pr-processo .pr-etapa__btn {
    transition: background 0.25s ease, color 0.25s ease, translate 0.7s var(--ease-saida), opacity 0.7s ease;
  }
  .pr-a-b-processo .pr-processo:not(.is-entrou) .pr-etapa__btn {
    opacity: 0;
    translate: -32px 0;
  }
  .pr-a-b-processo .pr-processo.is-entrou .pr-etapa__btn {
    transition-delay: 0s, 0s, calc(var(--ord, 0) * 0.11s), calc(var(--ord, 0) * 0.11s);
  }
  .pr-a-processo .pr-prumo-marca {
    color: var(--verm);
    transform-origin: 50% 0;
  }
  .pr-prumo-marca.is-assenta {
    animation: pr-assenta 2.6s ease-in-out both;
  }
  .pr-etapa-painel.is-troca .pr-etapa-painel__cols {
    animation: pr-painel-entra 0.5s var(--ease-saida) both;
  }
}
@keyframes pr-assenta {
  0% {
    rotate: 0deg;
  }
  14% {
    rotate: 9deg;
  }
  34% {
    rotate: -6deg;
  }
  54% {
    rotate: 3.4deg;
  }
  74% {
    rotate: -1.6deg;
  }
  100% {
    rotate: 0deg;
  }
}
@keyframes pr-painel-entra {
  from {
    opacity: 0;
    translate: 18px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* =============================================================
   APP · a mesa de luz
   ============================================================= */
.pr-app {
  background: radial-gradient(72% 82% at 50% 40%, #faf8f3 0, var(--papel) 56%, #e2ddd1 100%);
}
.pr-visor {
  position: relative;
  perspective: 1400px;
}
.pr-janela {
  position: relative;
}
.pr-janela .pr-tela {
  position: relative;
}
.pr-a-app .pr-janela.is-ativa .pr-janela__barra,
.pr-a-app .pr-janela.is-ativa .pr-tela {
  animation: pr-tela-entra 0.55s var(--ease-saida) both;
}
@keyframes pr-tela-entra {
  from {
    opacity: 0;
    translate: 26px 0;
    filter: blur(5px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}
.pr-app__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
[data-passeio] {
  display: none;
}
.pr-a-b-passeio [data-passeio] {
  display: inline-flex;
}
[data-passeio][aria-pressed="true"] {
  background: var(--grafite);
  border-color: var(--grafite);
  color: var(--papel);
}
.pr-flut {
  position: absolute;
  z-index: 4;
  left: calc(min(100%, 1040px) + 16px);
  top: var(--y);
  display: grid;
  gap: 2px;
  width: 172px;
  padding: 10px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(21, 24, 27, 0.16);
  font: 500 12.5px / 1.35 var(--f-mono);
  color: var(--grafite);
  opacity: 0;
  scale: 0.9;
  pointer-events: none;
  transition: opacity 0.5s ease, scale 0.6s var(--ease-saida);
}
.pr-flut b {
  font: 700 16px / 1.15 var(--f-titulo);
}
.pr-flut span {
  color: var(--grafite-2);
}
.pr-visor[data-ativa="projetos"] .pr-flut[data-tela="projetos"],
.pr-visor[data-ativa="revisao"] .pr-flut[data-tela="revisao"],
.pr-visor[data-ativa="parecer"] .pr-flut[data-tela="parecer"],
.pr-visor[data-ativa="aprovacao"] .pr-flut[data-tela="aprovacao"] {
  opacity: 1;
  scale: 1;
  animation: pr-flutua 6s ease-in-out var(--del, 0s) infinite alternate;
}
.pr-visor.em-passeio .pr-flut {
  opacity: 0 !important;
}
@keyframes pr-flutua {
  from {
    translate: 0 -5px;
  }
  to {
    translate: 0 8px;
  }
}
/* cursor-fantasma do "Ver em ação" */
.pr-fantasma {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  width: 28px;
  height: 28px;
  opacity: 0;
  translate: var(--cx, 0px) var(--cy, 0px);
  transition: translate 0.95s var(--ease-suave), opacity 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(21, 24, 27, 0.4));
  pointer-events: none;
}
.pr-fantasma.is-on {
  opacity: 1;
}
.pr-fantasma svg {
  width: 28px;
  height: 28px;
  fill: var(--grafite);
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.pr-fantasma::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -9px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--cobalto);
  border-radius: 50%;
  opacity: 0;
}
.pr-fantasma.is-toque::after {
  animation: pr-toque 0.55s ease-out;
}
@keyframes pr-toque {
  from {
    opacity: 0.9;
    scale: 0.4;
  }
  to {
    opacity: 0;
    scale: 2.4;
  }
}
.is-afunda {
  filter: brightness(0.9);
  scale: 0.96;
  transition: scale 0.18s ease, filter 0.18s ease;
}

/* =============================================================
   A IA LÊ A PLANTA · cianotipia com colunas de medidas
   ============================================================= */
.pr-ia::before {
  inset: -120px;
  animation: pr-desliza 52s linear infinite;
}
.pr-ia::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(78% 68% at 50% 46%, transparent 52%, rgba(6, 18, 60, 0.55) 100%);
  pointer-events: none;
}
.pr-ia__col {
  position: absolute;
  top: 0;
  left: var(--x);
  font: 400 12px / 2 var(--f-mono);
  color: rgba(255, 255, 255, 0.12);
  white-space: pre;
  animation: pr-coluna var(--t, 30s) linear infinite;
}
.pr-ia__chuva {
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
}
@keyframes pr-coluna {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}
/* medidas digitadas, anéis de radar nas marcas e traçado em azul de cópia */
.pr-a-ia [data-lendo] .pr-ia__chip {
  animation: pr-digitaA 0.9s steps(var(--n, 12)) var(--d, 0s) both;
}
.pr-a-ia [data-lendo][data-ciclo="b"] .pr-ia__chip {
  animation-name: pr-digitaB;
}
@keyframes pr-digitaA {
  from {
    opacity: 1;
    clip-path: inset(-4px 100% -4px -4px);
  }
  to {
    opacity: 1;
    clip-path: inset(-4px -4px -4px -4px);
  }
}
@keyframes pr-digitaB {
  from {
    opacity: 1;
    clip-path: inset(-4px 100% -4px -4px);
  }
  to {
    opacity: 1;
    clip-path: inset(-4px -4px -4px -4px);
  }
}
.pr-ia__marca {
  position: absolute;
}
.pr-a-ia [data-lendo] .pr-ia__marca::before,
.pr-a-ia [data-lendo] .pr-ia__marca::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  animation: pr-radarA 2.6s ease-out calc(var(--d, 0s) + 0.5s) infinite;
}
.pr-a-ia [data-lendo] .pr-ia__marca::after {
  animation-delay: calc(var(--d, 0s) + 1.8s);
}
.pr-a-ia [data-lendo][data-ciclo="b"] .pr-ia__marca::before,
.pr-a-ia [data-lendo][data-ciclo="b"] .pr-ia__marca::after {
  animation-name: pr-radarB;
}
.pr-ia__marca.is-incerta::before,
.pr-ia__marca.is-incerta::after {
  border-style: dashed !important;
}
.pr-ia__marca.is-recusada::before,
.pr-ia__marca.is-recusada::after {
  display: none !important;
}
@keyframes pr-radarA {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}
@keyframes pr-radarB {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}
.pr-a-b-traco .pr-ia__quadro:not(.is-tracado) .pr-pl--traco .pr-pl__parede {
  stroke-dashoffset: 1;
}
.pr-a-b-traco [data-lendo] .pr-pl--traco .pr-pl__parede {
  animation: pr-traco 3.4s cubic-bezier(0.5, 0, 0.3, 1) 0.1s forwards;
}
.pr-a-b-traco [data-lendo] .pr-pl--traco .pr-pl__int {
  animation-delay: 0.8s;
}
.pr-a-b-traco [data-lendo] .pr-pl--traco .pr-pl__jan {
  animation: pr-traco 1.2s ease 1.6s forwards;
}
.pr-a-b-traco [data-lendo] .pr-pl--traco .pr-pl__linha {
  animation: pr-traco 0.9s ease 1.4s forwards;
}
.pr-a-b-traco [data-lendo] .pr-pl--traco .pr-pl__tracejado {
  animation: pr-aparece 0.9s ease 0s forwards;
}
.pr-a-b-traco [data-lendo] .pr-pl--traco .pr-pl__porta,
.pr-a-b-traco [data-lendo] .pr-pl--traco .pr-pl__rampa,
.pr-a-b-traco [data-lendo] .pr-pl--traco .pr-pl__giro {
  animation: pr-aparece 0.7s ease 2.4s forwards;
}
.pr-a-b-traco [data-lendo] .pr-pl--traco .pr-pl__mov {
  animation: pr-aparece 0.8s ease 2.8s forwards;
}
.pr-a-b-traco [data-lendo] .pr-pl--traco .pr-pl__txt {
  animation: pr-aparece 0.8s ease 3.2s forwards;
}
/* "Reler a planta" recomeça o traçado trocando o nome das animações (A e B são iguais) */
.pr-a-b-traco [data-lendo][data-ciclo="b"] .pr-pl--traco .pr-pl__parede {
  animation-name: pr-tracoB;
}
.pr-a-b-traco [data-lendo][data-ciclo="b"] .pr-pl--traco .pr-pl__jan,
.pr-a-b-traco [data-lendo][data-ciclo="b"] .pr-pl--traco .pr-pl__linha {
  animation-name: pr-tracoB;
}
.pr-a-b-traco [data-lendo][data-ciclo="b"] .pr-pl--traco .pr-pl__tracejado,
.pr-a-b-traco [data-lendo][data-ciclo="b"] .pr-pl--traco .pr-pl__porta,
.pr-a-b-traco [data-lendo][data-ciclo="b"] .pr-pl--traco .pr-pl__rampa,
.pr-a-b-traco [data-lendo][data-ciclo="b"] .pr-pl--traco .pr-pl__giro,
.pr-a-b-traco [data-lendo][data-ciclo="b"] .pr-pl--traco .pr-pl__mov,
.pr-a-b-traco [data-lendo][data-ciclo="b"] .pr-pl--traco .pr-pl__txt {
  animation-name: pr-apareceB;
}
@keyframes pr-tracoB {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pr-apareceB {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* =============================================================
   ANTES E DEPOIS · lápis, tinta e carimbo
   ============================================================= */
.pr-comp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(228, 65, 31, 0.06) 0,
    rgba(228, 65, 31, 0.06) calc(var(--pos, 50%) - 5%),
    rgba(29, 79, 216, 0.06) calc(var(--pos, 50%) + 5%),
    rgba(29, 79, 216, 0.06) 100%
  );
  pointer-events: none;
}
.pr-comp.is-anima,
.pr-comp.is-anima .pr-comp__palco {
  transition: --pos 0.7s var(--ease-suave);
}
.pr-comp__fio span {
  rotate: calc(var(--vel, 0) * 1deg);
  transition: rotate 0.35s var(--ease-saida);
}
.pr-a-b-lapis .pr-pl__lapis {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.pr-a-b-lapis .pr-pl__lapis-txt,
.pr-a-b-lapis .pr-pl__nota {
  opacity: 0;
}
.pr-a-b-lapis .is-vista .pr-pl__lapis {
  animation: pr-traco 1.1s ease calc(0.4s + var(--k, 0) * 1.1s) forwards;
}
.pr-a-b-lapis .is-vista .pr-pl__lapis-txt {
  animation: pr-aparece 0.8s ease 2.4s forwards;
}
.pr-a-b-lapis .is-vista .pr-pl__nota {
  animation: pr-aparece 0.7s ease calc(0.2s + var(--k, 0) * 0.5s) forwards;
}
.pr-a-b-lapis .pr-pl__ficha {
  transform-box: fill-box;
  transform-origin: center;
  scale: 0;
}
.pr-a-b-lapis .is-vista .pr-pl__ficha {
  animation: pr-pop 0.55s var(--ease-saida) calc(0.8s + var(--k, 0) * 0.3s) forwards;
}
@keyframes pr-pop {
  to {
    scale: 1;
  }
}
.pr-a-b-lapis .pr-pl__carimbo {
  opacity: 0;
}
.pr-a-b-lapis .pr-pl__onda {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.pr-a-b-lapis .is-carimbado .pr-pl__carimbo {
  animation: pr-carimbo 0.6s var(--ease-saida) both;
}
.pr-a-b-lapis .is-carimbado .pr-pl__onda {
  animation: pr-onda 0.9s ease-out 0.4s both;
}
@keyframes pr-carimbo {
  0% {
    opacity: 0;
    transform: scale(2.4) rotate(14deg);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes pr-onda {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.3);
  }
}

/* =============================================================
   CORTE E SOL · o céu do dia
   ============================================================= */
.pr-cs {
  --ceu-a: #cfe3f7;
  --ceu-b: #f7fafb;
  /* o céu da hora, lavado no papel: a cor fica no alto e some até o pé da folha */
  background: linear-gradient(180deg, color-mix(in srgb, var(--ceu-a) 38%, var(--papel)), var(--papel) 70%);
}
.pr-cs--3d .pr-cs__3d {
  background: linear-gradient(180deg, #fbfcfa, #e3e5de);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ceu-a) 62%, #fff), color-mix(in srgb, var(--ceu-b) 78%, #e3e5de));
}
.pr-ceu__sol {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe8 0 18%, rgba(255, 220, 140, 0.85) 30%, rgba(255, 200, 110, 0.34) 52%, transparent 72%);
  opacity: var(--brilho, 0.9);
  animation: pr-respira-sol 4.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes pr-respira-sol {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.14;
  }
}
.pr-ctl__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 4px 0 10px;
}
.pr-ctl__linha .pr-ctl__presets {
  margin: 0;
}
.pr-tocar {
  display: none;
  align-items: center;
  gap: 8px;
  border-color: var(--grafite);
}
.pr-a-b-dia .pr-tocar {
  display: inline-flex;
}
.pr-tocar__ic {
  position: relative;
  width: 12px;
  height: 12px;
}
.pr-tocar__ic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}
.pr-tocar[aria-pressed="true"] .pr-tocar__ic::before {
  clip-path: polygon(0 0, 36% 0, 36% 100%, 0 100%, 0 0, 64% 0, 100% 0, 100% 100%, 64% 100%, 64% 0);
}
.pr-faixa {
  position: relative;
}
.pr-faixa__ph {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--ph, 0%);
  width: 2px;
  margin-left: -1px;
  background: var(--verm-t);
  pointer-events: none;
}

/* =============================================================
   DECISÕES · hachura de projeto e carimbos
   ============================================================= */
.pr-decisoes {
  background:
    repeating-linear-gradient(135deg, rgba(21, 24, 27, 0.04) 0 1px, transparent 1px 15px),
    var(--papel);
}
.pr-decisoes::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='92' fill='none' stroke='%231d4fd8' stroke-width='5' stroke-dasharray='10 8'/><path d='M52 104l32 32 66-72' fill='none' stroke='%231d4fd8' stroke-width='13' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='92' fill='none' stroke='%23b52a0a' stroke-width='5' stroke-dasharray='10 8'/><path d='M60 60l80 80M140 60l-80 80' fill='none' stroke='%23b52a0a' stroke-width='13' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: -90px 90%, calc(100% + 70px) 6%;
  background-size: 380px, 340px;
  opacity: 0.08;
  pointer-events: none;
}
.pr-dcol--fora {
  perspective: 900px;
}
.pr-dcol--fora .pr-dec--d {
  translate: 0 0 calc(var(--n, 0) * -22px);
  transition: translate 0.4s var(--ease-saida);
}
.pr-dcol--fora .pr-dec--d:nth-of-type(1) {
  --n: 0;
}
.pr-dcol--fora .pr-dec--d:nth-of-type(2) {
  --n: 1;
}
.pr-dcol--fora .pr-dec--d:nth-of-type(3) {
  --n: 2;
}
.pr-dcol--fora .pr-dec--d:nth-of-type(4) {
  --n: 3;
}
.pr-dcol--fora .pr-dec--d[open],
.pr-dcol--fora .pr-dec--d:hover {
  translate: 0 0 0;
}
.pr-dec--d summary > span:last-child {
  justify-self: start;
  background: linear-gradient(transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 0% 1.3em repeat-y;
  transition: background-size 0.7s var(--ease-saida);
}
.pr-dec--d[open] summary > span:last-child {
  background-size: 100% 1.3em;
}
.pr-a-b-carimbo .pr-decisoes.is-vista .pr-dec[open] .pr-dec__ic {
  animation: pr-carimbo-ic 0.6s var(--ease-saida) both;
}
@keyframes pr-carimbo-ic {
  0% {
    opacity: 0;
    transform: scale(2.4) rotate(-18deg);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* =============================================================
   METAS · papel com o radar a lápis vermelho
   ============================================================= */
.pr-metas {
  background-color: var(--papel);
  background-image: repeating-radial-gradient(circle at 88% 22%, rgba(181, 42, 10, 0.07) 0 1px, transparent 1px 46px);
}
.pr-metas .pr-anel,
.pr-metas .pr-licao {
  color: var(--grafite);
}
.pr-metas .pr-seg button {
  color: var(--grafite);
}
.pr-metas .pr-seg button[aria-pressed="true"] {
  color: var(--papel);
}
.pr-metas::before,
.pr-metas::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -24%;
  z-index: 0;
  width: 90vmin;
  aspect-ratio: 1;
  border: 1.5px solid rgba(181, 42, 10, 0.3);
  border-radius: 50%;
  opacity: 0;
  animation: pr-radar-fundo 5.4s ease-out infinite;
  pointer-events: none;
}
.pr-metas::after {
  animation-delay: 2.7s;
}
@keyframes pr-radar-fundo {
  0% {
    opacity: 0.8;
    transform: scale(0.15);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
.pr-metas :focus-visible {
  outline-color: var(--cobalto);
}
.pr-anel.is-vista .pr-anel__arco {
  filter: drop-shadow(0 0 5px rgba(29, 79, 216, 0.55));
}
.pr-anel.is-curto.is-vista .pr-anel__arco {
  filter: drop-shadow(0 0 5px rgba(181, 42, 10, 0.5));
}
.pr-licao {
  transition: translate 0.3s var(--ease-saida), box-shadow 0.3s ease;
}
.pr-licao:hover {
  translate: 0 -6px;
  box-shadow: 0 18px 34px rgba(21, 24, 27, 0.2);
}
.pr-licao svg {
  transform-origin: 50% 0;
}
.pr-a-b-carimbo .pr-licao.is-vista svg,
.pr-a-rev .pr-licao.is-vista svg {
  animation: pr-fio-desce 3.4s ease-in-out both;
}
@keyframes pr-fio-desce {
  0% {
    translate: 0 -42px;
    rotate: 0deg;
  }
  24% {
    translate: 0 0;
    rotate: 7deg;
  }
  44% {
    rotate: -5deg;
  }
  64% {
    rotate: 3deg;
  }
  82% {
    rotate: -1.4deg;
  }
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
}

/* =============================================================
   CONVITE · a chuva de fios de prumo
   ============================================================= */
.pr-convite__grade {
  inset: -120px;
  animation: pr-desliza 60s linear infinite;
}
.pr-chuva__cam {
  position: absolute;
  inset: 0;
  translate: var(--px, 0px) 0;
  transition: translate 0.5s ease-out;
}
.pr-f {
  position: absolute;
  top: -10px;
  left: var(--x);
  width: 1px;
  height: var(--h);
  background: rgba(247, 248, 244, var(--o, 0.4));
  transform-origin: 50% 0;
  animation: pr-fio-bal var(--t, 6s) ease-in-out var(--del, 0s) infinite alternate;
}
.pr-f::after {
  content: "";
  position: absolute;
  left: calc(var(--s, 1) * -4.5px + 0.5px);
  bottom: calc(var(--s, 1) * -16px);
  width: calc(var(--s, 1) * 9px);
  height: calc(var(--s, 1) * 18px);
  background: rgba(247, 248, 244, calc(var(--o, 0.4) + 0.12));
  clip-path: polygon(50% 100%, 0 32%, 50% 0, 100% 32%);
}
@keyframes pr-fio-bal {
  from {
    rotate: calc(var(--amp, 4deg) * -1);
  }
  to {
    rotate: var(--amp, 4deg);
  }
}
.pr-fio-conv__pend.is-fisica {
  animation: none;
}
.pr-peso {
  touch-action: none;
}
.pr-peso.is-arrasta {
  cursor: grabbing;
}

/* =============================================================
   TOPO E FIO · mudam de tema com a seção embaixo deles
   ============================================================= */
.pr-topo {
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.pr-topo.is-escuro {
  background: linear-gradient(to bottom, rgba(21, 24, 27, 0.9), rgba(21, 24, 27, 0));
  color: var(--papel);
}
.pr-topo.is-escuro.is-rolado {
  background: rgba(21, 24, 27, 0.88);
  box-shadow: 0 1px 0 rgba(247, 248, 244, 0.18);
}
.pr-topo.is-escuro .pr-topo__marca svg {
  color: var(--papel);
}
.pr-topo.is-escuro .pr-topo__selo {
  border-color: rgba(247, 248, 244, 0.7);
  background: rgba(21, 24, 27, 0.6);
}
.pr-topo.is-escuro .pr-topo__voltar:hover {
  color: var(--cobalto-claro);
}
.pr-topo.is-escuro :focus-visible {
  outline-color: var(--cobalto-claro);
}
.pr-topo__marca svg {
  transition: color 0.3s ease;
}

/* =============================================================
   RÉGUA LATERAL E MARCAS DE CORTE A–A
   ============================================================= */
.pr-regua-lat {
  display: none;
}
@media (min-width: 1100px) and (min-height: 600px) {
  .pr-a-b-regua .pr-regua-lat {
    display: block;
    position: fixed;
    z-index: 39;
    left: clamp(4px, 0.8vw, 14px);
    top: 72px;
    bottom: 28px;
    width: 26px;
    overflow: clip;
    color: var(--grafite);
    pointer-events: none;
    transition: color 0.3s ease;
  }
  .pr-regua-lat.is-claro {
    color: #fff;
  }
  .pr-regua-lat__fita {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2400px;
    transform: translateY(calc(var(--prog, 0) * -1700px));
    background:
      repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 50px) 0 0 / 16px 100% no-repeat,
      repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 10px) 0 0 / 8px 100% no-repeat;
    opacity: 0.55;
  }
  .pr-regua-lat__rot {
    position: absolute;
    left: 1px;
    top: 50%;
    padding: 8px 0;
    writing-mode: vertical-rl;
    rotate: 180deg;
    translate: 0 50%;
    background: var(--papel);
    font: 500 12px / 1 var(--f-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease;
  }
  .pr-regua-lat.is-claro .pr-regua-lat__rot {
    background: var(--grafite);
  }
  .pr-regua-lat__ponta {
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 0;
    border-top: 2px solid var(--verm-t);
    translate: 0 -34px;
  }
}
.pr-aa {
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  z-index: 2;
  height: 0;
  color: rgba(21, 24, 27, 0.55);
  pointer-events: none;
}
[data-tema="escuro"] > .pr-aa {
  color: rgba(247, 248, 244, 0.62);
}
.pr-aa::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) + 28px);
  right: calc(var(--gutter) + 28px);
  top: 0;
  border-top: 1.5px dashed currentColor;
}
.pr-aa i {
  position: absolute;
  top: -12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font: 500 12px / 1 var(--f-mono);
  font-style: normal;
}
.pr-aa i:first-child {
  left: var(--gutter);
}
.pr-aa i:last-child {
  right: var(--gutter);
}
.pr-a-b-regua .pr-aa::before {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s var(--ease-saida);
}
.pr-a-b-regua .pr-aa.is-vista::before {
  transform: scaleX(1);
}
.pr-a-b-regua .pr-aa i {
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
}
.pr-a-b-regua .pr-aa.is-vista i {
  opacity: 1;
}

/* =============================================================
   VERSÃO LEVE (celular e telas de toque): menos camadas
   ============================================================= */
html.pr-leve .pr-flut,
html.pr-leve .pr-solto,
html.pr-leve .pr-mira,
html.pr-leve .pr-regua-lat,
html.pr-leve .pr-gigante,
html.pr-leve .pr-semana {
  display: none !important;
}
html.pr-leve .pr-ia__col:nth-child(n + 5) {
  display: none;
}
html.pr-leve .pr-ceu__sol {
  scale: 0.7;
}
html.pr-leve .pr-sol__hora {
  display: none;
}
@media (max-width: 1359px) {
  .pr-flut {
    display: none;
  }
}
@media (max-width: 899px) {
  .pr-metas::before,
  .pr-metas::after {
    width: 120vmin;
  }
  .pr-cota {
    font-size: 12px;
  }
}

/* =============================================================
   MOVIMENTO REDUZIDO · tudo parado, no quadro final
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .pr-pl__parede,
  .pr-pl__jan,
  .pr-pl__linha,
  .pr-pl__lapis {
    stroke-dashoffset: 0 !important;
  }
  .pr-pl__tracejado,
  .pr-pl__giro,
  .pr-pl__porta,
  .pr-pl__rampa,
  .pr-pl__txt,
  .pr-pl__mov,
  .pr-pl__lapis-txt,
  .pr-pl__nota,
  .pr-pl__carimbo {
    opacity: 1 !important;
  }
  .pr-pl__ficha {
    scale: 1 !important;
  }
  .pr-pl__onda {
    opacity: 0 !important;
  }
  .pr-w__i {
    transform: none !important;
  }
  .pr-metas::before,
  .pr-metas::after,
  .pr-soltos,
  .pr-ia__chuva,
  .pr-chuva,
  .pr-flut {
    display: none;
  }
  .pr-ia__chip {
    clip-path: none !important;
  }
}