/* =====================================================================================
   Módulo a08_fecho da página do Episódio 3.0: ato 08 (#roleta), "Também no episódio" (#tambem) e o fecho (#fecho).
   Só seletores com o prefixo do módulo (.ep3-a08-, .ep3-tambem-, .ep3-fecho-) ou o id das próprias seções.
   Contrato: temas/biolab/CONTRATO.md · direção: temas/biolab/CONCEITO.md §3.
   ===================================================================================== */

/* ================================================================ ATO 08 · A Roleta Poring e o Mercado Negro */

/* ---------------------------------------------------------------- a vitrine de aço (Nó 1) */
.ep3-a08-vitrine {
  --azul: #62b9ff;
  padding: 0;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 90px -40px rgba(98, 185, 255, .5);
}
.ep3-a08-vitrine-topo {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px 13px;
  background: linear-gradient(180deg, rgba(98, 185, 255, .08), rgba(0, 0, 0, .25));
  border-bottom: 1px solid rgba(98, 185, 255, .22);
}
.ep3-a08-cat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0; }
.ep3-a08-cat b { font: 700 clamp(1.1rem, 1.9vw, 1.4rem)/1.2 var(--ep3-f-display); letter-spacing: .015em; color: var(--ep3-tinta); }
.ep3-a08-cat span { font: 700 .7rem/1.5 var(--ep3-f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--ac-txt); }
.ep3-a08-cat em {
  font-style: normal; color: var(--ep3-tinta); padding: 1px 7px; margin-left: 2px; border-radius: 2px;
  background: rgba(98, 185, 255, .14); box-shadow: inset 0 0 0 1px rgba(98, 185, 255, .4);
}
/* as quatro lâmpadas da vitrine, uma por baia (a da baia acesa brilha mais) */
.ep3-a08-vitrine-lamp { display: flex; gap: 8px; flex: none; }
.ep3-a08-vitrine-lamp i {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #e6f4ff 0 18%, var(--azul) 45%, #1b4a73 100%);
  box-shadow: 0 0 8px rgba(98, 185, 255, .9), 0 0 0 1px rgba(0, 0, 0, .6);
  opacity: .55; transition: opacity .15s, box-shadow .15s;
}
.ep3-a08-vitrine-lamp i.is-par { opacity: 1; box-shadow: 0 0 12px #9fd3ff, 0 0 22px rgba(98, 185, 255, .8), 0 0 0 1px rgba(0, 0, 0, .6); }

.ep3-a08-baias {
  list-style: none; margin: 0; padding: 16px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .12));
}
.ep3-a08-baia { min-width: 0; }
.ep3-a08-baia-btn { position: relative; display: block; width: 100%; cursor: var(--ep3-mao); text-align: left; border-radius: 2px; }
.ep3-a08-baia-btn:focus-visible { outline-offset: 4px; }

/* o compartimento: fundo azul-noite, spot de cima, prateleira de vidro, trilho de aço na frente */
.ep3-a08-baia-caixa {
  position: relative; display: block; aspect-ratio: 4 / 5.6; overflow: hidden; border-radius: 2px;
  background:
    radial-gradient(64% 46% at 50% 4%, rgba(98, 185, 255, .3), transparent 72%),
    radial-gradient(70% 18% at 50% 74%, rgba(98, 185, 255, .2), transparent 72%),
    linear-gradient(180deg, #0b1a29 0%, #060e16 60%, #0a1724 100%);
  box-shadow:
    inset 0 0 0 1px rgba(98, 185, 255, .26),
    inset 0 22px 34px rgba(0, 0, 0, .6),
    0 1px 0 rgba(255, 255, 255, .05);
}
/* a prateleira de vidro onde a peça faz sombra e a etiqueta fica colada */
.ep3-a08-baia-caixa::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 35.5%;
  background:
    linear-gradient(180deg, rgba(170, 215, 255, .2), rgba(98, 185, 255, .05) 6%, transparent 7%),
    linear-gradient(180deg, #0d1c2a, #08111a);
  border-top: 1px solid rgba(170, 215, 255, .26);
}
/* a lâmpada no teto do compartimento e o cone de luz */
.ep3-a08-baia-luz { position: absolute; inset: 0; pointer-events: none; }
.ep3-a08-baia-luz::before {
  content: ''; position: absolute; left: 30%; right: 30%; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, #d8eeff 20%, #ffffff 50%, #d8eeff 80%, transparent);
  box-shadow: 0 0 12px rgba(150, 210, 255, .9), 0 0 26px rgba(98, 185, 255, .55);
}
.ep3-a08-baia-luz::after {
  content: ''; position: absolute; left: 4%; right: 4%; top: 0; bottom: 36%;
  background: linear-gradient(180deg, rgba(120, 195, 255, .2), rgba(98, 185, 255, .04) 70%, transparent);
  clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
  opacity: .75; transition: opacity .2s;
}
/* a peça flutuando */
.ep3-a08-baia-boia {
  position: absolute; left: 9%; right: 9%; top: 5.5%; bottom: 36.5%; z-index: 1;
}
/* a arte ocupa a área inteira da boia e se encaixa nela (contain, ancorada embaixo: a peça "pousa" na prateleira) */
.ep3-a08-baia-arte {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 16px rgba(98, 185, 255, .22));
  transition: transform .3s var(--ep3-ease);
  -webkit-user-drag: none; user-select: none;
}
.ep3-a08-baia-arte--col { image-rendering: pixelated; filter: none; }
.ep3-a08-baia-sombra {
  position: absolute; left: 27%; right: 27%; bottom: 34%; height: 4%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .8), rgba(0, 0, 0, .25) 60%, transparent);
  opacity: .7;
}
/* o trilho de aço da frente, onde a placa de nome é aparafusada */
.ep3-a08-baia-trilho {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58px; z-index: 2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 3px, rgba(0, 0, 0, .25)),
    url('../../assets/biolab-materiais/chapa-destaque-aco.webp') 0 0 / 256px auto repeat, #10171a;
  border-top: 1px solid rgba(201, 208, 207, .28);
  box-shadow: 0 -10px 18px rgba(0, 0, 0, .45);
}
.ep3-a08-baia-trilho i { display: none; }
/* o vidro: dois reflexos diagonais e a aresta de cima */
.ep3-a08-baia-vidro {
  position: absolute; inset: 0 0 58px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 18%, rgba(255, 255, 255, .075) 24%, rgba(255, 255, 255, .02) 31%, transparent 33%),
    linear-gradient(112deg, transparent 58%, rgba(255, 255, 255, .045) 61%, transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 9%);
  box-shadow: inset 0 0 0 1px rgba(200, 230, 255, .1);
}
/* etiqueta de amostra colada no vidro, logo acima do trilho */
.ep3-a08-baia-etq {
  position: absolute; left: 9px; bottom: 63px; z-index: 4; font-size: 7px; padding: 3px 7px 4px 11px; gap: 2px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .45);
}
.ep3-a08-baia:nth-child(even) .ep3-a08-baia-etq { left: auto; right: 9px; }
.ep3-a08-baia-etq .ep3-etiqueta__codigo { letter-spacing: .1em; }
.ep3-a08-baia-etq.ep3-etiqueta--fita::after { width: 30px; height: 10px; top: -5px; }

