/* =====================================================================================
   Topo (#ep3-topo) e lore (#ep3-lore) — CONCEITO §2. Prefixo .ep3-topo- e .ep3-lore-.
   Cabeça do uniatrix · bancada (pôster impresso + canvas do motor em [data-ep3-palco]) · console da bancada
   (seletor "Os treze" + leitura do espécime) · botões · abertura narrativa.
   ===================================================================================== */

.ep3-topo {
  --ep3-tq-h: 520px;                  /* altura do tanque central (a do motor) */
  --ep3-topo-banc: 680px;             /* altura da bancada = a do pôster (poster.json → css.h) */
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: 36px 0 0;
}
.ep3-topo-luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 46% at 80% 6%, rgba(150, 30, 58, .30), transparent 66%),
    radial-gradient(56% 44% at 18% 4%, rgba(94, 214, 168, .13), transparent 68%),
    radial-gradient(40% 26% at 50% 50%, rgba(80, 210, 140, .10), transparent 70%),
    linear-gradient(180deg, #121a19 0%, #0b1110 22%, rgba(5, 9, 10, 0) 48%);
}
.ep3-topo-luz::before {               /* grade do rascunho, só no alto */
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(94, 214, 168, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 214, 168, .045) 1px, transparent 1px);
  background-size: 34px 34px; background-position: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 16%, transparent 36%);
          mask-image: linear-gradient(180deg, #000 0%, #000 16%, transparent 36%);
}
.ep3-topo-voltar {
  position: absolute; top: 20px; left: 24px; z-index: 8;
  display: inline-flex; align-items: center; padding: 10px 13px; border-radius: 2px;
  border: 1px solid var(--ep3-linha); background: rgba(5, 9, 10, .55);
  font: 700 .68rem/1 var(--ep3-f-texto); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: var(--ep3-corpo); transition: color .15s, border-color .15s;
}
.ep3-topo-voltar:hover { color: var(--ep3-tinta); border-color: var(--ep3-linha-forte); }
.ep3-topo-in { display: flex; flex-direction: column; align-items: center; }

/* ---------------------------------------------------------------- cabeça centrada (rascunho do uniatrix) */
.ep3-topo-cabeca { order: 1; display: flex; flex-direction: column; align-items: center; padding-inline: var(--ep3-calha); }
.ep3-topo-logo { height: 64px; width: auto; margin-bottom: 14px; filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .6)); }
.ep3-topo-tarja {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 2px;
  border: 1px solid rgba(94, 214, 168, .45); background: rgba(94, 214, 168, .07);
  box-shadow: 0 0 26px rgba(94, 214, 168, .14), inset 0 0 14px rgba(94, 214, 168, .07);
  font: 700 .7rem/1 var(--ep3-f-display); letter-spacing: .28em; text-transform: uppercase; color: #beebd8;
}
.ep3-topo-tarja::before, .ep3-topo-tarja::after {
  content: ''; width: 5px; height: 5px; background: var(--ep3-menta); transform: rotate(45deg); box-shadow: 0 0 10px var(--ep3-menta);
}
.ep3-topo-tarja span { padding-left: .28em; }
.ep3-topo-ep {
  display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-left: .4em;
  font: 700 clamp(.78rem, 1.1vw, .95rem)/1 var(--ep3-f-display); letter-spacing: .4em; text-transform: uppercase; color: #9db0ac;
}
.ep3-topo-ep::before, .ep3-topo-ep::after {      /* réguas finas dos dois lados, como marcação de lâmina */
  content: ''; width: 46px; height: 7px; opacity: .55;
  background:
    linear-gradient(rgba(94, 214, 168, .7), rgba(94, 214, 168, .7)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(94, 214, 168, .7) 0 1px, transparent 1px 7px) 0 0 / 100% 100% no-repeat;
}
.ep3-topo-ep::after { margin-left: -.4em; }
.ep3-topo-h1 {
  margin-top: 10px;
  font: 700 clamp(2.1rem, 6.2vw, 4.6rem)/1.04 var(--ep3-f-display); letter-spacing: .01em; text-transform: uppercase;
  text-wrap: balance;
  background: linear-gradient(180deg, #f6fffb 0%, #c4f5e0 58%, #32a07b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 34px rgba(94, 214, 168, .16));
}
/* lede (r2, item 2 do diretor): medida legível, cerca de 75 caracteres por linha, centrada e balanceada */
.ep3-topo-lede {
  order: 2; position: relative; z-index: 10; width: 100%; max-width: calc(46rem + 2 * var(--ep3-calha)); margin: 14px auto 0;
  padding-inline: var(--ep3-calha);
  font-size: clamp(1rem, 1.05vw, 1.0625rem); line-height: 1.7; color: var(--ep3-corpo); text-wrap: balance;
  text-shadow: 0 0 2px rgba(5, 9, 10, .9), 0 0 14px rgba(5, 9, 10, .85);    /* véu local onde a última linha passa sobre a parede */
}
.ep3-topo-lede strong { color: var(--ep3-tinta); font-weight: 700; }
/* r2, item 5: no desktop os botões ficam logo abaixo da lede, no primeiro quadro (vêm antes da cena no HTML) */
.ep3-topo-botoes { order: 2; position: relative; z-index: 10; margin-top: 20px; padding-inline: var(--ep3-calha); }

/* ---------------------------------------------------------------- a cena: bancada + console */
.ep3-topo-cena { order: 3; position: relative; width: 100%; margin-top: -26px; }   /* a parede sobe por trás da lede */
.ep3-topo-bancada { position: relative; height: calc(var(--ep3-tq-h) + 92px); max-width: 1920px; margin: 0 auto; }
.ep3-topo-bancada.is-poster { height: var(--ep3-topo-banc); }
.ep3-topo-bancada::before {          /* véu no alto: a parede some por baixo da lede e do aviso */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 9, 10, 0) 0, rgba(5, 9, 10, .85) 34px, rgba(5, 9, 10, .6) 66px, rgba(5, 9, 10, 0) 120px);
}

