/* website2 v3 — CENA 4 · "Provas" ============================================
 * Referência que o cliente indicou: unseen.co/projects (vista ao vivo,
 * captura em _source/refs/unseen-projects.png). Título centrado, pílulas de
 * filtro com contagem, grelha de 2 colunas de mosaicos em movimento, e por
 * baixo só nome + disciplina. Ver ROTEIRO-V3.md §3, Cena 4.
 *
 * A diferença pedida: o mosaico não leva a lado nenhum. É um pedaço real do
 * projeto a viver dentro do portefólio — a página do cliente a passar dentro
 * da moldura, ou uma demo nossa a correr a sério.
 *
 * Acento da cena: --aqua (um por cena, DESIGN-SYSTEM-V3 §1).
 * ========================================================================= */

.proofs{background:var(--void);color:var(--paper);padding:clamp(90px,13vh,160px) 0 clamp(80px,12vh,150px);position:relative}
.proofs-inner{width:min(1320px,100% - clamp(32px,6vw,96px));margin-inline:auto}

/* ---- cabeçalho: título e mais nada ------------------------------------- */
.proofs-head{text-align:center;margin-bottom:clamp(34px,5vh,58px)}
.proofs-eyebrow{display:block;font:500 11px/1 var(--ff-mono,ui-monospace,monospace);
  letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);margin-bottom:18px}
.proofs-title{margin:0;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(30px,5.2vw,74px);line-height:.98;letter-spacing:-.03em;color:var(--paper)}

/* ---- pílulas de filtro: o número é o conteúdo --------------------------
   A barra saiu da marcação a 2026-09-25 (seis casos não justificam filtro).
   As regras ficam, como o `proofs.js` que as alimenta, para o dia em que a
   grelha voltar a crescer. */
.proofs-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:clamp(26px,4vh,44px) 0 clamp(30px,5vh,54px);padding:0;list-style:none}
.proofs-filters button{display:inline-flex;align-items:baseline;gap:8px;padding:10px 18px;
  border:1px solid var(--rule);border-radius:999px;background:transparent;color:var(--paper-dim);
  font:500 12px/1 var(--ff-ui,Inter,system-ui,sans-serif);letter-spacing:.01em;cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.proofs-filters button b{font:500 10px/1 var(--ff-mono,ui-monospace,monospace);
  letter-spacing:.1em;color:var(--paper-faint)}
.proofs-filters button:hover{border-color:var(--rule-strong);color:var(--paper)}
.proofs-filters button[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--void)}
.proofs-filters button[aria-pressed="true"] b{color:rgba(7,8,13,.55)}
.proofs-filters button:focus-visible{outline:3px solid var(--aqua);outline-offset:4px}

/* ---- grelha ------------------------------------------------------------ */
.proofs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(34px,4.4vw,70px) clamp(24px,3vw,48px);margin:0;padding:0;list-style:none}
.proof{margin:0}
.proof[hidden]{display:none}

/* o palco é um botão: abre o fragmento em grande, nunca sai do site */
.proof-stage{display:block;width:100%;padding:0;border:0;background:var(--ink);
  border-radius:4px;overflow:hidden;position:relative;cursor:pointer;
  aspect-ratio:4/3;isolation:isolate}
.proof-stage:focus-visible{outline:3px solid var(--aqua);outline-offset:4px}
.proof-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--rule);border-radius:4px}

/* a página do cliente a viajar dentro da moldura: a imagem é mais alta do
   que o palco e desloca-se com o scroll (--pan vem do proofs.js) */
.proof-pan{position:absolute;inset:0;overflow:hidden}
.proof-pan img{position:absolute;left:50%;top:0;width:112%;height:auto;
  transform:translate(-50%, calc(var(--pan,0) * -1 * (100% - var(--stage,340px))));
  display:block;image-rendering:auto}
.proof-stage:hover .proof-pan img{width:118%}
.proof-pan img{transition:width .6s cubic-bezier(.22,.61,.36,1)}