/* a placa de nome, sobre o trilho */
.ep3-a08-baia-placa {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px;
  min-height: 42px; padding: 5px 10px 5px 8px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(30, 38, 40, .92), rgba(12, 18, 19, .94));
  border: 1px solid rgba(201, 208, 207, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 4px rgba(0, 0, 0, .5);
  transition: border-color .15s, box-shadow .15s;
}
.ep3-a08-baia-num {
  font: 400 1.35rem/1 var(--ep3-f-estencil); font-style: normal; color: var(--ac); min-width: 1.6em; text-align: center;
  -webkit-mask: url('../../assets/biolab-materiais/mascara-tinta.webp') 0 0 / 120px auto repeat;
          mask: url('../../assets/biolab-materiais/mascara-tinta.webp') 0 0 / 120px auto repeat;
  text-shadow: 0 0 12px rgba(98, 185, 255, .45);
}
.ep3-a08-baia-txt { display: grid; gap: 1px; min-width: 0; }
.ep3-a08-baia-txt b { font: 700 .86rem/1.2 var(--ep3-f-texto); color: var(--ep3-tinta); }
.ep3-a08-baia-txt span { font: 700 .55rem/1.3 var(--ep3-f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--ep3-rotulo); }
.ep3-a08-baia-ico { opacity: .9; }

/* acende: hover, foco, cartão aberto ou a mecânica do mesmo acessório em foco */
.ep3-a08-baia-btn:hover .ep3-a08-baia-luz::after,
.ep3-a08-baia-btn:focus-visible .ep3-a08-baia-luz::after,
.ep3-a08-baia-btn.is-aberto .ep3-a08-baia-luz::after,
.ep3-a08-baia-btn.is-par .ep3-a08-baia-luz::after { opacity: 1; }
.ep3-a08-baia-btn:hover .ep3-a08-baia-caixa,
.ep3-a08-baia-btn:focus-visible .ep3-a08-baia-caixa,
.ep3-a08-baia-btn.is-aberto .ep3-a08-baia-caixa,
.ep3-a08-baia-btn.is-par .ep3-a08-baia-caixa {
  box-shadow: inset 0 0 0 1px rgba(98, 185, 255, .6), inset 0 22px 34px rgba(0, 0, 0, .5), 0 0 26px rgba(98, 185, 255, .22);
}
.ep3-a08-baia-btn:hover .ep3-a08-baia-placa,
.ep3-a08-baia-btn:focus-visible .ep3-a08-baia-placa,
.ep3-a08-baia-btn.is-aberto .ep3-a08-baia-placa,
.ep3-a08-baia-btn.is-par .ep3-a08-baia-placa { border-color: rgba(98, 185, 255, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 14px rgba(98, 185, 255, .25); }
@media (hover: hover) and (pointer: fine) {
  .ep3-a08-baia-btn:hover .ep3-a08-baia-arte { transform: scale(1.04); }
}

/* flutua ±4 px em 6 s, fora de fase entre as baias; só com a vitrine na tela */
@keyframes ep3-a08-flutua { 0%, 100% { transform: translate3d(0, -4px, 0); } 50% { transform: translate3d(0, 4px, 0); } }
@keyframes ep3-a08-sombra { 0%, 100% { transform: scale(.84); opacity: .5; } 50% { transform: scale(1); opacity: .78; } }
html.ep3-js:not(.ep3-estatico) .ep3-a08-vitrine.is-ativo .ep3-a08-baia-boia {
  animation: ep3-a08-flutua 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.5s);
}
html.ep3-js:not(.ep3-estatico) .ep3-a08-vitrine.is-ativo .ep3-a08-baia-sombra {
  animation: ep3-a08-sombra 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.5s);
}

/* o Prêmio Garantido: a régua de baixo da vitrine */
.ep3-a08-garantido {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 20px 12px;
  border-top: 1px solid rgba(98, 185, 255, .22);
  background:
    repeating-linear-gradient(90deg, rgba(98, 185, 255, .08) 0 1px, transparent 1px 12px) 0 100% / 100% 5px no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(98, 185, 255, .07));
  color: var(--ep3-corpo); font-size: .94rem; line-height: 1.5;
}
.ep3-a08-garantido b { color: var(--ac-txt); font-weight: 700; }
.ep3-a08-garantido-ico { flex: none; }

/* ---------------------------------------------------------------- mecânicas (Nó 2) */
#roleta .ep3-a08-mecs li {
  grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 13px 14px 14px 16px; line-height: 1.6;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
#roleta .ep3-a08-mecs li > i { font-size: .78rem; }
.ep3-a08-mec-ico { align-self: start; margin-top: -2px; }
#roleta .ep3-a08-mecs li.is-par {
  border-color: rgba(98, 185, 255, .5); background: rgba(16, 32, 44, .92);
  box-shadow: inset 2px 0 0 var(--ac), 0 0 24px rgba(98, 185, 255, .12);
}
@media (min-width: 1024px) {
  #roleta .ep3-a08-mecs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
/* de xl para cima, cada mecânica fica embaixo da baia do mesmo acessório (mesmas 4 colunas da vitrine) */
@media (min-width: 1280px) {
  #roleta .ep3-a08-mecs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-inline: 17px; }
  #roleta .ep3-a08-mecs li { display: block; position: relative; padding: 14px 14px 15px; font-size: .9rem; line-height: 1.58; }
  #roleta .ep3-a08-mecs li > i {
    display: block; margin-bottom: 8px; font: 400 1.25rem/1 var(--ep3-f-estencil); letter-spacing: 0; color: var(--ac);
    -webkit-mask: url('../../assets/biolab-materiais/mascara-tinta.webp') 0 0 / 120px auto repeat;
            mask: url('../../assets/biolab-materiais/mascara-tinta.webp') 0 0 / 120px auto repeat;
  }
  #roleta .ep3-a08-mecs .ep3-a08-mec-ico { position: absolute; right: 10px; top: 10px; margin: 0; }
}