/* aviso do Desperto: faixa vermelha sobre a parede, acima dos tanques */
.ep3-topo-aviso {
  position: absolute; z-index: 9; top: 40px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 2 * var(--ep3-calha));
  margin: 0; padding: 8px 16px 8px 0; overflow: hidden; border-radius: 2px;
  border: 1px solid rgba(255, 92, 122, .42); background: rgba(46, 6, 12, .82);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .55), 0 0 28px rgba(255, 42, 42, .14);
  font: 600 .84rem/1.4 var(--ep3-f-texto); color: #ffb3bf; text-align: left;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.ep3-topo-aviso-faixa { flex: none; align-self: stretch; width: 34px; height: auto; --ep3-faixa-alt: auto; }
.ep3-topo-cena:not(.is-desperto) .ep3-topo-aviso { opacity: 0; visibility: hidden; }
.ep3-topo-cena.is-desperto .ep3-topo-aviso { transition: opacity .25s ease; }

.ep3-topo-parede {
  position: absolute; inset: 0 0 24% 0; pointer-events: none;
  background: url('../../assets/biolab-materiais/fundo-parede-tubos.webp') 50% 0 / 256px auto repeat;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 58% 80% at 50% 70%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 58% 80% at 50% 70%, #000 20%, transparent 78%);
}
.ep3-topo-chao {
  position: absolute; left: -20%; right: -20%; bottom: -6%; height: 42%; pointer-events: none;
  background:
    radial-gradient(ellipse 30% 42% at 50% 34%, rgba(94, 214, 168, .30), transparent 72%),
    url('../../assets/biolab-materiais/fundo-chapa-diamante.webp') 50% 0 / 160px auto repeat;
  transform: perspective(700px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 70%, transparent 100%), radial-gradient(ellipse 60% 100% at 50% 50%, #000 40%, transparent 85%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 70%, transparent 100%), radial-gradient(ellipse 60% 100% at 50% 50%, #000 40%, transparent 85%);
          mask-composite: intersect;
}
.ep3-topo-bancada.is-poster .ep3-topo-parede, .ep3-topo-bancada.is-poster .ep3-topo-chao { display: none; }

/* pôster do motor impresso (assets/tanque/poster*.webp + poster.json), espelhando o motorPoster() do tanque.js */
.ep3-topo-poster { position: absolute; inset: 0; overflow: hidden; transition: opacity .3s ease; }
.ep3-topo-bancada.is-poster .ep3-topo-poster {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 90%, transparent);
          mask-composite: intersect;
}
.ep3-topo-pq { position: absolute; top: 0; left: 50%; height: 100%; transform: translateX(-50%); }
.ep3-topo-pq > picture { display: contents; }
.ep3-topo-pq > img, .ep3-topo-pq > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ep3-topo-pv { position: absolute; overflow: hidden; }
.ep3-topo-pv > img { position: absolute; left: 50%; transform: translateX(-50%); max-width: none; }
.ep3-topo-pveu {
  position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(130% 80% at 50% 100%, rgba(255, 42, 42, .78), rgba(120, 16, 22, .62) 55%, rgba(36, 8, 10, .55));   /* o mesmo véu do tanque-poster.js */
}
.ep3-topo-cena.is-desperto .ep3-topo-pveu { opacity: 1; }
.ep3-topo-pbolhas { position: absolute; inset: 0; pointer-events: none; }
.ep3-topo-pbolhas i {
  position: absolute; bottom: 4%; left: calc(14% + var(--b) * 11%);
  width: var(--t, 4px); height: var(--t, 4px); border-radius: 50%;
  border: 1px solid rgba(226, 255, 233, .7); box-shadow: inset -1px 1px 0 rgba(255, 255, 255, .6); opacity: 0;
  animation: ep3-topo-pbolha calc(2.6s + var(--b) * .45s) linear calc(var(--b) * -.7s) infinite;
}
@keyframes ep3-topo-pbolha {
  0% { transform: translateY(0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .8; }
  100% { transform: translateY(-210px); opacity: 0; }
}
/* um quadro por faixa de largura, as mesmas em que o motor muda a bancada (3, 2 e 2 apertados de cada lado; 1 no celular) */
.ep3-topo-pq { display: none; }
@media (min-width: 1450px) { .ep3-topo-pq--desktop { display: block; } }
@media (min-width: 1250px) and (max-width: 1449.98px) { .ep3-topo-pq--medio { display: block; } }
@media (min-width: 760px) and (max-width: 1249.98px) { .ep3-topo-pq--estreito { display: block; } }
@media (max-width: 759.98px) { .ep3-topo-pq--mobile { display: block; } }
.ep3-topo-palco { position: absolute; inset: 0; z-index: 2; }
.ep3-topo-palco canvas { width: 100% !important; height: 100% !important; }
.ep3-topo-cena.is-motor .ep3-topo-poster { opacity: 0; }

/* ---------------------------------------------------------------- tanques em CSS (pôster provisório sem poster.webp) */
.ep3-topo-fila { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 20px; }
.ep3-topo-tq { --s: 1; --escuro: 0; --h: calc(var(--ep3-tq-h) * var(--s)); position: relative; flex: none; width: calc(var(--h) * .46); height: var(--h); }
.ep3-topo-tq--c { z-index: 4; }
.ep3-topo-tq--l1, .ep3-topo-tq--r1 { --s: .62; --escuro: .3; z-index: 3; transform: translateY(-14px); }
.ep3-topo-tq--l2, .ep3-topo-tq--r2 { --s: .54; --escuro: .45; z-index: 2; transform: translateY(-26px); }
.ep3-topo-tq--l3, .ep3-topo-tq--r3 { --s: .46; --escuro: .58; z-index: 1; transform: translateY(-36px); }
.ep3-topo-tq-cano { position: absolute; top: 0; left: 56%; width: 30%; height: 10%; border-top: calc(var(--h) * .024) solid #3e4746; border-right: calc(var(--h) * .024) solid #2f3736; border-radius: 0 calc(var(--h) * .03) 0 0; }
.ep3-topo-tq-tampa { position: absolute; top: 6%; left: -2%; right: -2%; height: 13%; background: linear-gradient(90deg, #161c1b, #4d5755 50%, #161c1b); clip-path: polygon(9% 0, 91% 0, 100% 24%, 100% 100%, 0 100%, 0 24%); }
.ep3-topo-tq-led { position: absolute; left: 50%; top: 8%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #8a1010; }
.ep3-topo-tq.is-desperto .ep3-topo-tq-led { background: var(--ep3-led); box-shadow: 0 0 10px var(--ep3-led); }
.ep3-topo-tq-vidro { position: absolute; top: 19%; left: 7%; right: 7%; height: 57%; overflow: hidden; background: #031410; }
.ep3-topo-tq-liquido { position: absolute; inset: 7% 0 0 0; background: linear-gradient(180deg, rgba(70, 230, 160, .38), rgba(10, 110, 70, .82)); }
.ep3-topo-tq.is-desperto .ep3-topo-tq-liquido { background: linear-gradient(180deg, rgba(70, 210, 150, .32), rgba(120, 30, 40, .82)); }
.ep3-topo-tq-plataforma { position: absolute; left: 16%; right: 16%; bottom: 0; height: 8%; background: #3c4544; }
.ep3-topo-tq-esp { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); }
.ep3-topo-tq-esp img { max-width: none; }
.ep3-topo-tq-bolhas, .ep3-topo-tq-reflexo { position: absolute; inset: 0; pointer-events: none; }
.ep3-topo-tq-bolhas i { position: absolute; bottom: 0; left: calc(14% + var(--b) * 11%); width: var(--t); height: var(--t); border-radius: 50%; border: 1px solid rgba(220, 255, 240, .55); }
.ep3-topo-tq-vidro::after { content: ''; position: absolute; inset: 0; background: rgba(5, 9, 10, var(--escuro)); pointer-events: none; }
.ep3-topo-tq-base { position: absolute; left: -8%; right: -8%; top: 76%; height: 24%; background: linear-gradient(90deg, #121716, #46504e 50%, #121716); }
.ep3-topo-tq-volante { display: none; }

/* ---------------------------------------------------------------- etiquetas ESP-NN sob os tanques laterais
   Posição = --tq-lado-N-x/-y (frente da base de cada lateral, projetada pelo motor; o topo.js espelha na cena). */
.ep3-topo-rotulos { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ep3-topo-rot {
  position: absolute; pointer-events: auto;
  left: clamp(40px, calc(var(--x, -999) * 1px), calc(100% - 40px)); top: calc(var(--y, -999) * 1px);
  transform: translate(-50%, -6px) rotate(var(--giro, -1.5deg));
  display: inline-flex; align-items: center; gap: 0; padding: 3px 7px 3px 9px; border-radius: 1px;
  background: url('../../assets/biolab-materiais/papel-etiqueta.webp') 0 0 / 128px auto repeat, var(--ep3-papel);
  box-shadow: inset 3px 0 0 var(--ep3-papel-vermelho, #86131f), 0 1px 1px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .55);
  font: 600 10px/1.2 var(--ep3-f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ep3-papel-tinta);
  cursor: var(--ep3-mao); white-space: nowrap; opacity: .92;
  transition: opacity .15s, transform .15s, box-shadow .15s;
}
.ep3-topo-rot[data-n="1"] { --x: var(--tq-lado-1-x); --y: var(--tq-lado-1-y); --giro: 1.5deg; }
.ep3-topo-rot[data-n="2"] { --x: var(--tq-lado-2-x); --y: var(--tq-lado-2-y); --giro: -1deg; }
.ep3-topo-rot[data-n="3"] { --x: var(--tq-lado-3-x); --y: var(--tq-lado-3-y); --giro: 2deg; }
.ep3-topo-rot[data-n="4"] { --x: var(--tq-lado-4-x); --y: var(--tq-lado-4-y); --giro: -2deg; }
.ep3-topo-rot[data-n="5"] { --x: var(--tq-lado-5-x); --y: var(--tq-lado-5-y); --giro: 1deg; }
.ep3-topo-rot[data-n="6"] { --x: var(--tq-lado-6-x); --y: var(--tq-lado-6-y); --giro: -1.5deg; }
.ep3-topo-rot-nome {              /* o nome fica sempre à vista, como a placa embaixo de cada boneco no rascunho */
  margin-left: 6px; padding-left: 6px; border-left: 1px solid rgba(21, 25, 26, .35); letter-spacing: .06em;
}
.ep3-topo-rot:hover, .ep3-topo-rot:focus-visible { opacity: 1; z-index: 2; transform: translate(-50%, -8px) rotate(0deg); }
.ep3-topo-rot:focus-visible { outline: 2px solid var(--ep3-menta); outline-offset: 2px; }
/* a etiqueta que cairia atrás do Dr. Varnhagen encosta à esquerda dele (o topo.js marca) */
.ep3-topo-rot.is-desvia { transform: translate(calc(-50% + var(--dx, 0px)), -6px) rotate(var(--giro, -1.5deg)); }
.ep3-topo-rot.is-desvia:hover, .ep3-topo-rot.is-desvia:focus-visible { transform: translate(calc(-50% + var(--dx, 0px)), -8px); }
.ep3-topo-rot.is-curto .ep3-topo-rot-nome { display: none; }

/* ---------------------------------------------------------------- Dr. Varnhagen */
.ep3-topo-varnhagen {
  position: absolute; z-index: 6; bottom: 34px; left: calc(50% - var(--ep3-tq-h) * .23 - 190px);
  display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: var(--ep3-mao);
}
.ep3-topo-varnhagen::before {     /* sombra no chão e halo verde */
  content: ''; position: absolute; left: 50%; bottom: -10px; width: 120px; height: 26px; margin-left: -60px; z-index: -1;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .7), rgba(94, 214, 168, .16) 55%, transparent 72%);
}
.ep3-topo-varnhagen-sprite img { max-width: none; }
.ep3-topo-cena.tem-ancora .ep3-topo-varnhagen {
  /* os pés no ponto do motor, mas nunca atrás do console, que sobe 40 px (28 no celular) sobre a bancada */
  left: calc(var(--tq-npc-x, 0) * 1px); top: min(calc(var(--tq-npc-y, 0) * 1px), calc(100% - var(--ep3-topo-sob, 40px) - 6px)); bottom: auto;
  transform: translate(-50%, -100%);
}
.ep3-topo-fala {                    /* abre para a direita, no vão entre o primeiro lateral e o tanque central */
  position: relative; display: grid; gap: 4px; width: 172px; padding: 9px 12px 8px; text-align: left;
  transform: translateX(64px);
  border-radius: 6px; border: 1px solid #c9c3ad; background: rgba(250, 248, 240, .97);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  font: 500 .78rem/1.42 var(--ep3-f-texto); color: #2d2b25;
}
.ep3-topo-fala::after {
  content: ''; position: absolute; left: 22px; bottom: -7px; width: 12px; height: 12px;
  background: rgba(250, 248, 240, .97); border-right: 1px solid #c9c3ad; border-bottom: 1px solid #c9c3ad; transform: rotate(45deg);
}
.ep3-topo-fala b { color: #1c6bb0; font-weight: 700; }
.ep3-topo-fala q { quotes: none; }
.ep3-topo-fala i { font-style: normal; font-size: .68rem; color: #6f6857; }
.ep3-topo-varnhagen:hover .ep3-topo-fala { border-color: var(--ep3-menta); }
.ep3-topo-varnhagen:focus-visible { outline: none; }
.ep3-topo-varnhagen:focus-visible .ep3-topo-fala { outline: 2px solid var(--ep3-menta); outline-offset: 2px; }

/* ---------------------------------------------------------------- console da bancada (chapa rebitada) */
.ep3-topo-console {
  z-index: 6; width: min(1180px, calc(100% - 2 * var(--ep3-calha))); margin: calc(-1 * var(--ep3-topo-sob, 40px)) auto 0;
  padding: 12px 18px 16px; text-align: left;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, .5), 0 24px 50px rgba(0, 0, 0, .55);
}
.ep3-topo-console-luz {               /* luz verde dos tanques batendo na aresta de cima */
  position: absolute; left: 6%; right: 6%; top: -17px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(110, 240, 180, .55) 30%, rgba(160, 255, 210, .85) 50%, rgba(110, 240, 180, .55) 70%, transparent);
  box-shadow: 0 0 18px rgba(94, 214, 168, .5);
}
.ep3-topo-cena.is-desperto .ep3-topo-console-luz {
  background: linear-gradient(90deg, transparent, rgba(110, 240, 180, .4) 26%, rgba(255, 90, 100, .85) 50%, rgba(110, 240, 180, .4) 74%, transparent);
  box-shadow: 0 0 18px rgba(255, 60, 70, .45);
}

/* seletor "Os treze" */
.ep3-topo-seletor-cab { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.ep3-topo-seletor-rot {
  font: 800 .62rem/1 var(--ep3-f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--ep3-menta); white-space: nowrap;
}
.ep3-topo-seletor-fio { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(94, 214, 168, .32), rgba(94, 214, 168, .04)); }
.ep3-topo-pausa {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 6px 10px; border-radius: 2px;
  border: 1px solid rgba(201, 208, 207, .16); background: rgba(5, 9, 10, .45);
  font: 700 .62rem/1 var(--ep3-f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ep3-rotulo);
  cursor: var(--ep3-mao); transition: color .15s, border-color .15s;
}
.ep3-topo-pausa[hidden] { display: none; }
.ep3-topo-pausa:hover { color: var(--ep3-tinta); border-color: var(--ep3-linha-forte); }
.ep3-topo-pausa-ico { position: relative; width: 8px; height: 9px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.ep3-topo-pausa.is-parado .ep3-topo-pausa-ico { border: 0; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ep3-topo-semjs { display: none; font: 700 .68rem/1 var(--ep3-f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ep3-menta); text-decoration: none; padding: 8px 2px; }
html:not(.ep3-js) .ep3-topo-semjs { display: inline-block; }
html:not(.ep3-js) .ep3-topo-teclas, html:not(.ep3-js) .ep3-topo-despertar, html:not(.ep3-js) .ep3-topo-seletor-rot { display: none; }
html:not(.ep3-js) .ep3-topo-fala i { display: none; }    /* sem JS o balão não troca de fala */
html:not(.ep3-js) .ep3-topo-varnhagen { cursor: inherit; }

.ep3-topo-teclas { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; margin-top: 8px; padding: 2px 1px 4px; }
.ep3-topo-tecla {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 6px; row-gap: 3px;
  min-width: 0; padding: 6px 6px 7px 8px; border-radius: 2px; text-align: left; cursor: var(--ep3-mao);
  border: 1px solid #070b0b;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .25)),
    url('../../assets/biolab-materiais/chapa-destaque-aco.webp') 0 0 / 160px auto,
    #1b2221;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -2px 0 rgba(0, 0, 0, .5), 0 2px 0 #050808, 0 4px 8px rgba(0, 0, 0, .45);
  color: var(--ep3-corpo);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.ep3-topo-tecla-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2c5446, #12251e 70%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .4);
  transition: background .15s, box-shadow .15s;
}
.ep3-topo-tecla-n { font: 600 .74rem/1 var(--ep3-f-mono); letter-spacing: .06em; color: var(--ep3-rotulo); }
/* o visor da tecla: a cabeça do pesadelo em 1:1, no líquido do tanque, atrás de um vidro com aro de aço */
.ep3-topo-tecla-visor {
  position: relative; width: 26px; height: 24px; margin-block: -2px; overflow: hidden; border-radius: 1px;
  background: radial-gradient(120% 90% at 50% 100%, #2f8f5b, #0d3a26 62%, #06170f);
  box-shadow: 0 0 0 1px #050808, 0 0 0 2px rgba(201, 208, 207, .16), inset 0 0 6px rgba(0, 0, 0, .7);
  opacity: .72; transition: opacity .15s, box-shadow .15s;
}
.ep3-topo-tecla-visor img { position: absolute; left: 50%; top: -5px; max-width: none; transform: translateX(-50%); }
.ep3-topo-tecla-visor::after {      /* reflexo do vidro */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .2) 0 18%, transparent 19% 70%, rgba(255, 255, 255, .06) 71%);
}
.ep3-topo-tecla:hover .ep3-topo-tecla-visor { opacity: .9; }
.ep3-topo-tecla[aria-pressed="true"] .ep3-topo-tecla-visor {
  opacity: 1; background: radial-gradient(120% 90% at 50% 100%, #49c47f, #135c3a 62%, #082a1a);
  box-shadow: 0 0 0 1px #050808, 0 0 0 2px rgba(94, 214, 168, .5), 0 0 10px rgba(94, 214, 168, .35), inset 0 0 6px rgba(0, 0, 0, .5);
}
.ep3-topo-cena.is-desperto .ep3-topo-tecla[aria-pressed="true"] .ep3-topo-tecla-visor {
  background: radial-gradient(120% 90% at 50% 100%, #d43a32, #5c1418 62%, #22080a);
  box-shadow: 0 0 0 1px #050808, 0 0 0 2px rgba(255, 92, 122, .55), 0 0 10px rgba(255, 42, 42, .35), inset 0 0 6px rgba(0, 0, 0, .5);
}
.ep3-topo-tecla-nome {
  grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 .7rem/1.1 var(--ep3-f-texto); letter-spacing: 0; color: var(--ep3-tinta);
}
.ep3-topo-tecla:hover { color: var(--ep3-tinta); border-color: rgba(94, 214, 168, .35); }
.ep3-topo-tecla:hover .ep3-topo-tecla-led { background: radial-gradient(circle at 40% 35%, #8ff0c8, #3aa57d 70%); box-shadow: 0 0 6px rgba(94, 214, 168, .6); }
.ep3-topo-tecla:focus-visible { outline: 2px solid var(--ep3-menta); outline-offset: 2px; }
.ep3-topo-tecla[aria-pressed="true"] {
  transform: translateY(2px); border-color: rgba(94, 214, 168, .55);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(94, 214, 168, .08)),
    url('../../assets/biolab-materiais/chapa-destaque-aco.webp') 0 0 / 160px auto,
    #141a19;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), inset 0 0 14px rgba(94, 214, 168, .12), 0 0 0 1px rgba(94, 214, 168, .12);
}
.ep3-topo-tecla[aria-pressed="true"] .ep3-topo-tecla-led {
  background: radial-gradient(circle at 40% 35%, #eafff6, #5ed6a8 45%, #1f8a63); box-shadow: 0 0 8px #5ed6a8, 0 0 16px rgba(94, 214, 168, .5);
}
.ep3-topo-tecla[aria-pressed="true"] .ep3-topo-tecla-n { color: var(--ep3-menta); }
.ep3-topo-cena.is-desperto .ep3-topo-tecla[aria-pressed="true"] { border-color: rgba(255, 92, 122, .6); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), inset 0 0 14px rgba(255, 42, 42, .14); }
.ep3-topo-cena.is-desperto .ep3-topo-tecla[aria-pressed="true"] .ep3-topo-tecla-led {
  background: radial-gradient(circle at 40% 35%, #fff0f0, #ff2a2a 45%, #a00); box-shadow: 0 0 8px #ff2a2a, 0 0 16px rgba(255, 42, 42, .55);
  animation: ep3-topo-led 1.6s ease-in-out infinite;     /* 1,25 Hz do LED do tanque */
}
.ep3-topo-cena.is-desperto .ep3-topo-tecla[aria-pressed="true"] .ep3-topo-tecla-n { color: #ff8a9e; }
@keyframes ep3-topo-led { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* leitura do espécime do tanque central */
.ep3-topo-placa {
  display: grid; grid-template-columns: 264px minmax(0, 1fr) 230px auto; align-items: center; gap: 14px;
  /* colunas fixas: o nome e a linha "Nasce a cada 30 abates de…" mais longos cabem numa linha e a etiqueta mais larga
     cabe inteira, então a chapa não muda de altura nem de grade quando o espécime troca */
  margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(201, 208, 207, .1);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .5);
}
.ep3-topo-placa-id { position: relative; min-width: 0; }
.ep3-topo-placa-tarja {
  display: flex; align-items: center; gap: 8px;
  font: 800 .62rem/1.3 var(--ep3-f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--ep3-menta);
}
.ep3-topo-placa-led { width: 6px; height: 6px; border-radius: 50%; background: var(--ep3-menta); box-shadow: 0 0 8px var(--ep3-menta); }
.ep3-topo-placa.is-desperto .ep3-topo-placa-tarja { color: #ff8a9e; }
.ep3-topo-placa.is-desperto .ep3-topo-placa-led { background: var(--ep3-led); box-shadow: 0 0 8px var(--ep3-led); }
.ep3-topo-placa-nome { margin-top: 6px; font: 700 1.5rem/1.1 var(--ep3-f-display); letter-spacing: .01em; color: var(--ep3-tinta); white-space: nowrap; }
.ep3-topo-placa.is-desperto .ep3-topo-placa-nome { color: var(--ep3-desperto); }
.ep3-topo-placa-carimbo {          /* carimbado no canto da etiqueta, como no lote do laboratório */
  position: absolute; z-index: 2; top: -13px; right: -16px; font-size: 13px; pointer-events: none;
  background: rgba(30, 6, 10, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.ep3-topo-placa:not(.is-desperto) .ep3-topo-placa-carimbo { display: none; }
.ep3-topo-placa-qtd { margin-top: 6px; font: 500 .8rem/1.4 var(--ep3-f-texto); color: var(--ep3-corpo); text-wrap: balance; }
.ep3-topo-placa-qtd b { font-family: var(--ep3-f-mono); font-weight: 600; color: var(--ep3-tinta); }
.ep3-topo-placa.is-desperto .ep3-topo-placa-qtd b { color: #ff8a9e; }

.ep3-topo-placa-dados { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 6px 0; min-width: 0; }
.ep3-topo-placa-dados > div { padding: 2px 10px; border-left: 1px solid rgba(201, 208, 207, .12); }
.ep3-topo-placa-dados dt { font: 700 .58rem/1.3 var(--ep3-f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--ep3-rotulo); }
.ep3-topo-placa-dados dd { margin: 5px 0 0; font: 500 .92rem/1.3 var(--ep3-f-mono); color: var(--ep3-tinta); white-space: nowrap; }
.ep3-topo-placa-dados .ep3-el { font-size: .8rem; }

.ep3-topo-placa-etiqueta { position: relative; justify-self: center; line-height: 0; }
.ep3-topo-placa-etq { font-size: 9px; }
.ep3-topo-placa-etq .ep3-etiqueta__codigo { white-space: nowrap; }   /* uma linha só: a etiqueta não muda de altura na troca */
.ep3-topo-scan {                      /* a linha do leitor passa uma vez sobre as barras */
  position: absolute; top: 4px; bottom: 4px; left: 8px; width: 2px; pointer-events: none; opacity: 0;
  background: #6ff0b4; box-shadow: 0 0 8px #5ed6a8, 0 0 18px rgba(94, 214, 168, .7);
}
.ep3-topo-placa-etiqueta.is-scan .ep3-topo-scan { animation: ep3-topo-scan .6s cubic-bezier(.4, 0, .2, 1) 1; }
@keyframes ep3-topo-scan { 0% { left: 8px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }

.ep3-topo-placa-acoes { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ep3-topo-ficha {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 9px 14px; border-radius: 2px;
  border: 1px solid rgba(94, 214, 168, .3); background: rgba(5, 9, 10, .4);
  font: 700 .68rem/1 var(--ep3-f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ep3-menta); text-decoration: none;
  transition: color .15s, border-color .15s, background-color .15s;
}
.ep3-topo-ficha::after { content: '↓'; letter-spacing: 0; }
.ep3-topo-ficha:hover { color: var(--ep3-tinta); border-color: var(--ep3-menta); background: rgba(94, 214, 168, .08); }
.ep3-topo-despertar {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 38px; padding: 9px 14px; border-radius: 2px;
  border: 1px solid rgba(255, 92, 122, .42); background: linear-gradient(180deg, #2a1519, #170b0e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 10px rgba(0, 0, 0, .5);
  font: 700 .68rem/1 var(--ep3-f-texto); letter-spacing: .16em; text-transform: uppercase; color: #ffb3c0; cursor: var(--ep3-mao);
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.ep3-topo-despertar-led { width: 9px; height: 9px; border-radius: 50%; background: #4a1218; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); transition: background-color .2s, box-shadow .2s; }
.ep3-topo-despertar[aria-pressed="true"] { border-color: #ff5c7a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 18px rgba(255, 42, 42, .28); }
.ep3-topo-despertar[aria-pressed="true"] .ep3-topo-despertar-led { background: var(--ep3-led); box-shadow: 0 0 10px var(--ep3-led); }
.ep3-topo-despertar:hover { border-color: #ff5c7a; color: #fff; }
.ep3-topo-despertar-txt { display: grid; justify-items: start; gap: 4px; }
.ep3-topo-despertar-dica { display: none; font: 600 .58rem/1 var(--ep3-f-texto); letter-spacing: .06em; text-transform: none; color: var(--ep3-desperto); }
.ep3-topo-despertar[aria-pressed="true"] { min-height: 42px; padding-block: 6px; }
.ep3-topo-despertar[aria-pressed="true"] .ep3-topo-despertar-dica { display: block; }
.ep3-topo-despertar:focus-visible, .ep3-topo-ficha:focus-visible, .ep3-topo-pausa:focus-visible { outline: 2px solid var(--ep3-menta); outline-offset: 2px; }

/* ---------------------------------------------------------------- lore */
.ep3-lore { position: relative; padding: 40px 0 8px; text-align: center; }
.ep3-lore-in { max-width: 900px; }
.ep3-lore-p { max-width: 64ch; margin: 0 auto 16px; font-size: 1.04rem; line-height: 1.8; color: var(--ep3-corpo); text-wrap: pretty; }
.ep3-lore-p strong { font-weight: 700; }
.ep3-lore-menta { color: var(--ep3-menta); }
.ep3-lore-claro { color: var(--ep3-tinta); }
.ep3-lore-ouro { color: #f6d98b; }
.ep3-lore-frase { position: relative; max-width: 980px; margin: 28px auto 0; padding: 0 0 20px; border-bottom: 1px solid var(--ep3-linha); }
.ep3-lore-marca { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; color: rgba(255, 110, 130, .78); }
.ep3-lore-marca i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ep3-linha-forte)); }
.ep3-lore-marca i:last-child { background: linear-gradient(90deg, var(--ep3-linha-forte), transparent); }
.ep3-lore-marca .ep3-biorrisco { --ep3-icone-tam: 22px; filter: drop-shadow(0 0 8px rgba(255, 42, 42, .45)); }
.ep3-lore-frase p { font: 700 clamp(1.12rem, 2.2vw, 1.66rem)/1.3 var(--ep3-f-display); letter-spacing: .01em; color: var(--ep3-tinta); text-wrap: balance; }
.ep3-lore-frase strong { color: #ff8a9e; text-shadow: 0 0 22px rgba(255, 42, 42, .38); }

/* ---------------------------------------------------------------- responsivo */
@media (max-width: 1279px) {
  .ep3-topo-placa { grid-template-columns: 1fr auto; grid-template-areas: "id etq" "dados acoes"; row-gap: 14px; }
  .ep3-topo-placa-id { grid-area: id; }
  .ep3-topo-placa-etiqueta { grid-area: etq; justify-self: end; }
  .ep3-topo-placa-dados { grid-area: dados; justify-content: start; }
  .ep3-topo-placa-acoes { grid-area: acoes; flex-direction: row; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ep3-topo-console { padding-inline: 12px; }
  .ep3-topo-teclas { gap: 5px; }
  .ep3-topo-tecla { padding-inline: 5px 3px; column-gap: 5px; }
  .ep3-topo-tecla-nome { font-size: .64rem; letter-spacing: -.01em; }
}
@media (max-width: 1023px) {
  .ep3-topo-placa-dados > div { padding-inline: 9px; }
  .ep3-topo-lede { order: 4; margin-top: 28px; }
  .ep3-topo-botoes { order: 5; margin-top: 22px; }
  .ep3-topo-teclas {
    display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -18px; padding: 2px 18px 6px; scroll-padding-inline: 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent);
  }
  .ep3-topo-teclas::-webkit-scrollbar { display: none; }
  .ep3-topo-tecla { flex: 0 0 82px; scroll-snap-align: start; }
}
@media (max-width: 759px) {
  .ep3-topo { --ep3-tq-h: 450px; --ep3-topo-banc: 540px; --ep3-topo-sob: 28px; padding-top: 60px; }
  .ep3-topo-cena { margin-top: 0; }
  .ep3-topo-bancada::before { height: 64px; }
  .ep3-topo-rotulos { display: none; }
  .ep3-topo-voltar { top: 14px; left: 16px; }
  .ep3-topo-logo { height: 48px; margin-bottom: 16px; }
  .ep3-topo-ep { margin-top: 14px; gap: 10px; }
  .ep3-topo-ep::before, .ep3-topo-ep::after { width: 24px; }
  .ep3-topo-aviso { top: 8px; font-size: .76rem; line-height: 1.35; padding-block: 6px; gap: 10px; }
  .ep3-topo-aviso-faixa { width: 22px; }
  .ep3-topo-varnhagen { left: 8px; bottom: 18px; align-items: flex-start; }
  .ep3-topo-varnhagen-sprite img { width: 38px; height: 99px; }
  .ep3-topo-varnhagen-sprite { margin-left: 12px; }
  .ep3-topo-fala { width: 146px; font-size: .72rem; line-height: 1.38; padding: 7px 9px; transform: none; }   /* estreito: não cobre o espécime do central */
  .ep3-topo-fala::after { left: 30px; }
  /* o balão abre para a direita: os pés (12 px de margem + meio sprite) no ponto do motor, sem passar da borda */
  .ep3-topo-cena.tem-ancora .ep3-topo-varnhagen { left: max(6px, calc(var(--tq-npc-x, 0) * 1px - 31px)); transform: translate(0, -100%); }
  .ep3-topo-rot { left: clamp(34px, calc(var(--x, -999) * 1px), calc(100% - 34px)); }
  .ep3-topo-console { width: 100%; padding: 6px 12px 10px; border-width: 12px; border-image-width: 12px; }
  /* "Pausar troca" vira um controle sobre a bancada, no canto de baixo; o rótulo "Os treze" fica só para leitor de tela */
  html.ep3-js .ep3-topo-seletor-cab { display: contents; }
  html.ep3-js .ep3-topo-seletor-rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.ep3-js .ep3-topo-seletor-fio { display: none; }
  .ep3-topo-pausa { position: absolute; z-index: 3; right: 0; top: -64px; background: rgba(5, 9, 10, .78); }
  html.ep3-js .ep3-topo-teclas { margin-top: 2px; }
  .ep3-topo-teclas { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; }
  .ep3-topo-tecla { flex-basis: 76px; padding-block: 7px; }
  .ep3-topo-placa { grid-template-columns: 1fr auto; grid-template-areas: "id id" "dados dados" "etq acoes"; gap: 10px 12px; margin-top: 8px; padding-top: 10px; }
  .ep3-topo-placa-nome { font-size: 1.32rem; }
  .ep3-topo-placa-carimbo { font-size: 12px; right: -10px; }
  .ep3-topo-placa-qtd { font-size: .8rem; }
  .ep3-topo-placa-dados { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 0; }
  .ep3-topo-placa-dados dd { margin-top: 3px; }
  .ep3-topo-ficha, .ep3-topo-despertar { min-height: 36px; padding-block: 8px; }
  .ep3-topo-placa-dados > div { padding: 0 10px; }
  .ep3-topo-placa-dados > div:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .ep3-topo-placa-dados dd { font-size: .86rem; }
  .ep3-topo-placa-etiqueta { justify-self: start; }
  .ep3-topo-placa-etq .ep3-etiqueta__codigo { letter-spacing: .07em; }
  .ep3-topo-placa-acoes { flex-direction: column; }
  .ep3-topo-lede { font-size: .95rem; line-height: 1.62; margin-top: 20px; }
  .ep3-topo-botoes { margin-top: 18px; }
  .ep3-lore { padding-top: 24px; }
  .ep3-lore-p { font-size: .96rem; line-height: 1.66; margin-bottom: 12px; }
  .ep3-lore-frase { margin-top: 22px; padding-bottom: 16px; }
  .ep3-lore-marca { margin-bottom: 12px; }
  .ep3-lore-frase p { font-size: 1.04rem; }
  .ep3-lore-frase strong { display: block; font-size: 1.2em; }      /* a virada em linha própria, maior */
}

/* ---------------------------------------------------------------- abertura: a cabeça sobe em sequência e a bancada
   acende por baixo dela (uma vez, na carga; só transform e opacity) */
@media (prefers-reduced-motion: no-preference) {
  html.ep3-js:not(.ep3-estatico) .ep3-topo-cabeca > *,
  html.ep3-js:not(.ep3-estatico) .ep3-topo-lede,
  html.ep3-js:not(.ep3-estatico) .ep3-topo-voltar { animation: ep3-topo-entra .7s cubic-bezier(.16, 1, .3, 1) both; }
  html.ep3-js:not(.ep3-estatico) .ep3-topo-tarja { animation-delay: 70ms; }
  html.ep3-js:not(.ep3-estatico) .ep3-topo-ep { animation-delay: 130ms; }
  html.ep3-js:not(.ep3-estatico) .ep3-topo-h1 { animation-delay: 170ms; }
  html.ep3-js:not(.ep3-estatico) .ep3-topo-lede { animation-delay: 260ms; }
  html.ep3-js:not(.ep3-estatico) .ep3-topo-voltar { animation-delay: 420ms; }
  html.ep3-js:not(.ep3-estatico) .ep3-topo-bancada { animation: ep3-topo-acende 1.2s cubic-bezier(.3, 0, .2, 1) .12s both; }
  html.ep3-js:not(.ep3-estatico) .ep3-topo-console { animation: ep3-topo-entra .8s cubic-bezier(.16, 1, .3, 1) .38s both; }
}
@keyframes ep3-topo-entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes ep3-topo-acende { 0% { opacity: 0; } 18% { opacity: .55; } 26% { opacity: .2; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ep3-topo-pbolhas { display: none; }
  .ep3-topo-placa-etiqueta.is-scan .ep3-topo-scan { animation: none; }
  .ep3-topo-cena.is-desperto .ep3-topo-tecla[aria-pressed="true"] .ep3-topo-tecla-led { animation: none; }
}
html.ep3-estatico .ep3-topo-pbolhas i, html.ep3-estatico .ep3-topo-tecla-led { animation-play-state: paused; }
/* com a cena fora da tela (o topo.js marca .is-fora) e, com o motor no ar, as bolhas do pôster impresso (que fica
   invisível) param: animação infinita fora de vista mantém o compositor desenhando a página inteira */
.ep3-topo-cena.is-fora *, .ep3-topo-cena.is-fora *::before, .ep3-topo-cena.is-fora *::after,
.ep3-topo-cena.is-motor .ep3-topo-pbolhas i { animation-play-state: paused !important; }
/* as infinitas saem de vez (desempenho, 15/10): pausadas seguiam em camada própria. As de entrada (uma vez, com fill)
   ficam só pausadas: tirar a animação delas a faria tocar de novo na volta ao topo */
.ep3-topo-cena.is-fora .ep3-topo-pbolhas i, .ep3-topo-cena.is-motor .ep3-topo-pbolhas i,
.ep3-topo-cena.is-fora .ep3-topo-tecla-led { animation: none !important; }
/* celular, ajuste r1: o lore com a entrelinha do corpo dos atos */
@media (max-width: 759px) {
  .ep3-lore-p { font-size: .96rem; line-height: 1.6; margin-bottom: 12px; }
}

/* =====================================================================================
   Ajuste r1
   ===================================================================================== */
/* 1440x900: a base do tanque central cabe na primeira tela (<= 880 px). A cabeça fica mais justa, a lede em três
   linhas e a parede sobe mais por trás dela; o aviso do Desperto fica dentro da cena, logo abaixo da lede. */
@media (min-width: 1280px) {
  .ep3-topo { padding-top: 22px; }
  .ep3-topo-logo { height: 56px; margin-bottom: 10px; }
  .ep3-topo-tarja { padding-block: 8px; }
  .ep3-topo-ep { margin-top: 12px; }
  .ep3-topo-h1 { margin-top: 6px; }
  .ep3-topo-lede { margin-top: 10px; }
  /* r2, item 5: quanto a parede sobe por trás dos botões (--ep3-topo-sobe). 92 px numa tela alta; numa tela baixa
     sobe mais, até 185 px (o alto da tampa do central passa por trás dos botões e do aviso, sob o véu), para o começo do console
     "Os treze" caber no primeiro quadro. O tanque não encolhe: abaixo de 520 px o espécime cairia para 1x numa tela
     de densidade 1 (o vidro útil do central já está no limite do 2x).
     15/10: a lede virou uma frase só, em 2 linhas (pedido do dono). As 3 linhas que saíram (3 x 25 px) saem também do
     teto, 185 -> 110 px: a bancada fica na mesma altura da tela e a parede para logo abaixo do título, sem cobri-lo.
     Integração r3 (15/10): 110 -> 104 px. Com 110, em 1440x900 o alto da tampa do central ainda passava 4 px por trás
     do aviso; com 104 (e o aviso 2 px mais perto dos botões, abaixo) sobram 6 px entre os dois, e o "Os treze" segue no
     primeiro quadro */
  .ep3-topo { --ep3-topo-sobe: clamp(92px, calc(1085px - 100svh), 104px); }
  .ep3-topo-cena { margin-top: calc(-1 * var(--ep3-topo-sobe)); }
  .ep3-topo-aviso { top: calc(var(--ep3-topo-sobe) + 12px); }
  .ep3-topo-bancada::before {
    height: calc(var(--ep3-topo-sobe) + 98px);
    background: linear-gradient(180deg, rgba(5, 9, 10, 0) 0, rgba(5, 9, 10, .9) 40px, rgba(5, 9, 10, .82) calc(var(--ep3-topo-sobe) + 4px), rgba(5, 9, 10, .4) calc(var(--ep3-topo-sobe) + 48px), rgba(5, 9, 10, 0) calc(var(--ep3-topo-sobe) + 98px));
  }
}
/* r2, item 5: tela baixa (até 1000 px de altura, ex. 1440x900): a cabeça fica mais justa para os botões e o começo do
   console caberem no primeiro quadro junto da bancada inteira */
@media (min-width: 1280px) and (max-height: 1000px) {
  .ep3-topo { padding-top: 14px; }
  .ep3-topo-logo { height: 40px; margin-bottom: 6px; }
  .ep3-topo-tarja { padding-block: 5px; }
  .ep3-topo-ep { margin-top: 8px; }
  .ep3-topo-h1 { margin-top: 4px; font-size: clamp(2.1rem, min(6.2vw, 6.9svh), 4.6rem); }
  .ep3-topo-lede { margin-top: 8px; line-height: 1.56; }
  .ep3-topo-botoes { margin-top: 14px; }
  .ep3-topo-botoes .ep3-btn { min-height: 42px; padding-block: 12px; }
  .ep3-topo-aviso { top: calc(var(--ep3-topo-sobe) + 6px); padding-block: 5px; }   /* integração r3: era +8 e 6 px */
}
/* até 1249 (a bancada estreita, com o ESP-02 bem atrás dele) e no celular: o balão do Dr. Varnhagen abre à direita
   da cabeça, com a ponta para ela. Acima da cabeça ele cobria o vidro do tanque lateral (ESP-02) e o espécime. */
@media (max-width: 1249px) {
  .ep3-topo-fala {
    position: absolute; left: calc(100% + 4px); top: -6px; width: 150px; max-width: 44vw; transform: none;
  }
  .ep3-topo-fala::after {
    left: -7px; top: 16px; bottom: auto;
    border-right: 0; border-bottom: 1px solid #c9c3ad; border-left: 1px solid #c9c3ad;
  }
}
@media (max-width: 759px) {
  .ep3-topo-fala { width: 148px; padding: 6px 9px; font-size: .7rem; line-height: 1.36; }
  .ep3-topo-fala::after { left: -7px; top: 14px; }
}
/* até 399: o balão do Dr. Varnhagen (148 px) cobria a ponta do "Pausar troca" (16 px a 360). O botão fica só com o
   ícone; o texto continua para leitor de tela */
@media (max-width: 399px) {
  .ep3-topo-pausa { min-width: 36px; justify-content: center; padding-inline: 11px; }
  .ep3-topo-pausa > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}