/* palco de demo viva — o módulo é montado aqui pelo proofs.js */
.proof-live{position:absolute;inset:0;display:grid;place-items:stretch;background:var(--ink-2)}
.proof-live > *{width:100%;height:100%}
.proof-live[data-state="idle"]::before{content:attr(data-idle);position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;text-align:center;padding:24px;
  font:500 10px/1.6 var(--ff-mono,ui-monospace,monospace);letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-faint)}

/* etiqueta de canto: diz o que o mosaico é, sem prosa */
.proof-badge{position:absolute;z-index:4;left:12px;top:12px;padding:5px 10px;border-radius:999px;
  background:rgba(7,8,13,.66);backdrop-filter:blur(6px);
  font:500 9px/1 var(--ff-mono,ui-monospace,monospace);letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-dim)}
.proof-badge--live{color:var(--aqua)}

/* ---- ficha técnica: categoria, soluções, tecnologia --------------------
   Desde 2026-09-25 a legenda deixou de dizer o nome do cliente. Três blocos
   e mais nada: que negócio foi atendido, o que foi entregue e com que
   tecnologia. A imagem continua a ser a prova; isto é a etiqueta ao lado.
   Grelha (e não flex em linha) porque a seta tem de ficar ancorada à
   primeira linha enquanto o texto cresce por baixo dela. */
.proof-line{display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:16px;row-gap:8px;align-items:start;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.proof-line h3{grid-column:1;grid-row:1;margin:0;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(17px,1.5vw,23px);line-height:1.15;letter-spacing:-.018em;color:var(--paper)}
.proof-line p{grid-column:1;margin:0}

/* a linha editorial das soluções — pode quebrar em duas, nunca é uma nuvem
   de distintivos. O `min-height` de duas linhas é o que mantém as fichas
   alinhadas entre cartões com números diferentes de soluções. */
.proof-solutions{font:400 clamp(12.5px,1.05vw,14px)/1.5 var(--ff-ui,Inter,system-ui,sans-serif);
  color:var(--paper-dim);min-height:3em;overflow-wrap:anywhere}

/* a tecnologia é a nota de rodapé da ficha: mono, menor, sem destaque */
.proof-tech{font:500 10px/1.5 var(--ff-mono,ui-monospace,monospace);
  letter-spacing:.06em;color:var(--paper-faint);overflow-wrap:anywhere}
.proof-tech b{font-weight:500;letter-spacing:.16em;color:var(--aqua);margin-right:8px}

/* a 2.ª prova de um caso só existe para o modal — nunca se vê no cartão */
.proof-extra{display:none}

.proof-arrow{grid-column:2;grid-row:1;font-size:15px;line-height:1.3;color:var(--paper-faint);
  transition:transform .22s ease,color .22s ease}
.proof:hover .proof-arrow{transform:translate(3px,3px);color:var(--aqua)}

/* ---- overlay: o fragmento em tamanho real ------------------------------ */
.proof-modal{position:fixed;inset:0;z-index:90;display:none;
  background:rgba(4,5,9,.9);backdrop-filter:blur(10px)}
.proof-modal[open]{display:grid;place-items:center;padding:clamp(16px,4vh,48px)}
.proof-modal-box{position:relative;width:min(1100px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--ink);border:1px solid var(--rule-strong);border-radius:6px;overflow:hidden}
.proof-modal-head{display:flex;align-items:baseline;gap:14px;padding:16px 20px;border-bottom:1px solid var(--rule)}
.proof-modal-head h3{margin:0;font-family:var(--ff-display);font-weight:700;font-size:18px;color:var(--paper)}
.proof-modal-head p{margin:0;flex:1;font:400 12px/1 var(--ff-ui,Inter,system-ui,sans-serif);color:var(--paper-faint)}
.proof-modal-close{border:1px solid var(--rule-strong);background:transparent;color:var(--paper);
  border-radius:999px;width:32px;height:32px;cursor:pointer;line-height:1;font-size:15px}
.proof-modal-close:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}
.proof-modal-body{overflow:auto;background:var(--void);flex:1;min-height:0}
.proof-modal-body img{display:block;width:100%;height:auto}
/* separador entre as duas provas do mesmo caso (clínica, depois formações) */
.proof-modal-sep{border:0;border-top:1px solid var(--rule-strong);margin:0}
.proof-modal-body .proof-live{position:relative;inset:auto;min-height:min(70vh,620px)}
.proof-modal-foot{padding:12px 20px;border-top:1px solid var(--rule);
  font:500 10px/1.5 var(--ff-mono,ui-monospace,monospace);letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-faint)}