/* ---------------------------------------------------------------- Mercado Negro (Nó 3) */
.ep3-a08-mercado { display: grid; gap: 20px; }
.ep3-a08-mercado-txt { display: grid; gap: 16px; align-content: start; }
.ep3-a08-npc .ep3-npc-arte { min-width: 72px; }
@media (min-width: 1024px) {
  .ep3-a08-mercado { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
}

/* a banca: chapa enferrujada com a plaqueta da temporada pregada na borda */
.ep3-a08-banca { position: relative; margin-top: 30px; padding: 22px 16px 16px; }
#roleta .ep3-no-corpo > .ep3-a08-banca { margin-top: 30px; }
.ep3-a08-banca-rot {
  position: absolute; left: 22px; top: -11px; z-index: 2; margin: 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .2)),
    url('../../assets/biolab-materiais/chapa-destaque-ferrugem.webp') 0 0 / 256px auto repeat, #1d1712;
  border: 1px solid rgba(232, 204, 150, .32);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  font: 800 .62rem/1.3 var(--ep3-f-texto); letter-spacing: .28em; text-transform: uppercase; color: #e8cc96;
}
/* dois rebites segurando a plaqueta */
.ep3-a08-banca-rot::before, .ep3-a08-banca-rot::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #d8d0c0, #6d6152 60%, #2a231c);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.ep3-a08-banca-itens {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
}
.ep3-a08-banca-itens > li { min-width: 0; display: flex; }
#roleta .ep3-a08-prancha { width: 100%; padding: 12px 8px 11px; gap: 8px; background: linear-gradient(180deg, rgba(20, 27, 28, .92), rgba(10, 15, 15, .94)); }
#roleta .ep3-a08-prancha .ep3-prancha-nome { color: var(--ep3-tinta); }
#roleta .ep3-a08-prancha .ep3-prancha-papel { width: 88px; height: 112px; padding: 6px; }
@media (min-width: 760px) and (max-width: 1023px) {
  .ep3-a08-banca-itens { gap: 8px; }
  #roleta .ep3-a08-prancha { padding-inline: 4px; }
  #roleta .ep3-a08-prancha .ep3-prancha-papel { width: 80px; height: 104px; padding: 3px; }
  #roleta .ep3-a08-prancha .ep3-prancha-nome { font-size: .78rem; }
}

