/* Folha só da página /ensaio/ (cartilha de ensaio de alimentos e bebidas,
   02/10/2026). Fica fora do style.css pelo mesmo motivo das outras páginas de
   material: são classes que nenhuma outra página usa. As variáveis (--bg,
   --ink, --accent, --line…) vêm do style.css, carregado antes.

   Regra das animações: todas vivem dentro de um `.anim`. O app.js põe
   `.is-on` enquanto o bloco está na tela, e fora dela a animação fica
   pausada. Quem pediu menos movimento ao sistema vê o estado parado que
   melhor explica cada figura (bloco no fim do arquivo). */

/* ---------- fundo da página ---------- */
/* Mesmos valores da .pg-ferramenta (/whatsapp/), que o Iuri mandou reforçar
   em 25/08/2026. Repetição consciente: cada página de material carrega só a
   própria folha. */
.pg-ensaio{
  background:
    radial-gradient(1200px 700px at 50% -8%, rgba(75,157,214,.26), transparent 70%),
    linear-gradient(180deg, #12161f 0%, #0b0d14 42%, #050505 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  --alerta:#e0a84b; /* âmbar: prato esperando, trava, fora do ponto */
  --rec:#e2574c;
  --cartao:#0b0e15; /* cartão opaco: o palco gruda no topo e a lista passa por baixo */
}
.pg-ensaio .proj-hero,
.pg-ensaio .section,
.pg-ensaio .footer{background:transparent}
.pg-ensaio .noise{opacity:.045}
.pg-ensaio .footer{border-top:1px solid var(--line)}

/* ---------- estrutura ---------- */
.pg-ensaio .proj-hero{padding-bottom:48px}
.pg-ensaio .proj-hero h1{font-size:clamp(2.125rem,5vw,3.75rem);max-width:900px;text-wrap:balance}
.pg-ensaio .proj-lead{max-width:720px}
.ens-topo{display:flex;flex-direction:column;gap:22px}

.ens-indice{display:flex;flex-wrap:wrap;gap:8px}
.ens-indice a{
  border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;
  font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.ens-indice a:hover{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}

/* o respiro de 128px do site é de página de venda; cartilha se lê em sequência */
.pg-ensaio .ens-sec{padding-block:60px;scroll-margin-top:36px}
.pg-ensaio .ens-sec:last-of-type{padding-bottom:110px}
.pg-ensaio .container{gap:32px}
.pg-ensaio .eyebrow{flex-wrap:wrap;gap:8px 20px}

.ens-head{display:flex;flex-direction:column;gap:16px}
.ens-head h2{font-size:clamp(1.75rem,3.4vw,2.75rem);max-width:880px;text-wrap:balance}
.ens-head .lead{max-width:720px}
/* cada frase da regra de ouro quebra e se equilibra por conta própria */
.ens-ouro span{display:block;text-wrap:balance}
.pg-ensaio h3{font-size:1.1875rem;letter-spacing:-.01em;line-height:1.3}

/* ---------- cartões, listas e etiquetas ---------- */
.ens-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ens-duo--largo{grid-template-columns:1.5fr 1fr}
.ens-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ens-card{
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:16px;
  padding:26px;display:flex;flex-direction:column;gap:14px;
}
.ens-card__n{color:var(--muted)}
.ens-card p,
.ens-lista li,
.ens-passos li{color:var(--muted);line-height:1.6;font-size:1rem}
.ens-card--nota{border-style:dashed;border-color:var(--line-2)}

.ens-chips{display:flex;flex-wrap:wrap;gap:8px}
.ens-chips li{
  border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;
  font-size:.875rem;line-height:1.35;color:var(--ink);
}

.ens-lista{display:flex;flex-direction:column;gap:10px}
.ens-lista li{position:relative;padding-left:22px}
.ens-lista li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:1.5px;background:var(--muted)}

.ens-passos{list-style:none;margin:0;padding:0;counter-reset:p;display:flex;flex-direction:column;gap:14px}
.ens-passos li{counter-increment:p;position:relative;padding-left:40px;min-height:26px}
.ens-passos li::before{
  content:counter(p);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-2);display:grid;place-items:center;
  font-family:var(--mono);font-size:.75rem;font-weight:600;line-height:1;color:var(--ink);
}