/* ---- mobile ------------------------------------------------------------ */
@media(max-width:820px){
  .proofs-grid{grid-template-columns:1fr;gap:clamp(30px,6vh,44px)}
  .proofs-head{text-align:left}
  .proofs-filters{justify-content:flex-start;margin-inline:0}
  .proof-stage{aspect-ratio:3/2}
  /* a uma coluna já não há alturas para alinhar; forçar duas linhas só
     abriria buracos por baixo das fichas curtas */
  .proof-solutions{min-height:0}
}

/* ---- sem movimento ----------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .proof-pan img{transform:translate(-50%,0);transition:none}
  .proof-stage:hover .proof-pan img{width:112%}
  .proof-arrow{transition:none}
}

/* ---- entrada de leitura da cena dos trabalhos -------------------------
   O título passou a ser uma frase ("Projetos feitos para serem usados.") e
   ganhou uma linha de apoio por baixo. Mesma largura de medida que o resto
   do corpo, centrada com o cabeçalho e alinhada à esquerda quando ele
   também passa a alinhar (abaixo dos 860px, ver o bloco mais abaixo). */
.proofs-lede{margin:clamp(12px,1.6vh,18px) auto 0;max-width:58ch;
  font:400 clamp(14px,1.15vw,16px)/1.65 var(--ff-ui,inherit);
  color:var(--paper-dim,inherit)}
@media(max-width:860px){ .proofs-lede{margin-inline:0} }

/* === case-reel.css — Secção 05 como reel editorial ======================
   Camada acrescentada a 2026-09-27. Só existe acima de 820px e só com
   movimento normal: a marcação é a mesma grelha de seis `<li class="proof">`
   e, sem a classe `.proofs--reel` que o `proofs.js` acrescenta, tudo aqui
   fica inerte e a lista/grelha de cima continua a ser o que se vê.

   O fundo continua o azul profundo que `cauda.css` entrega a esta secção —
   estas regras não tocam no `background` de `.proofs`. O acento é que muda
   por caso, e muda pouco: uma cor de linha e de etiqueta, nunca uma cor de
   fundo. ==================================================================*/