/* ---------------------------------------------------------------- 08 no tablet: as 4 baias continuam numa fileira */
@media (min-width: 760px) and (max-width: 1023px) {
  .ep3-a08-baias { gap: 10px; padding: 12px; }
  .ep3-a08-baia-placa { left: 6px; right: 6px; bottom: 6px; gap: 6px; padding: 5px 7px 5px 5px; }
  .ep3-a08-baia-num { font-size: 1.1rem; min-width: 1.3em; }
  .ep3-a08-baia-txt b { font-size: .8rem; }
  .ep3-a08-baia-ico { display: none; }
  .ep3-a08-baia-etq { left: 6px; font-size: 6.5px; }
  .ep3-a08-baia:nth-child(even) .ep3-a08-baia-etq { right: 6px; }
  #roleta .ep3-a08-mecs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
/* integração 15/10: onde o nome quebra em mais uma linha, a placa cresce 12 a 14 px e cobria a linha legível da
   etiqueta (o nome do item embaixo das barras): de 760 a 869 e de 1024 a 1089 a etiqueta sobe junto */
@media (min-width: 760px) and (max-width: 869px), (min-width: 1024px) and (max-width: 1089px) {
  .ep3-a08-baia-etq { bottom: 76px; }
}

/* ---------------------------------------------------------------- 08 no celular */
@media (max-width: 759px) {
  .ep3-a08-vitrine-topo { padding: 12px 14px 11px; }
  .ep3-a08-vitrine-lamp { display: none; }
  .ep3-a08-cat b { font-size: 1.12rem; }
  .ep3-a08-cat span { font-size: .6rem; letter-spacing: .1em; }
  /* as quatro baias numa fileira só, sem rolar: a peça, o número no trilho e o nome embaixo */
  .ep3-a08-baias { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 8px 12px; }
  .ep3-a08-baia-caixa { aspect-ratio: 1 / 1.32; }
  .ep3-a08-baia-caixa::before { height: 30%; }
  .ep3-a08-baia-luz::after { bottom: 26%; }
  .ep3-a08-baia-boia { left: 7%; right: 7%; top: 9%; bottom: 31%; }
  .ep3-a08-baia-sombra { bottom: 26%; }
  .ep3-a08-baia-trilho { height: 22px; }
  .ep3-a08-baia-vidro { bottom: 22px; }
  .ep3-a08-baia-etq { display: none; }
  .ep3-a08-baia-placa {
    position: static; display: block; min-height: 0; margin-top: 6px; padding: 0; border: 0; background: none; box-shadow: none;
    text-align: center;
  }
  .ep3-a08-baia-placa .ep3-a08-baia-num { display: none; }
  .ep3-a08-baia-trilho { display: grid; place-items: center; }
  .ep3-a08-baia-trilho i {
    display: block; font: 400 .95rem/1 var(--ep3-f-estencil); font-style: normal; color: var(--ac);
    text-shadow: 0 0 10px rgba(98, 185, 255, .45);
  }
  .ep3-a08-baia-btn:hover .ep3-a08-baia-placa, .ep3-a08-baia-btn:focus-visible .ep3-a08-baia-placa,
  .ep3-a08-baia-btn.is-aberto .ep3-a08-baia-placa, .ep3-a08-baia-btn.is-par .ep3-a08-baia-placa { box-shadow: none; }
  .ep3-a08-baia-txt b { font-size: .66rem; line-height: 1.25; }
  .ep3-a08-baia-txt span, .ep3-a08-baia-ico { display: none; }
  .ep3-a08-garantido { align-items: flex-start; padding: 10px 12px 12px; font-size: .86rem; gap: 10px; }
  #roleta .ep3-a08-mecs { gap: 6px; }
  #roleta .ep3-a08-mecs li { display: block; padding: 11px 12px 12px; font-size: .88rem; line-height: 1.55; }
  #roleta .ep3-a08-mecs li > i { display: inline-block; min-width: 1.9em; font-size: .72rem; }
  .ep3-a08-mec-ico { display: none; }
  #roleta .ep3-a08-npc { padding: 12px 12px 12px 8px; gap: 10px; }
  #roleta .ep3-a08-npc .ep3-npc-arte { min-width: 56px; }
  #roleta .ep3-a08-npc .ep3-npc-fala { font-size: .86rem; line-height: 1.55; margin-top: 4px; }
  #roleta .ep3-a08-mercado { gap: 14px; }
  #roleta .ep3-a08-mercado-txt { gap: 12px; }
  #roleta .ep3-a08-mercado-txt .ep3-p { font-size: .92rem; line-height: 1.6; }
  #roleta .ep3-a08-chips { gap: 5px; }
  #roleta .ep3-a08-chips .ep3-chip { font-size: .74rem; padding: 4px 8px; }
  .ep3-a08-banca { margin-top: 26px; padding: 20px 10px 12px; border-width: 1px; border-image: none; border-color: rgba(201, 208, 207, .14); }
  #roleta .ep3-no-corpo > .ep3-a08-banca { margin-top: 26px; }
  .ep3-a08-banca::after { inset: 0; border-width: 20px; border-image-width: 20px; opacity: .6; }
  .ep3-a08-banca-rot { left: 12px; }
  .ep3-a08-banca-itens {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; margin-inline: -10px; padding-inline: 10px; scroll-padding-inline: 10px;
  }
  .ep3-a08-banca-itens::-webkit-scrollbar { display: none; }
  .ep3-a08-banca-itens > li { flex: 0 0 31%; scroll-snap-align: start; }
  #roleta .ep3-a08-prancha { padding: 9px 4px 8px; gap: 6px; }
  #roleta .ep3-a08-prancha .ep3-prancha-papel { width: 76px; height: 98px; padding: 2px; }
  #roleta .ep3-a08-prancha .ep3-prancha-nome { font-size: .72rem; }
  #roleta .ep3-a08-prancha .ep3-prancha-nota { font-size: .62rem; }
  #roleta .ep3-a08-prancha .ep3-prancha-barras { display: none; }
}
/* integração r3: abaixo de 360 (320 de largura) "Colecionador" e "Estrategista" não cabiam na coluna da baia e
   cruzavam com o nome da vizinha ("Pulseira do|Pingente"): o nome hifeniza (pt-BR) e, sem hífen, quebra onde der */
@media (max-width: 359px) {
  .ep3-a08-baia-txt b { font-size: .62rem; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
}

/* ================================================================ TAMBÉM NO EPISÓDIO */
.ep3-tambem { --ac: var(--ep3-menta); --ac-txt: var(--ep3-menta); padding-block: var(--ep3-e7) var(--ep3-e7); }
.ep3-tambem-cab { text-align: center; margin-bottom: var(--ep3-e6); }
.ep3-tambem-filete {
  position: relative; display: block; height: 1px; max-width: 460px; margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, rgba(94, 214, 168, .45), transparent);
}
.ep3-tambem-filete i {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: var(--ep3-menta); transform: rotate(45deg); box-shadow: 0 0 14px var(--ep3-menta);
}
.ep3-tambem-filete::before, .ep3-tambem-filete::after {
  content: ''; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border: 1px solid rgba(94, 214, 168, .55); transform: rotate(45deg);
}
.ep3-tambem-filete::before { left: calc(50% - 30px); }
.ep3-tambem-filete::after { left: calc(50% + 25px); }

/* a grade: o fichário dos quatro primeiros (grade de 12 colunas de lg para cima) e as Heranças */
.ep3-tambem-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ep3-tambem-grade > * { min-width: 0; }
#tambem .ep3-tambem-fich .ep3-fichario-slide { display: flex; min-width: 0; }
#tambem .ep3-tambem-fich .ep3-fichario-slide > .ep3-tambem-card { flex: 1 1 auto; }
/* cada chip do fichário na cor do cartão dele */
#tambem .ep3-fichario-chip[data-ep3-ir="0"] { --ac: #d6aa4a; }
#tambem .ep3-fichario-chip[data-ep3-ir="1"] { --ac: #62b9ff; }
#tambem .ep3-fichario-chip[data-ep3-ir="2"] { --ac: var(--ep3-menta); }
#tambem .ep3-fichario-chip[data-ep3-ir="3"] { --ac: #ff8fb8; }
@media (min-width: 1024px) {
  /* 8 + 4 e 5 + 7: as alturas de cada fileira ficam parelhas (a tabela da Abismalita é o bloco mais alto) */
  #tambem .ep3-tambem-fich .ep3-fichario-trilho { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  #tambem .ep3-tambem-fich .ep3-fichario-slide:nth-child(1) { grid-column: span 8; }
  #tambem .ep3-tambem-fich .ep3-fichario-slide:nth-child(2) { grid-column: span 4; }
  #tambem .ep3-tambem-fich .ep3-fichario-slide:nth-child(3) { grid-column: span 5; }
  #tambem .ep3-tambem-fich .ep3-fichario-slide:nth-child(4) { grid-column: span 7; }
}
@media (max-width: 1023px) {
  /* a fileira acompanha a altura do cartão da vez (a08_fecho.js); sem JS, fica com a do mais alto */
  #tambem .ep3-tambem-fich .ep3-fichario-trilho { align-items: flex-start; overflow-y: hidden; }
  #tambem .ep3-tambem-fich .ep3-fichario-nav { margin-bottom: 14px; flex-wrap: nowrap; }
  /* chips e setas numa linha só: são só quatro cartões, o contador sobra */
  #tambem .ep3-tambem-fich .ep3-fichario-chips { flex: 1 1 0; min-width: 0; }
  #tambem .ep3-tambem-fich .ep3-fichario-conta { display: none; }
  #tambem .ep3-tambem-fich .ep3-fichario-setas { gap: 6px; }
  #tambem .ep3-tambem-fich { --ep3-fichario-slide: 66%; }
}
@media (max-width: 759px) {
  #tambem .ep3-tambem-fich { --ep3-fichario-slide: 89%; }
}

.ep3-tambem-card {
  --ac: var(--ep3-menta); --ac-txt: var(--ep3-menta);
  display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px 26px 26px;
  box-shadow: inset 0 2px 0 var(--ac), inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 26px rgba(0, 0, 0, .5);
}
.ep3-tambem-card--her { padding-inline: 20px; }
.ep3-tambem-card .ep3-k { margin: 0; color: var(--ac-txt); }
.ep3-tambem-h3 { font: 700 1.15rem/1.35 var(--ep3-f-texto); color: var(--ep3-tinta); text-wrap: balance; margin-top: -4px; }
.ep3-tambem-p { color: var(--ep3-corpo); line-height: 1.7; max-width: 64ch; }
.ep3-tambem-card > :last-child { margin-top: 4px; }

/* Abismalita: tabela Onde | Quanto */
.ep3-tambem-tab { font-size: .84rem; line-height: 1.4; }
.ep3-tambem-tab th, .ep3-tambem-tab td { padding: 5px 10px; }
.ep3-tambem-tab thead th:first-child, .ep3-tambem-tab tbody th { width: 46%; }
.ep3-tambem-tab tbody th { font-weight: 600; color: var(--ep3-tinta); }
.ep3-tambem-tab tbody tr:nth-child(odd) > * { background: rgba(214, 170, 74, .035); }
.ep3-tambem-qto { display: flex; align-items: flex-start; gap: 10px; }
.ep3-tambem-qto-ico { display: inline-flex; gap: 4px; flex: none; margin-top: -2px; }
.ep3-tambem-qto-ico .ep3-mini { border-color: rgba(214, 170, 74, .4); }

/* Conversores: notas em fichas separadas por fio */
.ep3-tambem-notas { gap: 0; }
.ep3-tambem-notas li { font-size: .92rem; padding: 11px 0 11px 20px; border-top: 1px solid var(--ep3-linha); max-width: none; }
.ep3-tambem-notas li::before { top: calc(11px + .62em); }

/* Memória: os quatro disquetes e o remover */
.ep3-tambem-disq { display: grid; gap: 16px; flex: 1; align-content: space-between; }
.ep3-tambem-disq-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ep3-tambem-disq-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; min-width: 0; }
.ep3-tambem-disq-arte {
  position: relative; width: 56px; height: 58px; flex: none; border-radius: 3px;
  clip-path: polygon(0 0, 84% 0, 100% 14%, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #2a3537, #161e20 70%, #10171a);
  box-shadow: inset 0 0 0 1px rgba(201, 208, 207, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* janela de metal da cabeça de leitura */
.ep3-tambem-disq-arte::before {
  content: ''; position: absolute; left: 24%; right: 24%; top: 0; height: 36%;
  background: linear-gradient(90deg, #8d9797, #c9d0cf 40%, #6e7878);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .4);
}
.ep3-tambem-disq-arte::after {
  content: ''; position: absolute; left: 54%; top: 6%; width: 12%; height: 22%; background: #1c2426; border-radius: 1px;
}
/* rótulo de papel com o número */
.ep3-tambem-disq-arte i {
  position: absolute; left: 13%; right: 13%; bottom: 8%; height: 40%; display: grid; place-items: center;
  background: url('../../assets/biolab-materiais/papel-etiqueta.webp') 0 0 / 96px auto repeat, var(--ep3-papel);
  font: 600 11px/1 var(--ep3-f-mono); font-style: normal; color: var(--ep3-papel-tinta); border-radius: 1px;
}
.ep3-tambem-disq-slot.is-novo .ep3-tambem-disq-arte {
  background: linear-gradient(180deg, #1f4537, #12271f 70%, #0d1d17);
  box-shadow: inset 0 0 0 1px rgba(94, 214, 168, .55), 0 0 16px rgba(94, 214, 168, .28);
}
.ep3-tambem-disq-slot.is-remover .ep3-tambem-disq-arte { opacity: .55; background: transparent; box-shadow: inset 0 0 0 1px rgba(201, 208, 207, .35); }
.ep3-tambem-disq-slot.is-remover .ep3-tambem-disq-arte::before,
.ep3-tambem-disq-slot.is-remover .ep3-tambem-disq-arte::after { display: none; }
.ep3-tambem-disq-slot.is-remover .ep3-tambem-disq-arte i { top: 30%; bottom: 30%; height: auto; background: none; color: var(--ep3-corpo); font-size: 18px; }
.ep3-tambem-disq-txt { display: grid; gap: 3px; }
.ep3-tambem-disq-txt b { font: 800 .58rem/1.3 var(--ep3-f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ep3-rotulo); }
.ep3-tambem-disq-txt span { font-size: .74rem; color: var(--ep3-corpo); line-height: 1.2; }
.ep3-tambem-disq-txt em {
  display: block; font: 400 1.55rem/1 var(--ep3-f-estencil); font-style: normal; color: var(--ep3-tinta); margin-bottom: 2px;
}
.ep3-tambem-disq-slot.is-novo em { color: var(--ep3-menta-clara); }
.ep3-tambem-disq-un { font-style: normal; }

/* Yuki: material -> visual */
.ep3-tambem-yuki { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px 18px; }
.ep3-tambem-mat { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ep3-tambem-mat li { display: flex; align-items: center; gap: 10px; }
.ep3-tambem-qtd { min-width: 2.2em; text-align: right; font: 600 .86rem/1 var(--ep3-f-mono); color: var(--ac-txt); }
.ep3-tambem-mat .ep3-mini { font-size: .86rem; }
.ep3-tambem-yuki-seta {
  width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--ac) 55%, transparent); border-radius: 50%; position: relative;
}
.ep3-tambem-yuki-seta::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -6.5px;
  border-top: 2px solid var(--ac); border-right: 2px solid var(--ac); transform: rotate(45deg);
}
.ep3-tambem-card--yuki .ep3-tambem-yuki-prancha { width: 150px; }

/* Heranças: cabeça (texto + pacotes) e o varal das treze etiquetas */
.ep3-tambem-her-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; }
.ep3-tambem-her-cab > div { display: flex; flex-direction: column; gap: 14px; }
.ep3-tambem-pacs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 230px; }
.ep3-tambem-pac {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 2px;
  background: rgba(5, 9, 10, .55); border: 1px solid rgba(255, 140, 160, .22);
  font: 700 .78rem/1.2 var(--ep3-f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--ep3-tinta);
}
.ep3-tambem-pac-led { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); }
.ep3-tambem-pac--adormecida .ep3-tambem-pac-led { background: radial-gradient(circle at 40% 35%, #a9b3b1, #4d5756); }
.ep3-tambem-pac--desperta .ep3-tambem-pac-led { background: radial-gradient(circle at 40% 35%, #ffd2dc, #ff8a9e 50%, #9c2b40); box-shadow: 0 0 8px rgba(255, 138, 158, .7), 0 0 0 1px rgba(0, 0, 0, .7); }
.ep3-tambem-pac--enfurecida .ep3-tambem-pac-led { background: radial-gradient(circle at 40% 35%, #fff0d0, #ff4a3a 45%, #8f0f16); box-shadow: 0 0 10px rgba(255, 60, 50, .9), 0 0 18px rgba(255, 60, 50, .45), 0 0 0 1px rgba(0, 0, 0, .7); }
.ep3-tambem-pac--enfurecida { border-color: rgba(255, 80, 70, .4); }

.ep3-tambem-rola { margin-inline: -14px; padding: 2px 14px 6px; }
.ep3-tambem-varal { position: relative; padding-top: 16px; width: max-content; min-width: 100%; }
/* o arame do varal */
.ep3-tambem-varal::before {
  content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 1px;
  background: linear-gradient(180deg, #b7c0bf, #4d5756);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .55);
}
.ep3-tambem-faixa { list-style: none; margin: 0; padding: 0 2px; display: flex; justify-content: center; gap: 5px; }
.ep3-tambem-faixa > li { flex: none; }
.ep3-tambem-her {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: calc(var(--cel) + 6px); padding: 6px 3px 7px; border-radius: 2px; cursor: var(--ep3-mao);
  background: url('../../assets/biolab-materiais/papel-etiqueta.webp') 0 0 / 128px auto repeat, var(--ep3-papel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 1px rgba(0, 0, 0, .5), 0 10px 18px rgba(0, 0, 0, .5);
  transform: rotate(-1.1deg); transform-origin: 50% -8px;
  transition: transform .25s var(--ep3-ease), box-shadow .2s;
}
.ep3-tambem-faixa > li:nth-child(3n + 2) .ep3-tambem-her { transform: rotate(.9deg); }
.ep3-tambem-faixa > li:nth-child(3n) .ep3-tambem-her { transform: rotate(-.3deg); }
/* o prendedor de aço */
.ep3-tambem-her::before {
  content: ''; position: absolute; left: 50%; top: -11px; width: 9px; height: 17px; margin-left: -4.5px; border-radius: 2px;
  background: linear-gradient(90deg, #6e7878, #d4dbda 45%, #7d8786);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6), inset 0 -3px 0 rgba(0, 0, 0, .25);
}
.ep3-tambem-her-arte {
  display: block; width: var(--cel); height: var(--alt); mix-blend-mode: multiply;
  background: url('../../assets/itens/herancas-colecao-13.png') calc(var(--k) * var(--cel) * -1) 0 / auto 100% no-repeat;
}
/* as imagens de fundo do Também e do fecho esperam a seção chegar perto (o a08_fecho.js põe .is-perto) */
html.ep3-js:not(.ep3-estatico) #tambem:not(.is-perto) .ep3-tambem-her-arte,
html.ep3-js:not(.ep3-estatico) #fecho:not(.is-perto) .ep3-fecho-poster { background-image: none; }
.ep3-tambem-her-nome { font: 600 9.5px/1.2 var(--ep3-f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ep3-papel-tinta); }
.ep3-tambem-her:hover, .ep3-tambem-her:focus-visible, .ep3-tambem-her.is-aberto {
  transform: rotate(0deg) translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 2px rgba(255, 138, 158, .55), 0 14px 22px rgba(0, 0, 0, .55);
}
/* de lg para cima as treze cabem numa fileira só, sem rolar */
@media (min-width: 1024px) {
  .ep3-tambem-faixa { gap: 3px; }
  .ep3-tambem-her { width: calc(var(--cel) + 4px); padding-inline: 2px; }
}

@media (max-width: 1023px) {
  .ep3-tambem-her-cab { grid-template-columns: 1fr; align-items: start; }
  .ep3-tambem-pacs { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
  .ep3-tambem-faixa { justify-content: flex-start; }
}
@media (max-width: 759px) {
  .ep3-tambem { padding-block: var(--ep3-e7) var(--ep3-e6); }
  .ep3-tambem-cab { margin-bottom: var(--ep3-e5); }
  .ep3-tambem-grade { gap: 14px; }
  .ep3-tambem-card { padding: 20px 16px 20px; gap: 12px; }
  .ep3-tambem-h3 { font-size: 1.06rem; }
  .ep3-tambem-p { font-size: .95rem; line-height: 1.65; }
  .ep3-tambem-tab { font-size: .8rem; line-height: 1.4; }
  .ep3-tambem-tab, .ep3-tambem-tab tbody, .ep3-tambem-tab tr { display: block; }
  .ep3-tambem-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ep3-tambem-tab tbody tr { padding: 7px 2px; border-bottom: 1px solid var(--ep3-linha); }
  .ep3-tambem-tab tbody tr:last-child { border-bottom: 0; }
  .ep3-tambem-tab tbody tr:nth-child(odd) > * { background: none; }
  .ep3-tambem-tab tbody th, .ep3-tambem-tab td { display: block; width: auto !important; padding: 0; border: 0; }
  .ep3-tambem-tab tbody th { margin-bottom: 3px; line-height: 1.35; }
  .ep3-tambem-qto { gap: 8px; align-items: center; }
  .ep3-tambem-qto-ico { margin-top: 0; gap: 2px; }
  .ep3-tambem-qto-ico .ep3-mini { padding: 0; border: 0; background: none; }
  .ep3-tambem-disq-lista { gap: 6px; }
  .ep3-tambem-disq-arte { width: 42px; height: 44px; }
  .ep3-tambem-disq-txt b { font-size: .5rem; letter-spacing: .1em; }
  .ep3-tambem-disq-txt em { font-size: 1.25rem; }
  .ep3-tambem-disq-txt span { font-size: .66rem; }
  /* a unidade já está na frase; no celular só o número fica à vista (o leitor de tela ainda ouve) */
  .ep3-tambem-disq-un { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* a lista inteira (uma linha por material) e, embaixo, a seta e o visual que ela vira */
  .ep3-tambem-yuki { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
  .ep3-tambem-mat { justify-self: stretch; }
  .ep3-tambem-yuki-seta { width: 28px; height: 28px; transform: rotate(90deg); }
  .ep3-tambem-card--yuki .ep3-tambem-yuki-prancha { width: 150px; padding: 10px 6px; }
  .ep3-tambem-mat .ep3-mini { font-size: .8rem; white-space: nowrap; }
  .ep3-tambem-pacs { gap: 6px; }
  .ep3-tambem-pac { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 9px 4px; font-size: .6rem; letter-spacing: .1em; }
  .ep3-tambem-notas li { font-size: .88rem; padding-block: 8px; }
  .ep3-tambem-notas li::before { top: calc(8px + .62em); }
  .ep3-tambem-rola { margin-inline: -16px; padding-inline: 16px; }
}

/* ================================================================ FECHO */
.ep3-fecho { position: relative; padding-block: var(--ep3-e6) var(--ep3-e8); overflow: hidden; }
.ep3-fecho::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(520px 420px at 32% 52%, rgba(46, 170, 120, .16), transparent 70%),
    radial-gradient(700px 300px at 70% 100%, rgba(150, 34, 52, .12), transparent 70%);
}
.ep3-fecho::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(94, 214, 168, .3), transparent);
}
.ep3-fecho-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 56px; align-items: center; }

/* o tanque central, recortado do pôster do motor (--k: px de tela por px do arquivo) */
.ep3-fecho-tanque { --k: 1; --se: 2; margin: 0; position: relative; display: grid; justify-items: center; }
.ep3-fecho-poster {
  position: relative;
  width: calc(var(--cw) * var(--k) * 1px); height: calc(var(--ch) * var(--k) * 1px);
  background: url('../../assets/tanque/poster.webp') no-repeat;
  background-size: calc(var(--pw) * var(--k) * 1px) auto;
  background-position: calc(var(--x0) * var(--k) * -1px) calc(var(--y0) * var(--k) * -1px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 100%);
          mask-composite: intersect;
}
.ep3-fecho-vidro {
  position: absolute; overflow: hidden; pointer-events: none;
  left: calc(var(--vx) * var(--k) * 1px); top: calc(var(--vy) * var(--k) * 1px);
  width: calc(var(--vw) * var(--k) * 1px); height: calc(var(--vh) * var(--k) * 1px);
}
/* cáustica: duas camadas de luz ondulada correndo devagar. Anda por transform, um ladrilho (120 x 140) em 14 s: a caixa
   sobra um ladrilho à esquerda e embaixo, então o desenho é o mesmo do background-position de antes, sem repintar a
   cada quadro (desempenho, 15/10: 38 ms/s de pintura com o fecho parado) */
.ep3-fecho-caus {
  position: absolute; top: -20%; right: -20%; bottom: calc(-20% - 140px); left: calc(-20% - 120px);
  opacity: .32; mix-blend-mode: screen;
  background:
    radial-gradient(18px 9px at 20% 30%, rgba(200, 255, 225, .55), transparent 70%),
    radial-gradient(22px 10px at 70% 22%, rgba(200, 255, 225, .45), transparent 70%),
    radial-gradient(16px 8px at 45% 60%, rgba(200, 255, 225, .4), transparent 70%),
    radial-gradient(24px 11px at 80% 75%, rgba(200, 255, 225, .4), transparent 70%),
    radial-gradient(14px 7px at 30% 85%, rgba(200, 255, 225, .4), transparent 70%);
  background-size: 120px 140px;
}
/* véu do Desperto: o líquido fica vermelho, vindo de baixo */
.ep3-fecho-veu {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ep3-ease); mix-blend-mode: color;
  background: linear-gradient(0deg, #ff2a3a 0%, #c0122c 45%, #7a0d22 100%);
}
.ep3-fecho-tanque.is-desperto .ep3-fecho-veu { opacity: .9; }
.ep3-fecho-bolhas i {
  position: absolute; bottom: -12px; left: 50%; width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid rgba(210, 255, 232, .7);
  background: radial-gradient(circle at 34% 32%, rgba(255, 255, 255, .9) 0 16%, rgba(170, 255, 214, .16) 42%, transparent 70%);
  opacity: 0;
}
.ep3-fecho-bolhas i:nth-child(1) { left: 18%; --d: 0s; --t: 5.2s; }
.ep3-fecho-bolhas i:nth-child(2) { left: 31%; --d: -1.7s; --t: 6.1s; width: 4px; height: 4px; }
.ep3-fecho-bolhas i:nth-child(3) { left: 46%; --d: -3.1s; --t: 4.6s; width: 8px; height: 8px; }
.ep3-fecho-bolhas i:nth-child(4) { left: 62%; --d: -0.8s; --t: 5.6s; }
.ep3-fecho-bolhas i:nth-child(5) { left: 76%; --d: -2.4s; --t: 6.6s; width: 5px; height: 5px; }
.ep3-fecho-bolhas i:nth-child(6) { left: 85%; --d: -4.2s; --t: 5s; width: 3px; height: 3px; }
.ep3-fecho-bolhas i:nth-child(7) { left: 24%; --d: -3.8s; --t: 7s; width: 3px; height: 3px; }
.ep3-fecho-bolhas i:nth-child(8) { left: 55%; --d: -5.1s; --t: 6.2s; width: 5px; height: 5px; }
.ep3-fecho-bolhas i:nth-child(9) { left: 70%; --d: -1.2s; --t: 4.9s; width: 4px; height: 4px; }
@keyframes ep3-fecho-sobe {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: .9; }
  50% { transform: translate3d(3px, calc(var(--vh) * var(--k) * -.5px), 0); }
  88% { opacity: .75; }
  100% { transform: translate3d(-2px, calc(var(--vh) * var(--k) * -1px - 12px), 0); opacity: 0; }
}
@keyframes ep3-fecho-caus { from { transform: translate(0, 0); } to { transform: translate(120px, -140px); } }
@keyframes ep3-fecho-boia { 0%, 100% { transform: translate3d(0, calc(-3px * var(--se)), 0); } 50% { transform: translate3d(0, calc(2px * var(--se)), 0); } }
@keyframes ep3-fecho-led { 0%, 46% { opacity: 1; } 54%, 100% { opacity: .15; } }

/* o espécime: pé no espPe do pôster, escala inteira (2x no desktop, 1x abaixo de 1024) */
.ep3-fecho-boia {
  position: absolute; left: calc(var(--cx) * var(--k) * 1px); top: calc(var(--pe) * var(--k) * 1px);
  transform-origin: 50% 100%; transform: translate(-50%, -100%) scale(var(--se));
  line-height: 0;
}
.ep3-fecho-esp { max-width: none; transition: opacity .4s; }
.ep3-fecho-tanque.is-trocando .ep3-fecho-esp { opacity: 0; }
/* luz verde do líquido no chão e na página */
.ep3-fecho-brilho {
  position: absolute; left: 50%; top: 58%; width: 140%; height: 70%; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(60, 220, 140, .22), rgba(40, 160, 100, .08) 55%, transparent);
  pointer-events: none;
}
.ep3-fecho-tanque.is-desperto .ep3-fecho-brilho { background: radial-gradient(closest-side, rgba(230, 50, 70, .22), rgba(160, 20, 40, .08) 55%, transparent); }
.ep3-fecho-led {
  position: absolute; width: calc(16px * var(--k)); height: calc(16px * var(--k)); border-radius: 50%;
  left: calc(var(--led-x) * var(--k) * 1px); top: calc(var(--led-y) * var(--k) * 1px); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 90, 90, .95), rgba(255, 42, 42, .4) 45%, transparent);
  opacity: 0; mix-blend-mode: screen; pointer-events: none;
}
.ep3-fecho-tanque.is-desperto .ep3-fecho-led { opacity: 1; }

html.ep3-js:not(.ep3-estatico) .ep3-fecho-tanque.is-ativo .ep3-fecho-bolhas i { animation: ep3-fecho-sobe var(--t, 5.5s) linear var(--d, 0s) infinite; }
html.ep3-js:not(.ep3-estatico) .ep3-fecho-tanque.is-ativo .ep3-fecho-caus { animation: ep3-fecho-caus 14s linear infinite; }
html.ep3-js:not(.ep3-estatico) .ep3-fecho-tanque.is-ativo .ep3-fecho-esp { animation: ep3-fecho-boia 5.2s ease-in-out infinite; }
html.ep3-js:not(.ep3-estatico) .ep3-fecho-tanque.is-ativo.is-desperto .ep3-fecho-led { animation: ep3-fecho-led .8s steps(1, end) infinite; }

.ep3-fecho-leg { margin-top: calc(-64px * var(--k)); position: relative; z-index: 2; }
.ep3-fecho-etq { font-size: 9px; }

/* o texto */
.ep3-fecho-txt { display: grid; gap: 18px; justify-items: start; max-width: 600px; }
.ep3-fecho-rot {
  display: flex; align-items: center; gap: 10px;
  font: 700 .74rem/1.3 var(--ep3-f-display); letter-spacing: .38em; text-transform: uppercase; color: var(--ep3-rotulo);
}
.ep3-fecho-rot .ep3-biorrisco { --ep3-icone-tam: 16px; color: var(--ep3-menta); }
.ep3-fecho-h2 {
  font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.04;
  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 30px rgba(94, 214, 168, .16));
}
.ep3-fecho-p { max-width: 52ch; color: var(--ep3-corpo); font-size: 1.04rem; line-height: 1.75; }
.ep3-fecho-punch {
  font: 600 1.1rem/1.5 var(--ep3-f-display); color: var(--ep3-tinta);
  padding-left: 14px; border-left: 2px solid var(--ep3-menta);
}
.ep3-fecho-botoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 540px; margin-top: 8px; }
.ep3-fecho-botoes .ep3-btn { padding-inline: 18px; }
/* "Changelog em breve": chapa de aço com o carimbo, desligada */
.ep3-fecho-breve.ep3-btn {
  grid-column: 1 / -1; justify-content: space-between;
  position: relative; gap: 14px; padding: 12px 18px 12px 22px; color: var(--ep3-rotulo); cursor: not-allowed;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .25)),
    url('../../assets/biolab-materiais/chapa-destaque-aco.webp') 0 0 / 256px auto repeat, #10171a;
  border: 1px solid rgba(201, 208, 207, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .5);
}
.ep3-fecho-breve.ep3-btn:hover { color: var(--ep3-rotulo); background-color: #10171a; border-color: rgba(201, 208, 207, .18); }
.ep3-fecho-carimbo { font-size: 18px; letter-spacing: .1em; padding: 3px 8px 2px; --ep3-carimbo-cor: var(--ep3-vermelho-texto, #e8808b); }

@media (max-width: 1023px) {
  .ep3-fecho-in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ep3-fecho-tanque { --k: .5; --se: 1; }
  .ep3-fecho-txt { justify-items: center; }
  .ep3-fecho-punch { padding-left: 0; border-left: 0; }
  .ep3-fecho-botoes { margin-inline: auto; }
  .ep3-fecho::before {
    background:
      radial-gradient(360px 300px at 50% 18%, rgba(46, 170, 120, .16), transparent 70%),
      radial-gradient(500px 260px at 50% 100%, rgba(150, 34, 52, .12), transparent 70%);
  }
}
@media (max-width: 759px) {
  .ep3-fecho { padding-block: var(--ep3-e5) var(--ep3-e7); }
  .ep3-fecho-txt { gap: 14px; }
  .ep3-fecho-p { font-size: .98rem; }
  .ep3-fecho-punch { font-size: 1rem; }
  .ep3-fecho-botoes { grid-template-columns: 1fr; gap: 10px; }
}

/* sem movimento: tudo parado, já visível */
@media (prefers-reduced-motion: reduce) {
  .ep3-a08-vitrine .ep3-a08-baia-boia, .ep3-a08-vitrine .ep3-a08-baia-sombra,
  .ep3-fecho-tanque .ep3-fecho-bolhas i, .ep3-fecho-tanque .ep3-fecho-caus, .ep3-fecho-tanque .ep3-fecho-esp,
  .ep3-fecho-tanque .ep3-fecho-led { animation: none !important; }
  .ep3-fecho-bolhas { display: none; }
  .ep3-a08-baia-arte, .ep3-fecho-veu, .ep3-fecho-esp { transition: none; }
}

/* =====================================================================================
   Ajuste r1: celular mais justo (regra 57)
   ===================================================================================== */
@media (max-width: 759px) {
  /* a tabela da Abismalita: cada linha em dois andares, mais baixos */
  .ep3-tambem-tab tbody tr { padding: 5px 2px; }
  .ep3-tambem-tab tbody th { margin-bottom: 1px; font-size: .78rem; line-height: 1.3; }
  .ep3-tambem-tab td { font-size: .76rem; line-height: 1.35; }
  .ep3-tambem-card { padding: 16px 14px 16px; gap: 10px; }
  .ep3-tambem-p { font-size: .92rem; line-height: 1.55; }
  .ep3-tambem-notas li { font-size: .86rem; padding-block: 6px; line-height: 1.5; }
  .ep3-tambem-notas li::before { top: calc(6px + .62em); }
  .ep3-tambem-her-cab { gap: 12px; }
  .ep3-tambem-her-cab > div { gap: 10px; }
  .ep3-tambem-pac { padding: 7px 4px; }
  /* o fecho: o tanque um pouco menor e os botões mais baixos */
  .ep3-fecho-in { gap: 16px; }
  .ep3-fecho-botoes .ep3-btn { min-height: 42px; padding-block: 11px; }
  .ep3-fecho-p { line-height: 1.6; }
  /* 08: a vitrine e o Comerciante mais justos */
  #roleta .ep3-a08-mercado .ep3-npc { padding: 12px 12px 12px 10px; gap: 12px; }
  #roleta .ep3-a08-mercado .ep3-npc-fala { font-size: .9rem; line-height: 1.5; margin-top: 4px; }
}
@media (max-width: 759px) {
  .ep3-tambem-her-cab .ep3-tambem-p { font-size: .9rem; line-height: 1.5; }
  .ep3-tambem-pacs { gap: 5px; }
}
@media (max-width: 759px) {
  /* o tanque do fecho um pouco menor (o vidro ainda cabe o espécime 1:1) */
  .ep3-fecho-tanque { --k: .46; }
}
@media (max-width: 759px) {
  /* os dois botões do fecho lado a lado; a chapa "em breve" embaixo, na largura toda */
  .ep3-fecho-botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ep3-fecho-botoes .ep3-btn { padding-inline: 10px; font-size: .74rem; letter-spacing: .08em; }
}