.ens-nota{font-size:.875rem;line-height:1.55;color:var(--muted);max-width:640px}

/* ---------- moldura das figuras animadas ---------- */
.ens-fig{
  margin:0;background:rgba(8,10,16,.72);border:1px solid var(--line);border-radius:16px;
  padding:28px;display:flex;flex-direction:column;gap:22px;
}
.ens-fig figcaption{font-size:.875rem;line-height:1.5;color:var(--muted)}

/* fora da tela a animação espera; sem JS (html sem a classe) ela roda direto */
.js .anim:not(.is-on) *,
.js .anim:not(.is-on) *::before{animation-play-state:paused!important}

/* seletor de duas opções (palco e comparação da cozinha) */
.palco__abas,
.gantt__abas{
  display:inline-flex;align-self:flex-start;gap:2px;padding:3px;
  border:1px solid var(--line-2);border-radius:999px;
}
.palco__abas button,
.gantt__abas button{
  padding:8px 14px;border-radius:999px;
  font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.palco__abas button:hover,
.gantt__abas button:hover{color:var(--ink)}
.palco__abas button[aria-pressed="true"],
.gantt__abas button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
html:not(.js) .palco__abas,
html:not(.js) .gantt__abas{display:none}

/* =========================================================
   02 · A JANELA DO PRATO
   ========================================================= */
.janela{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:22px 40px}
.janela figcaption{grid-column:1/-1}
.janela__prato{width:100%;max-width:200px;height:auto;justify-self:center;overflow:visible}
.janela__prato path,
.janela__prato ellipse{fill:none;stroke:rgba(255,255,255,.82);stroke-width:1.6;stroke-linecap:round}
.janela__prato .janela__comida{fill:rgba(255,255,255,.12);animation:jan-comida 10s linear infinite}
.janela__prato .janela__louca{fill:var(--cartao)}
.janela__vapor{animation:jan-vapor 10s linear infinite}
.janela__vapor path{animation:jan-sobe 2.6s ease-in-out infinite alternate}
.janela__vapor path:nth-child(2){animation-delay:-.9s}
.janela__vapor path:nth-child(3){animation-delay:-1.7s}
.janela__brilho{animation:jan-brilho 10s linear infinite}

.janela__tempo{display:flex;flex-direction:column;gap:14px;min-width:0}
.janela__trilho,
.janela__rotulos{display:grid;grid-template-columns:30fr 35fr 35fr;gap:4px}
.janela__trilho{position:relative;height:12px}
.janela__zona{border-radius:3px}
.janela__zona--1{background:var(--accent);border-radius:999px 3px 3px 999px}
.janela__zona--2{background:rgba(75,157,214,.34)}
.janela__zona--3{background:rgba(255,255,255,.10);border-radius:3px 999px 999px 3px}
.janela__cursor{
  position:absolute;top:-7px;left:0;width:2px;height:26px;border-radius:2px;background:#fff;
  box-shadow:0 0 0 3px rgba(11,14,21,.9);
  animation:jan-cursor 10s linear infinite;
}
.janela__rot{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:.8125rem;line-height:1.3;color:var(--ink);opacity:.4}
.janela__rot b{font-weight:600}
.janela__rot small{font-size:.75rem;color:var(--muted)}
.janela__rot--1{animation:jan-r1 10s linear infinite}
.janela__rot--2{animation:jan-r2 10s linear infinite}
.janela__rot--3{animation:jan-r3 10s linear infinite}

@keyframes jan-cursor{0%{left:0}90%,100%{left:100%}}
@keyframes jan-vapor{0%,22%{opacity:1}52%{opacity:.3}75%,100%{opacity:0}}
@keyframes jan-sobe{from{transform:translateY(2px)}to{transform:translateY(-3px)}}
@keyframes jan-brilho{0%,22%{opacity:1}60%,100%{opacity:0}}
@keyframes jan-comida{0%,22%{fill:rgba(255,255,255,.14)}75%,100%{fill:rgba(255,255,255,.03)}}
@keyframes jan-r1{0%,26%{opacity:1}28%,100%{opacity:.4}}
@keyframes jan-r2{0%,26%{opacity:.4}28%,57%{opacity:1}59%,100%{opacity:.4}}
@keyframes jan-r3{0%,57%{opacity:.4}59%,100%{opacity:1}}

/* =========================================================
   03 · COZINHA E SET TERMINAM JUNTOS
   ========================================================= */
.sinc{gap:18px}
.sinc__linha{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:10px 16px}
.sinc__linha:first-child{grid-template-columns:76px 1fr 118px}
.sinc__quem{color:var(--muted)}
.sinc__barra{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.sinc__barra i{
  display:block;height:100%;border-radius:inherit;background:var(--accent);
  transform-origin:left;transform:scaleX(0);
  animation:sinc-barra 10s linear infinite;
}
.sinc__estado{position:relative;height:1.3em;font-size:.875rem;line-height:1.3}
.sinc__estado b{position:absolute;left:0;top:0;white-space:nowrap;font-weight:600}
.sinc__a{color:var(--muted);animation:sinc-a 10s linear infinite}
.sinc__b{color:var(--ink);opacity:0;animation:sinc-b 10s linear infinite}

.sinc__itens{display:flex;flex-wrap:wrap;gap:8px}
.sinc__itens li{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line-2);border-radius:999px;padding:6px 12px 6px 8px;
  font-size:.875rem;line-height:1.35;color:var(--muted);
}
/* o "visto" está sempre desenhado em tinta escura: só aparece quando o fundo
   da bolinha vira azul */
.sinc__itens li::before{
  content:"";flex:none;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--line-2);
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23050505' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.2 7 10.6 11.5 5.6'/%3E%3C/svg%3E") center/13px no-repeat;
}
.sinc__i0{animation:sinc-i0 10s linear infinite}
.sinc__i1{animation:sinc-i1 10s linear infinite}
.sinc__i2{animation:sinc-i2 10s linear infinite}
.sinc__i3{animation:sinc-i3 10s linear infinite}
.sinc__i0::before{animation:sinc-c0 10s linear infinite}
.sinc__i1::before{animation:sinc-c1 10s linear infinite}
.sinc__i2::before{animation:sinc-c2 10s linear infinite}
.sinc__i3::before{animation:sinc-c3 10s linear infinite}