.proofs--reel{ --case-accent: var(--aqua); }
.proofs--reel[style*="--case: 1"]{ --case-accent: var(--flux, #4B5CFF); }
.proofs--reel[style*="--case: 2"]{ --case-accent: #7ad6c0; }
.proofs--reel[style*="--case: 3"]{ --case-accent: #8f9cff; }
.proofs--reel[style*="--case: 4"]{ --case-accent: #d8c98a; }
/* o sexto caso é a villa: aponta de volta à demonstração 3D, e o acento
   quente é o mesmo que a cauda usa para entregar `#demo` */
.proofs--reel[style*="--case: 5"]{ --case-accent: var(--calor-a, #c8794f); }

/* ---- o palco: índice + moldura, fixado durante os seis passos --------- */
.proofs--reel .proofs-stage{
  position: relative;
  display: grid;
  grid-template-columns: clamp(136px, 12vw, 186px) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 42px);
  align-items: center;
  align-content: center;
  /* a cena e fixada: o palco ocupa a janela inteira, senao sobra uma faixa
     escura por baixo e o indice fica cortado por cima pelo cabecalho */
  min-height: 100svh;
  padding-block: clamp(84px, 11vh, 128px) clamp(28px, 5vh, 62px);
}

/* entrada: a linha que fecha a secção 04 abre até formar a moldura do
   primeiro caso. `--enter` vem do progresso do reel, não de um temporizador. */
.proofs--reel .proofs-stage::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: 1px;
  width: calc(var(--enter, 0) * 100%);
  transform: translateX(-50%);
  /* `color-mix(..., transparent)` NAO serve aqui: `transparent` e
     `rgba(0,0,0,0)` e a mistura em srgb devolve quase preto — foi assim que
     a linha de saida ficou invisivel na primeira versao. Stops directos. */
  background: linear-gradient(90deg, transparent, var(--case-accent), transparent);
  opacity: calc(.25 + var(--enter, 0) * .75);
  pointer-events: none;
}
/* saída: a moldura do sexto caso contrai-se numa linha quente que conduz
   para `#demo` — sem fronteira horizontal dura */
.proofs--reel .proofs-stage::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  /* a moldura contrai-se ate ao seu proprio eixo e o que fica e esta linha,
     que cresce e conduz a vista para `#demo` */
  width: calc(6% + var(--exit, 0) * 56%);
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, rgba(200,121,79,0),
    rgba(214,140,94,.95) 28%, rgba(214,140,94,.95) 72%, rgba(200,121,79,0));
  box-shadow: 0 0 26px -2px rgba(200,121,79,.55);
  opacity: var(--exit, 0);
  pointer-events: none;
}

/* ---- índice 01—06 ------------------------------------------------------ */
.proofs--reel .proofs-index{
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: center;
}
.proofs--reel .proofs-index-item{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 10px;
  text-align: left;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--rule);
  background: transparent;
  color: var(--paper-faint);
  cursor: pointer;
  transition: color .22s ease, opacity .22s ease;
}
.proofs--reel .proofs-index-item:last-child{ border-bottom: 1px solid var(--rule); }
.proofs--reel .proofs-index-item b{
  font: 500 10px/1 var(--ff-mono, ui-monospace, monospace);
  letter-spacing: .14em;
  color: inherit;
}
.proofs--reel .proofs-index-item span{
  font: 400 12px/1.35 var(--ff-ui, Inter, system-ui, sans-serif);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* a barra de progresso do caso: a mesma presença `--a` que move a máscara */
.proofs--reel .proofs-index-item i{
  grid-column: 1 / -1;
  height: 1px;
  margin-top: 8px;
  background: var(--case-accent);
  transform: scaleX(var(--a, 0));
  transform-origin: left center;
  opacity: .8;
}
.proofs--reel .proofs-index-item[aria-current="true"]{ color: var(--paper); }
.proofs--reel .proofs-index-item:hover{ color: var(--paper-dim); }
.proofs--reel .proofs-index-item:focus-visible{ outline: 3px solid var(--case-accent); outline-offset: 3px; }

/* ---- a pilha: um caso de cada vez -------------------------------------- */
.proofs--reel .proofs-grid{
  display: block;
  position: relative;
  min-height: min(66svh, 620px);
}
.proofs--reel .proof{
  position: absolute;
  inset: 0;
  display: grid;
  /* a imagem fica entre 55% e 62% da largura da seccao, contada ja com o
     indice e as goteiras — medido a 1440px: 57% */
  grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
  gap: clamp(18px, 2.2vw, 38px);
  align-items: stretch;
  opacity: var(--a, 0);
  /* máscara vertical — o que entra abre de baixo, o que sai fecha para
     cima. Nenhum deslize lateral: o encargo pede o contrário de um
     carrossel. */
  clip-path: inset(var(--clip-t, 0%) 0 var(--clip-b, 0%) 0);
  pointer-events: none;
}
.proofs--reel .proof.is-case{ pointer-events: auto; }

.proofs--reel .proof-stage{
  aspect-ratio: auto;
  height: 100%;
  border-radius: 3px;
}
.proofs--reel .proof-stage::after{ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-accent) 34%, var(--rule)); }
/* a página alta do projeto viaja dentro da moldura durante o passo; o
   `--pan` aqui é a fracção local do passo (ver proofs.js) */
.proofs--reel .proof-pan img{ width: 104%; }
.proofs--reel .proof-stage:hover .proof-pan img{ width: 108%; }
.proofs--reel .proof-badge{ background: rgba(7,8,13,.72); color: var(--case-accent); }

/* ---- coluna direita: ficha editorial ---------------------------------- */
/* a ficha troca, não se funde: `--at` é 1 no caso dominante e 0 nos outros.
   Duas fichas a meia opacidade no mesmo sítio ficam sobrepostas e
   ilegíveis, e o encargo pede título, serviços e tecnologia sempre
   legíveis. O deslize acompanha o sentido da máscara. */
.proofs--reel .proof-line{
  /* some antes da contraccao: sem isto o titulo do 6.o caso fica cortado ao
     meio pela mascara de saida */
  opacity: calc(var(--at, 0) * (1 - var(--exit, 0)));
  transform: translateY(var(--dy, 0px));
  transition: opacity .18s linear;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 6px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--case-accent) 40%, var(--rule));
  align-self: center;
}
.proofs--reel .proof-line h3{ font-size: clamp(22px, 2.3vw, 34px); }
/* a altura mínima existia para alinhar fichas numa grelha de duas colunas;
   com um caso de cada vez só abriria um buraco por baixo das listas curtas */
.proofs--reel .proof-solutions{ min-height: 0; font-size: clamp(13px, 1.1vw, 15.5px); }
.proofs--reel .proof-tech b{ color: var(--case-accent); }
.proofs--reel .proof-arrow{ display: none; }
/* a acção fica explícita na coluna, além da etiqueta sobre a imagem */
.proofs--reel .proof-line::after{
  content: "";
  height: 1px;
  width: 64px;
  background: var(--case-accent);
  opacity: .7;
}

/* nada disto existe abaixo de 820px nem sem movimento: aí manda a lista
   vertical simples que já estava */
@media (max-width: 820px), (prefers-reduced-motion: reduce){
  .proofs--reel .proofs-stage{ display: block; min-height: 0; padding-block: 0 }
  .proofs--reel .proofs-stage::before,
  .proofs--reel .proofs-stage::after,
  .proofs--reel .proofs-index{ display: none }
  .proofs--reel .proofs-grid{ display: grid; position: static; min-height: 0 }
  .proofs--reel .proof{
    position: static; display: block; opacity: 1;
    clip-path: none; pointer-events: auto;
  }
  .proofs--reel .proof-stage{ aspect-ratio: 3/2; height: auto }
  .proofs--reel .proof-line{ display: grid; align-self: auto; padding-top: 14px }
  .proofs--reel .proof-arrow{ display: block }
  .proofs--reel .proof-line::after{ display: none }
}

/* ---- hierarquia e espaçamento da lista abaixo de 820px ----------------
   O encargo pede a lista simples melhor arrumada, não um reel encolhido. */
@media (max-width: 820px){
  /* o pan percorria a pagina toda e acabava no rodape do site do cliente —
     uma moldura preta no fim de cada cartao. 70% do curso chega para dar a
     leitura de "pagina a viajar" sem sair do corpo da pagina. */
  .proof-pan img{ transform: translate(-50%, calc(var(--pan,0) * -.7 * (100% - var(--stage,340px)))) }
  .proofs-grid{ gap: clamp(38px, 7vh, 56px) }
  .proof-line{ margin-top: 14px; padding-top: 12px }
  .proof-line h3{ font-size: clamp(18px, 4.6vw, 22px); letter-spacing: -.02em }
  .proof-solutions{ font-size: 13.5px; line-height: 1.55; color: var(--paper-dim) }
  .proof-tech{ margin-top: 2px }
  .proofs-head{ margin-bottom: clamp(26px, 4vh, 40px) }
}

/* o sexto caso é a cena 3D em paisagem (1440x900): sem isto sobram faixas
   escuras em cima e em baixo dentro da moldura, e o pan não tem altura
   sobrante para viajar */
.proofs--reel .proof:last-child .proof-pan img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, 0);
  left: 50%;
}
.proofs--reel .proof:last-child .proof-stage:hover .proof-pan img{ width: 100% }

/* saída: a moldura do sexto caso contrai-se para uma faixa e entrega a
   linha quente que conduz a `#demo` */
.proofs--reel .proofs-grid{
  clip-path: inset(calc(var(--exit, 0) * 46%) 0 calc(var(--exit, 0) * 46%) 0);
  opacity: calc(1 - var(--exit, 0) * .85);
}
@media (max-width: 820px), (prefers-reduced-motion: reduce){
  .proofs--reel .proofs-grid{ clip-path: none; opacity: 1 }
  .proofs--reel .proof-line{ opacity: 1; transform: none; transition: none }
}