.sinc__fim{
  padding-left:14px;border-left:2px solid var(--accent);
  font-weight:600;color:var(--ink);opacity:.25;
  animation:sinc-fim 10s linear infinite;
}

@keyframes sinc-barra{0%{transform:scaleX(0)}55%,96%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes sinc-a{0%,54%{opacity:1}56%,98%{opacity:0}100%{opacity:1}}
@keyframes sinc-b{0%,54%{opacity:0}56%,96%{opacity:1}100%{opacity:0}}
@keyframes sinc-fim{0%,55%{opacity:.25}59%,96%{opacity:1}100%{opacity:.25}}
@keyframes sinc-i0{0%,10%{color:var(--muted);border-color:var(--line-2)}12%,96%{color:var(--ink);border-color:var(--accent)}100%{color:var(--muted);border-color:var(--line-2)}}
@keyframes sinc-i1{0%,22%{color:var(--muted);border-color:var(--line-2)}24%,96%{color:var(--ink);border-color:var(--accent)}100%{color:var(--muted);border-color:var(--line-2)}}
@keyframes sinc-i2{0%,34%{color:var(--muted);border-color:var(--line-2)}36%,96%{color:var(--ink);border-color:var(--accent)}100%{color:var(--muted);border-color:var(--line-2)}}
@keyframes sinc-i3{0%,46%{color:var(--muted);border-color:var(--line-2)}48%,96%{color:var(--ink);border-color:var(--accent)}100%{color:var(--muted);border-color:var(--line-2)}}
@keyframes sinc-c0{0%,10%{background-color:transparent;border-color:var(--line-2)}12%,96%{background-color:var(--accent);border-color:var(--accent)}100%{background-color:transparent;border-color:var(--line-2)}}
@keyframes sinc-c1{0%,22%{background-color:transparent;border-color:var(--line-2)}24%,96%{background-color:var(--accent);border-color:var(--accent)}100%{background-color:transparent;border-color:var(--line-2)}}
@keyframes sinc-c2{0%,34%{background-color:transparent;border-color:var(--line-2)}36%,96%{background-color:var(--accent);border-color:var(--accent)}100%{background-color:transparent;border-color:var(--line-2)}}
@keyframes sinc-c3{0%,46%{background-color:transparent;border-color:var(--line-2)}48%,96%{background-color:var(--accent);border-color:var(--accent)}100%{background-color:transparent;border-color:var(--line-2)}}

/* =========================================================
   04 · A SEQUÊNCIA: PALCO QUE ACOMPANHA A ROLAGEM
   ========================================================= */
.seq{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:48px;align-items:start}

.palco{
  position:sticky;top:96px;z-index:5;
  background:var(--cartao);border:1px solid var(--line);border-radius:16px;
  padding:20px;display:flex;flex-direction:column;gap:14px;
}
.palco__topo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.palco__fase{color:var(--accent)}
.palco__svg{width:100%;height:auto;display:block}
.palco__legenda{font-family:var(--serif);font-weight:600;font-size:1.0625rem;line-height:1.3;min-height:2.6em}
.palco__medidor{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;color:var(--muted)}
.palco__medidor .mono{font-size:.625rem}
.palco__trilho{height:4px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.palco__trilho i{
  display:block;height:100%;background:var(--accent);
  transform-origin:left;transform:scaleX(calc(var(--p,1) / 7));
  transition:transform .6s var(--ease);
}

/* --- traço do desenho: branco é produto, azul é gente --- */
.palco__svg .massa{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.82);stroke-width:1.6;stroke-linejoin:round}
.palco__svg .fino{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.2;stroke-linecap:round}
.palco__svg .tr{fill:none;stroke:rgba(255,255,255,.82);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.palco__svg .cobertura{fill:rgba(255,255,255,.28)}
.palco__svg .carne{fill:rgba(255,255,255,.20);stroke:rgba(255,255,255,.82);stroke-width:1.6}
.palco__svg .queijo{fill:rgba(255,255,255,.46)}
.palco__svg .dedos rect{fill:var(--cartao);stroke:var(--accent);stroke-width:1.6}
.palco__svg .pessoa .massa{fill:rgba(75,157,214,.10);stroke:var(--accent)}
.palco__svg .brilhos path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.palco__svg .fios path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-linecap:round}
.palco__svg .migalhas circle{fill:rgba(255,255,255,.45)}

.seq[data-comida="pizza"] .g-burger,
.seq[data-comida="burger"] .g-pizza{display:none}

/* --- o que aparece e some a cada passo --- */
.palco__svg .dedos,
.palco__svg .fios,
.palco__svg .migalhas,
.palco__svg .pessoa,
.palco__svg .brilhos{opacity:0;transition:opacity .45s var(--ease)}
.palco__svg .mordida{opacity:0;transition:opacity .25s linear}

.fatia-a{transform-origin:177px 120px;transition:transform .9s var(--ease-2),opacity .5s var(--ease)}
.fatia-b,
.fatia-c{transition:opacity .5s var(--ease)}
.burger-corpo{transition:transform .9s var(--ease-2)}
/* sem ninguém em cena o produto fica no meio do quadro; quando a pessoa
   entra (passo 5), ele volta para a esquerda e abre espaço */
.cena{transform:translate(55px,0);transition:transform .9s var(--ease-2)}
.seq[data-step="5"] .cena,
.seq[data-step="6"] .cena,
.seq[data-step="7"] .cena{transform:none}

/* 4 · mãos */
.seq[data-step="4"] .fatia-a{transform:translate(32px,0)}
.seq[data-step="4"] .g-pizza .dedos{opacity:1}
.seq[data-step="4"] .fios{opacity:1;transition-delay:.55s}
.seq[data-step="4"] .burger-corpo{transform:translate(0,-12px)}
.seq[data-step="4"] .g-burger .dedos{opacity:1}

/* 5 · casting: a fatia vira a ponta para quem vai comer */
.seq[data-step="5"] .fatia-a{transform:translate(70px,-22px) rotate(180deg)}
.seq[data-step="5"] .burger-corpo{transform:translate(88px,-30px)}
.seq[data-step="5"] .pessoa,
.seq[data-step="6"] .pessoa,
.seq[data-step="7"] .pessoa{opacity:1}
.seq[data-step="5"] .dedos--esq,
.seq[data-step="6"] .dedos--esq,
.seq[data-step="7"] .dedos--esq{opacity:1}

/* 6 · mordida */
.seq[data-step="6"] .fatia-a{transform:translate(76px,-22px) rotate(180deg)}
.seq[data-step="6"] .burger-corpo{transform:translate(97px,-30px)}
.seq[data-step="6"] .mordida,
.seq[data-step="7"] .mordida{opacity:1;transition-delay:.7s}

/* 7 · prato consumido */
.seq[data-step="7"] .fatia-a{transform:translate(76px,-22px) rotate(180deg);opacity:0}
.seq[data-step="7"] .fatia-b,
.seq[data-step="7"] .fatia-c{opacity:0}
.seq[data-step="7"] .migalhas{opacity:1;transition-delay:.3s}
.seq[data-step="7"] .burger-corpo{transform:translate(72px,-4px)}
.seq[data-step="7"] .brilhos{opacity:1;transition-delay:.5s}
.seq[data-step="7"] .mordida{transition-delay:0s}

/* --- a câmera, nos três primeiros passos --- */
.palco__svg .ov{opacity:0;transition:opacity .4s var(--ease)}
.ov-quadro path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ov-flash{fill:#fff}
.ov-lupa{transform:translate(150px,100px)}
.ov-lupa circle{fill:rgba(255,255,255,.10);stroke:#fff;stroke-width:2}
.ov-lupa path{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round}
.ov-rec circle{fill:var(--rec)}
.ov-rec text{fill:#fff;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em}

.seq[data-step="1"] .ov-quadro,
.seq[data-step="3"] .ov-quadro,
.seq[data-step="2"] .ov-lupa,
.seq[data-step="3"] .ov-rec{opacity:1}
.seq[data-step="1"] .ov-flash{animation:palco-flash 3.2s ease-out infinite}
.seq[data-step="2"] .ov-lupa{animation:palco-lupa 6s ease-in-out infinite}
.seq[data-step="3"] .ov-quadro{animation:palco-pan 3.6s ease-in-out infinite alternate}
.seq[data-step="3"] .ov-rec circle{animation:palco-pisca 1.2s linear infinite}

@keyframes palco-flash{0%,8%{opacity:0}10%{opacity:.45}26%,100%{opacity:0}}
@keyframes palco-lupa{0%,100%{transform:translate(150px,100px)}33%{transform:translate(98px,142px)}66%{transform:translate(112px,84px)}}
@keyframes palco-pan{from{transform:translateX(-9px)}to{transform:translateX(9px)}}
@keyframes palco-pisca{0%,49%{opacity:1}50%,100%{opacity:.15}}

/* --- a lista de passos --- */
.seq__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.seq__passo{
  display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px;
  border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);
  transition:opacity .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.seq__num{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--muted);
  transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease);
}
.seq__txt{display:flex;flex-direction:column;gap:10px;min-width:0}
.seq__fase{color:var(--muted);font-size:.6875rem}
.seq__txt > p:not(.seq__fase){color:var(--muted);line-height:1.6}
/* só com JS os passos fora de foco apagam: sem ele não há quem os reacenda */
.js .seq__passo{opacity:.5}
.js .seq__passo.is-ativo{opacity:1;border-color:var(--line-2);background:rgba(255,255,255,.05)}
.js .seq__passo.is-ativo .seq__num{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.seq__trava{
  display:flex;gap:12px;align-items:flex-start;padding:16px 20px;
  border:1px dashed var(--alerta);border-radius:12px;color:var(--alerta);
  background:rgba(224,168,75,.06);
}
.seq__trava svg{flex:none;margin-top:2px}
.seq__trava p{color:var(--ink);font-size:.9375rem;line-height:1.55}
.seq__trava strong{color:var(--alerta);font-weight:600}

/* =========================================================
   05 · QUASE COMER
   ========================================================= */
.quase{gap:10px}
.quase__pontas{display:flex;justify-content:space-between;color:var(--muted)}
/* a linha e as fases têm a mesma margem: a bolinha tem 18px e não pode
   vazar da moldura nas pontas, e as fases se alinham à linha pelo percentual */
.quase__linha,
.quase__fases{position:relative;margin-inline:9px}
.quase__linha{height:40px}
.quase__linha::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background:rgba(255,255,255,.14);border-radius:2px;
}
.quase__linha::after{
  content:"";position:absolute;right:-9px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);background:var(--cartao);
}
.quase__marca{position:absolute;left:72%;top:50%;width:2px;height:24px;margin:-12px 0 0 -1px;background:var(--accent);border-radius:2px}
.quase__obj{
  position:absolute;z-index:1;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:#fff;
  animation:quase-obj 7s var(--ease-2) infinite;
}
.quase__anel{
  position:absolute;left:72%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  border:2px solid var(--accent);opacity:0;
  animation:quase-anel 7s linear infinite;
}
.quase__fases{height:2.9em;font-size:.875rem;line-height:1.35}
.quase__f{position:absolute;top:0;color:var(--ink);opacity:.35;font-weight:600;white-space:nowrap}
.quase__f--1{left:-9px;animation:quase-f1 7s linear infinite}
.quase__f--2{
  left:72%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;
  animation:quase-f2 7s linear infinite;
}
.quase__f--2 b{font-weight:600}
.quase__f--2 small{font-size:.75rem;font-weight:500}
.quase__f--3{right:-9px;animation:quase-f3 7s linear infinite}

@keyframes quase-obj{
  0%{left:0;opacity:1}
  38%,70%{left:72%;opacity:1}
  84%{left:100%;opacity:.4}
  95%{left:100%;opacity:0}
  100%{left:0;opacity:0}
}
@keyframes quase-anel{
  0%,40%{opacity:0;transform:scale(1)}
  42%{opacity:.95;transform:scale(1)}
  54%{opacity:0;transform:scale(2.8)}
  55%{opacity:0;transform:scale(1)}
  57%{opacity:.95;transform:scale(1)}
  69%,100%{opacity:0;transform:scale(2.8)}
}
@keyframes quase-f1{0%,36%{opacity:1}38%,100%{opacity:.35}}
@keyframes quase-f2{0%,36%{opacity:.35;color:var(--ink)}38%,70%{opacity:1;color:var(--accent)}72%,100%{opacity:.35;color:var(--ink)}}
@keyframes quase-f3{0%,72%{opacity:.35}76%,96%{opacity:1}100%{opacity:.35}}

/* =========================================================
   06 · UM PRATO POR VEZ: A COMPARAÇÃO
   ========================================================= */
.gantt__cena{display:flex;flex-direction:column;gap:18px}
.gantt__titulo{color:var(--muted)}
.js .gantt__titulo{display:none}
.js .gantt[data-cena="juntos"] .gantt__cena--um,
.js .gantt[data-cena="um"] .gantt__cena--juntos{display:none}

.gantt__grade{position:relative;display:flex;flex-direction:column;gap:12px}
.gantt__linha{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px}
.gantt__linha > span{color:var(--muted);white-space:nowrap}
.gantt__faixa{position:relative;height:26px;border-radius:6px;background:rgba(255,255,255,.04)}
.gantt .b{position:absolute;top:0;bottom:0;border-radius:5px}
.gantt .b--prep{background:rgba(255,255,255,.28)}
.gantt .b--cap{background:var(--accent)}
.gantt .b--mal{background:rgba(224,168,75,.22);box-shadow:inset 0 0 0 1.5px var(--alerta)}
.gantt .b--esp{background:repeating-linear-gradient(135deg,rgba(224,168,75,.55) 0 4px,rgba(224,168,75,.10) 4px 9px)}
/* a seta marca, na linha do prato que está no set, a hora de pedir o seguinte */
.gantt .b--pede{
  top:auto;bottom:-9px;width:0;height:0;margin-left:-6px;border-radius:0;
  border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid #fff;
}
.gantt__varre{position:absolute;left:76px;right:0;top:0;bottom:0;pointer-events:none}
.gantt__cursor{
  position:absolute;left:0;top:-5px;bottom:-5px;width:2px;margin-left:-1px;border-radius:2px;background:#fff;
  box-shadow:0 0 0 2px rgba(11,14,21,.7);
  animation:gantt-cursor 9s linear infinite;
}
@keyframes gantt-cursor{0%{left:0}86%,100%{left:100%}}

.gantt__leitura{color:var(--ink);font-weight:600;line-height:1.5;max-width:640px}
.gantt__legenda{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:18px;border-top:1px solid var(--line)}
.gantt__legenda li{display:flex;align-items:center;gap:8px;font-size:.8125rem;line-height:1.3;color:var(--muted)}
.gantt__legenda .b{position:static;flex:none;width:22px;height:12px;border-radius:3px}
.gantt__legenda .b--pede{width:0;height:0;margin:0 5px}

/* =========================================================
   07 · PRIORIDADE
   ========================================================= */
.prio{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.035);
}
.prio__nivel{
  display:grid;grid-template-columns:minmax(220px,1fr) 1.6fr;gap:10px 36px;align-items:center;
  padding:22px 26px;border-top:1px solid var(--line);
}
.prio__nivel:first-child{border-top:0}
.prio__cab{display:flex;flex-direction:column;gap:12px}
.prio__nivel > p{color:var(--muted);line-height:1.6}
.prio__barra{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.prio__barra i{display:block;height:100%;border-radius:inherit;background:var(--accent);transform-origin:left}
.prio__nivel--1 .prio__barra i{animation:prio-1 12s linear infinite}
.prio__nivel--2 .prio__barra i{animation:prio-2 12s linear infinite}
.prio__nivel--3 .prio__barra i{animation:prio-3 12s linear infinite}
.prio__nivel--4 .prio__barra i{animation:prio-4 12s linear infinite}

@keyframes prio-1{0%{transform:scaleX(1)}18%,96%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes prio-2{0%{transform:scaleX(1)}42%,96%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes prio-3{0%{transform:scaleX(1)}96%{transform:scaleX(.18)}100%{transform:scaleX(1)}}
@keyframes prio-4{0%{transform:scaleX(1)}96%{transform:scaleX(.86)}100%{transform:scaleX(1)}}

/* =========================================================
   08 · O CICLO DO BUFFET
   ========================================================= */
.ciclo{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:48px;align-items:center}
.ciclo__roda{position:relative}
.ciclo__roda svg{width:100%;height:auto;display:block}
.ciclo__aro{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round}
.ciclo__setas path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ciclo__no{cursor:pointer}
.ciclo__no circle{fill:var(--cartao);stroke:rgba(255,255,255,.4);stroke-width:1.5;transition:fill .4s var(--ease),stroke .4s var(--ease)}
.ciclo__no text{
  fill:var(--muted);font-family:var(--mono);font-size:15px;font-weight:600;text-anchor:middle;
  transition:fill .4s var(--ease);pointer-events:none;
}
.ciclo__no.is-ativo circle{fill:var(--accent);stroke:var(--accent)}
.ciclo__no.is-ativo text{fill:var(--accent-ink)}
.ciclo__centro{
  position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-50%);
  text-align:center;font-family:var(--serif);font-weight:600;font-size:1.0625rem;line-height:1.25;
  text-wrap:balance;
}

.ciclo__lista{list-style:none;margin:0;padding:0;counter-reset:c;display:flex;flex-direction:column;gap:6px}
.ciclo__lista li{counter-increment:c}
.ciclo__lista button{
  width:100%;text-align:left;display:grid;grid-template-columns:26px 1fr;gap:3px 10px;
  padding:13px 16px;border-radius:12px;border:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.ciclo__lista button::before{
  content:counter(c);grid-row:1 / span 2;
  font-family:var(--mono);font-size:.8125rem;font-weight:600;line-height:1.6;color:var(--muted);
  transition:color .4s var(--ease);
}
.ciclo__lista b{font-family:var(--serif);font-weight:600;font-size:1rem;line-height:1.35;color:var(--muted);transition:color .4s var(--ease)}
.ciclo__lista span{grid-column:2;color:var(--muted);font-size:.9375rem;line-height:1.55}
.ciclo__lista button:hover b{color:var(--ink)}
.ciclo__lista li.is-ativo button{background:rgba(255,255,255,.05);border-color:var(--line-2)}
.ciclo__lista li.is-ativo b{color:var(--ink)}
.ciclo__lista li.is-ativo button::before{color:var(--accent)}

/* =========================================================
   09 · RESUMO: AS DUAS CORRENTES
   ========================================================= */
.cola{
  display:flex;flex-direction:column;gap:26px;padding:26px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:16px;
}
.cola__bloco{display:flex;flex-direction:column;gap:14px}
.cola__bloco > p{color:var(--muted)}
.cola__fio{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 0;align-items:center}
.cola__fio li{
  display:flex;align-items:center;white-space:nowrap;
  font-family:var(--mono);font-size:.8125rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);
  animation:cola-pulso calc(var(--n) * .7s + 1.4s) linear infinite;
  animation-delay:calc(var(--i) * .7s);
}
.cola__fio li::after{content:"→";margin:0 10px;color:var(--muted);font-weight:500}
.cola__fio li:last-child::after{content:none}
@keyframes cola-pulso{0%{color:var(--ink)}3%,10%{color:var(--accent)}16%,100%{color:var(--ink)}}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:900px){
  .ens-duo--largo{grid-template-columns:1fr}
  .ens-trio{grid-template-columns:1fr}

  /* o palco continua grudado no topo, mas compacto: desenho de um lado,
     seletor e legenda do outro, para sobrar tela para a lista */
  .seq{grid-template-columns:1fr;gap:18px}
  .palco{
    top:90px;padding:12px 14px;
    display:grid;grid-template-columns:54% 1fr;gap:8px 14px;
    grid-template-areas:"svg topo" "svg leg" "med med";
    box-shadow:0 16px 32px rgba(0,0,0,.55);
  }
  .palco__svg{grid-area:svg;align-self:center}
  .palco__topo{grid-area:topo;flex-direction:column;align-items:flex-start;gap:8px}
  .palco__abas button{padding:6px 10px}
  .palco__fase{font-size:.625rem}
  /* três linhas reservadas: a legenda muda de tamanho a cada passo e o palco
     não pode mudar de altura enquanto a lista rola por baixo dele */
  .palco__legenda{grid-area:leg;align-self:start;font-size:.875rem;min-height:3.9em}
  .palco__medidor{grid-area:med}

  .ciclo{grid-template-columns:1fr;gap:24px}
  .ciclo__roda{width:min(100%,300px);margin-inline:auto}
}

@media (max-width:760px){
  .pg-ensaio .ens-sec{padding-block:44px}
  .pg-ensaio .ens-sec:last-of-type{padding-bottom:80px}
  .ens-duo{grid-template-columns:1fr}
  .ens-card{padding:22px}
  .ens-fig{padding:20px}

  .janela{grid-template-columns:1fr;gap:18px}
  .janela__prato{max-width:170px}

  .sinc__linha,
  .sinc__linha:first-child{grid-template-columns:64px 1fr}
  .sinc__estado{grid-column:2}

  .seq__passo{grid-template-columns:36px 1fr;gap:12px;padding:18px}
  .seq__num{width:36px;height:36px}

  .quase__fases{font-size:.8125rem}

  .gantt__linha{grid-template-columns:60px 1fr;gap:8px}
  .gantt__linha > span{font-size:.6875rem}
  .gantt__varre{left:68px}

  .prio__nivel{grid-template-columns:1fr;padding:20px}

  .cola{padding:20px}
  .cola__fio li{font-size:.75rem}
  .cola__fio li::after{margin:0 7px}
}

/* =========================================================
   MENOS MOVIMENTO
   Cada figura para no quadro que melhor a explica.
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .pg-ensaio .anim *,
  .pg-ensaio .anim *::before{animation:none!important;transition:none!important}

  .janela__cursor{left:15%}
  .janela__rot--1{opacity:1}

  .sinc__barra i{transform:none}
  .sinc__a{opacity:0}
  .sinc__b,
  .sinc__fim{opacity:1}
  .sinc__itens li{color:var(--ink);border-color:var(--accent)}
  .sinc__itens li::before{background-color:var(--accent);border-color:var(--accent)}

  .quase__obj{left:72%}
  .quase__f--2{opacity:1;color:var(--accent)}

  .gantt__cursor{display:none}

  .prio__nivel--1 .prio__barra i{transform:scaleX(.12)}
  .prio__nivel--2 .prio__barra i{transform:scaleX(.38)}
  .prio__nivel--3 .prio__barra i{transform:scaleX(.68)}
  .prio__nivel--4 .prio__barra i{transform:scaleX(.94)}
}