/* === giz-pastel.css — Secção 05 como flyer de giz sobre escuro ==========
   2026-10-08, a pedido do cliente: "cinemático, como um flyer, misturando
   cores como giz pastel" — e explicitamente sobre ESCURO, sem fundos
   brancos. O fundo continua o `--void` da cauda; o que muda é que cada caso
   traz três giz pastel que se misturam atrás da moldura, com grão de pó
   (máscara SVG `feTurbulence`, zero raster). As cores transitam entre
   casos porque são `@property` registadas.
   As capturas dos clientes NUNCA levam tinta por cima: o giz fica à volta. */
@property --giz-a{ syntax: '<color>'; inherits: true; initial-value: #F7B89B; }
@property --giz-b{ syntax: '<color>'; inherits: true; initial-value: #F4A6C1; }
@property --giz-c{ syntax: '<color>'; inherits: true; initial-value: #F6E08F; }

#trabalho{
  --giz-pessego: #F7B89B; --giz-rosa: #F4A6C1; --giz-lilas: #C3AEF0;
  --giz-ceu: #9FC8F2; --giz-menta: #9EE3C8; --giz-manteiga: #F6E08F;
  --giz-grao: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.9 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  transition: --giz-a .9s ease, --giz-b .9s ease, --giz-c .9s ease;
}
/* a mistura de cada caso — a mesma tabela para o reel (pelo `--case` da
   secção) e para a lista simples (pelo cartão) */
#trabalho[style*="--case: 0"], #trabalho .proof:nth-child(1){ --giz-a: var(--giz-pessego); --giz-b: var(--giz-rosa);    --giz-c: var(--giz-manteiga); }
#trabalho[style*="--case: 1"], #trabalho .proof:nth-child(2){ --giz-a: var(--giz-ceu);     --giz-b: var(--giz-lilas);   --giz-c: var(--giz-menta); }
#trabalho[style*="--case: 2"], #trabalho .proof:nth-child(3){ --giz-a: var(--giz-manteiga);--giz-b: var(--giz-pessego); --giz-c: var(--giz-menta); }
#trabalho[style*="--case: 3"], #trabalho .proof:nth-child(4){ --giz-a: var(--giz-lilas);   --giz-b: var(--giz-rosa);    --giz-c: var(--giz-ceu); }
#trabalho[style*="--case: 4"], #trabalho .proof:nth-child(5){ --giz-a: var(--giz-menta);   --giz-b: var(--giz-ceu);     --giz-c: var(--giz-manteiga); }
#trabalho[style*="--case: 5"], #trabalho .proof:nth-child(6){ --giz-a: var(--giz-pessego); --giz-b: var(--giz-manteiga);--giz-c: var(--giz-lilas); }

/* ---- o pó de giz atrás do palco (reel) -------------------------------- */
.proofs--reel .proofs-stage{ isolation: isolate; }
.proofs-giz{ display: none; }
.proofs--reel .proofs-giz{
  display: block;
  position: absolute;
  inset: 4% -2% 2%;
  z-index: -1;
  pointer-events: none;
  /* três giz sobrepostos no centro da moldura: é na sobreposição que as
     cores se misturam, como pastel esfregado com o dedo */
  background:
    radial-gradient(34% 50% at 36% 42%, var(--giz-a), transparent 74%),
    radial-gradient(32% 48% at 56% 62%, var(--giz-b), transparent 74%),
    radial-gradient(26% 40% at 74% 30%, var(--giz-c), transparent 72%),
    radial-gradient(20% 30% at 18% 78%, var(--giz-b), transparent 70%),
    radial-gradient(18% 26% at 90% 82%, var(--giz-a), transparent 70%);
  opacity: .62;
  -webkit-mask: var(--giz-grao) 0 0 / 240px 240px;
          mask: var(--giz-grao) 0 0 / 240px 240px;
}
/* na saída o pó fica e acompanha a linha quente — sem ecrã preto vazio */
.proofs--reel .proofs-stage::after{
  background: linear-gradient(90deg, transparent, var(--giz-a) 26%, var(--giz-b) 50%, var(--giz-c) 74%, transparent);
  box-shadow: none;
}
.proofs--reel .proofs-stage::before{
  background: linear-gradient(90deg, transparent, var(--giz-a), var(--giz-b), transparent);
}

/* ---- a moldura é uma prova colada ao flyer ----------------------------- */
/* sombra de impressão deslocada num giz do caso; a margem existe para a
   sombra caber dentro do `clip-path` do cartão */
#trabalho .proof-stage{
  box-shadow: 12px 12px 0 color-mix(in srgb, var(--giz-b) 78%, #07080D);
  border-radius: 2px;
}
.proofs--reel .proof-stage{ height: calc(100% - 14px); margin-right: 14px; }
#trabalho .proof-stage::after{ box-shadow: inset 0 0 0 2px var(--giz-a); }

/* etiqueta = autocolante de giz */
#trabalho .proof-badge{
  background: var(--giz-c); color: #17131F; backdrop-filter: none;
  font-weight: 700; transform: rotate(-4deg); left: 14px; top: 14px;
}

/* ---- ficha: numeral de flyer em giz ------------------------------------ */
#trabalho .proof:nth-child(1) .proof-line h3::before{ content: "01"; }
#trabalho .proof:nth-child(2) .proof-line h3::before{ content: "02"; }
#trabalho .proof:nth-child(3) .proof-line h3::before{ content: "03"; }
#trabalho .proof:nth-child(4) .proof-line h3::before{ content: "04"; }
#trabalho .proof:nth-child(5) .proof-line h3::before{ content: "05"; }
#trabalho .proof:nth-child(6) .proof-line h3::before{ content: "06"; }
#trabalho .proof-line h3::before{
  display: block;
  margin-bottom: 12px;
  font: 800 clamp(84px, 9.5vw, 160px)/.8 var(--ff-display);
  letter-spacing: -.06em;
  color: transparent;
  background: linear-gradient(115deg, var(--giz-a), var(--giz-b) 55%, var(--giz-c));
  -webkit-background-clip: text; background-clip: text;
  -webkit-mask: var(--giz-grao) 0 0 / 240px 240px;
          mask: var(--giz-grao) 0 0 / 240px 240px;
}
#trabalho .proof-line{ border-top-color: color-mix(in srgb, var(--giz-a) 45%, #07080D); }
#trabalho .proof-tech b{ color: var(--giz-c); }
/* o traço de giz por baixo da ficha */
.proofs--reel .proof-line::after{
  width: 132px; height: 6px; border-radius: 3px; opacity: 1;
  background: linear-gradient(90deg, var(--giz-a), var(--giz-b), var(--giz-c));
  -webkit-mask: var(--giz-grao) 0 0 / 240px 240px;
          mask: var(--giz-grao) 0 0 / 240px 240px;
}
.proofs--reel .proofs-index-item i{ background: linear-gradient(90deg, var(--giz-a), var(--giz-b)); opacity: 1; }
.proofs--reel .proofs-index-item[aria-current="true"] b{ color: var(--giz-a); }

/* ---- lista simples (<820px e movimento reduzido): o mesmo flyer, parado */
@media (max-width: 820px), (prefers-reduced-motion: reduce){
  #trabalho .proof{ position: relative; isolation: isolate; }
  #trabalho .proof::before{
    content: ""; position: absolute; z-index: -1; inset: -6% -8% 30%;
    pointer-events: none; opacity: .52;
    background:
      radial-gradient(46% 50% at 28% 40%, var(--giz-a), transparent 72%),
      radial-gradient(40% 46% at 76% 64%, var(--giz-b), transparent 72%);
    -webkit-mask: var(--giz-grao) 0 0 / 240px 240px;
            mask: var(--giz-grao) 0 0 / 240px 240px;
  }
  #trabalho .proof-stage{ width: calc(100% - 10px); box-shadow: 10px 10px 0 color-mix(in srgb, var(--giz-b) 78%, #07080D); }
  #trabalho .proof-line h3::before{ font-size: clamp(64px, 18vw, 96px); }
}
@media (prefers-reduced-motion: reduce){
  #trabalho{ transition: none; }
}