/* Lição cinematográfica: narrativa e ensino ocupam o mesmo palco.
   Toda animação usa apenas opacity e transform; o conteúdo permanece
   legível mesmo quando movimento, filtros ou WebGL estão desativados. */

body.modo-licao-cinematica #ui {
  max-width: 1540px;
  padding-inline: clamp(12px, 2vw, 34px);
}
body.modo-licao-cinematica #alvo {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.modo-licao-cinematica #hud {
  padding-block: 8px 5px;
  opacity: .56;
}
body.modo-licao-cinematica #hud .botao-sair { opacity: .75; }
body.modo-licao-cinematica #ambiente.posto {
  opacity: .48;
  transform: scale(1.035) translate3d(.4%, -.25%, 0);
  transition: opacity .45s ease, transform 1.1s ease;
}
body.modo-licao-cinematica #ambiente::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 42%, rgba(34, 159, 176, .12), transparent 36%),
    linear-gradient(90deg, rgba(3, 7, 12, .76), rgba(3, 8, 14, .18) 34%, rgba(3, 8, 14, .18) 68%, rgba(3, 7, 12, .78));
}

#cena.licao-cinematica-aberta {
  padding: 0 0 max(8px, env(safe-area-inset-bottom));
  overflow: hidden;
  justify-content: stretch;
}

.licao-cinema {
  --licao-acento: #71f4ff;
  --licao-acento-rgb: 113, 244, 255;
  width: 100%;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: #edf7ff;
  isolation: isolate;
  position: relative;
}
.licao-cinema[data-tom="pressao"],
.licao-cinema[data-tom="acao"] {
  --licao-acento: #ff9868;
  --licao-acento-rgb: 255, 152, 104;
}
.licao-cinema[data-tom="drama"],
.licao-cinema[data-tom="revelacao"] {
  --licao-acento: #d6b5ff;
  --licao-acento-rgb: 214, 181, 255;
}
.licao-cinema[data-tom="paranoia"],
.licao-cinema[data-tom="desfecho"] {
  --licao-acento: #ff7878;
  --licao-acento-rgb: 255, 120, 120;
}
.licao-cinema::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(var(--licao-acento-rgb), .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--licao-acento-rgb), .035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}

.licao-topo {
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(420px, 1.5fr) minmax(150px, .55fr);
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid rgba(var(--licao-acento-rgb), .22);
  background: linear-gradient(90deg, rgba(4, 10, 16, .9), rgba(6, 14, 22, .7), rgba(4, 10, 16, .9));
}
.licao-marca {
  display: flex;
  align-items: center;
  gap: 11px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .2em;
  white-space: nowrap;
}
.licao-marca img { width: 25px; height: 25px; }
.licao-trilha {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.licao-trilha i {
  min-width: 0;
  display: grid;
  grid-template-columns: 21px 1fr;
  align-items: center;
  gap: 5px;
  opacity: .36;
  font-style: normal;
  transition: opacity .22s ease, transform .22s ease;
}
.licao-trilha i::after {
  content: '';
  grid-column: 1 / -1;
  height: 2px;
  background: rgba(155, 186, 205, .28);
}
.licao-trilha i span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 700 9px/1 var(--mono);
}
.licao-trilha i b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 600 8px/1 var(--mono);
  letter-spacing: .1em;
}
.licao-trilha i.feito,
.licao-trilha i.atual { opacity: 1; color: var(--licao-acento); }
.licao-trilha i.feito::after,
.licao-trilha i.atual::after { background: var(--licao-acento); box-shadow: 0 0 10px rgba(var(--licao-acento-rgb), .4); }
.licao-trilha i.atual { transform: translateY(-1px); }
.licao-pular {
  justify-self: end;
  min-height: 44px;
  padding: 8px 12px;
  color: #9eb2c3;
  border: 1px solid rgba(153, 190, 214, .18);
  background: rgba(4, 10, 17, .55);
  font: 600 9px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.licao-pular:hover, .licao-pular:focus-visible { color: var(--licao-acento); border-color: var(--licao-acento); }

.licao-corpo {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 282px) minmax(480px, 1fr) minmax(220px, 286px);
  gap: clamp(12px, 1.3vw, 22px);
  padding: clamp(12px, 1.5vw, 22px) 0;
  align-items: stretch;
}

.licao-personagem {
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  position: relative;
  border: 1px solid rgba(var(--licao-acento-rgb), .32);
  background: linear-gradient(180deg, rgba(7, 18, 27, .34), rgba(3, 9, 15, .9));
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
}
.licao-personagem::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(var(--licao-acento-rgb), .12) 50%, transparent 58%);
  transform: translateX(-120%);
  animation: licao-varredura 8s ease-in-out infinite;
}
.licao-retrato { min-height: 0; position: relative; overflow: hidden; }
.licao-retrato::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(transparent, rgba(2, 8, 13, .96));
}
.licao-retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
  transform: scale(1.025);
  animation: licao-respirar 7s ease-in-out infinite alternate;
}
.licao-personagem[data-personagem="kamale"] .licao-retrato img { object-position: 50% 46%; }
.licao-personagem figcaption {
  position: relative;
  z-index: 2;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(var(--licao-acento-rgb), .34);
  background: rgba(3, 10, 16, .92);
}
.licao-personagem figcaption strong,
.licao-personagem figcaption span { display: block; text-transform: uppercase; }
.licao-personagem figcaption strong { color: var(--licao-acento); font: 700 12px/1.2 var(--mono); letter-spacing: .14em; }
.licao-personagem figcaption span { margin-top: 7px; color: #8095a6; font: 600 8px/1.3 var(--mono); letter-spacing: .13em; }

.licao-palco {
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--licao-acento-rgb), .34);
  background:
    radial-gradient(circle at 75% 18%, rgba(var(--licao-acento-rgb), .08), transparent 34%),
    linear-gradient(150deg, rgba(4, 13, 21, .94), rgba(4, 10, 17, .86));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .32);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.licao-palco::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background: linear-gradient(transparent 50%, rgba(0,0,0,.18) 50%);
  background-size: 100% 4px;
}
.licao-cena-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .12;
  filter: saturate(.7) contrast(1.08);
  transform: scale(1.03);
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
}
.licao-palco::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(2, 8, 14, .95) 0%, rgba(2, 8, 14, .78) 44%, rgba(2, 8, 14, .58) 100%);
}
.licao-etapa { position: relative; z-index: 2; }
.licao-etapa {
  height: 100%;
  overflow: auto;
  padding: clamp(24px, 3vw, 48px);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--licao-acento-rgb), .35) transparent;
}
.licao-etapa.ativa { animation: licao-etapa-entrar .36s cubic-bezier(.2, .8, .2, 1); }
.licao-etapa[hidden] { display: none !important; }
.licao-sinal {
  margin: 0 0 14px;
  color: var(--licao-acento);
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .16em;
}
.licao-etapa h2 {
  margin: 0 0 18px;
  max-width: 850px;
  color: #f5f9fc;
  font-size: clamp(29px, 3vw, 47px);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.licao-etapa > p,
.licao-etapa blockquote,
.licao-explicacao {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.58;
}
.licao-etapa blockquote {
  margin: 30px 0 0;
  padding: 22px 24px;
  color: #edf5fa;
  border-left: 3px solid var(--licao-acento);
  background: rgba(2, 8, 14, .62);
  font-size: clamp(18px, 1.65vw, 27px);
  line-height: 1.42;
}
.licao-tom { color: #91a5b5; max-width: 680px; margin-top: 22px; }

.licao-tabelas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 14px; margin-top: 20px; }
.licao-tabela { min-width: 0; border: 1px solid rgba(var(--licao-acento-rgb), .22); background: rgba(1, 7, 12, .68); }
.licao-tabela header { padding: 10px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(var(--licao-acento-rgb), .17); }
.licao-tabela header span { color: #71899a; font: 700 8px/1 var(--mono); letter-spacing: .14em; }
.licao-tabela header strong { color: var(--licao-acento); font: 700 12px/1 var(--mono); }
.licao-tabela-scroll { overflow-x: auto; }
.licao-tabela table { width: 100%; border-collapse: collapse; white-space: nowrap; font: 500 10px/1.35 var(--mono); }
.licao-tabela th, .licao-tabela td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.05); }
.licao-tabela th { color: #92a9ba; }
.licao-tabela th.foco, .licao-tabela td.foco { color: var(--licao-acento); background: rgba(var(--licao-acento-rgb), .07); }
.licao-tabela td i { color: #ff9a78; font-style: normal; }
.licao-campos { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.licao-campos > span { color: #7f94a4; font: 700 8px/1 var(--mono); letter-spacing: .13em; }
.licao-campos code { padding: 6px 9px; border: 1px solid rgba(var(--licao-acento-rgb), .28); background: rgba(var(--licao-acento-rgb), .07); color: var(--licao-acento); }

.licao-conceito-cabecalho {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.licao-conceito-cabecalho div span,
.licao-conceito-cabecalho div strong { display: block; }
.licao-conceito-cabecalho div span { color: #8ba1b2; font-size: 13px; }
.licao-conceito-cabecalho div strong { margin-top: 5px; color: var(--licao-acento); font: 700 clamp(20px, 2vw, 31px)/1.15 var(--sans); }
.licao-conceito-cabecalho > b { max-width: 230px; color: #a8bbc9; font: 600 10px/1.45 var(--mono); text-align: right; text-transform: uppercase; letter-spacing: .08em; }
.licao-conceito-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .92fr); gap: 18px; align-items: stretch; }
.licao-explicacao { padding: 18px 20px; background: rgba(7, 17, 26, .68); border-left: 2px solid var(--licao-acento); }
.licao-explicacao p { margin: 0 0 12px; }
.licao-explicacao p:last-child { margin-bottom: 0; }
.licao-explicacao code, .licao-porque code { font-family: var(--mono); color: var(--licao-acento); }
.licao-conceito-grade pre {
  margin: 0;
  min-width: 0;
  padding: 18px 20px;
  overflow: auto;
  border: 1px solid rgba(var(--licao-acento-rgb), .24);
  background: #02070b;
  color: #dce9f2;
  font: 500 clamp(12px, 1vw, 15px)/1.65 var(--mono);
  white-space: pre-wrap;
}
.sql-keyword { color: #71f4a7; }
.sql-string { color: #f4c37a; }
.licao-porque { margin-top: 16px !important; padding: 12px 15px; border-left: 2px solid #ff9868; background: rgba(255, 152, 104, .07); }
.licao-porque b { color: #ff9868; }

.licao-pergunta { font-size: clamp(19px, 1.55vw, 25px) !important; max-width: 720px; }
.licao-opcoes { display: grid; gap: 10px; margin-top: 22px; }
.licao-opcoes button {
  min-height: 58px;
  display: grid;
  grid-template-columns: 35px 1fr;
  align-items: center;
  gap: 13px;
  padding: 10px 14px;
  text-align: left;
  color: #e5eef4;
  border: 1px solid rgba(145, 178, 199, .24);
  background: rgba(6, 14, 22, .72);
  cursor: pointer;
  font: 600 14px/1.35 var(--sans);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.licao-opcoes button span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid currentColor; color: var(--licao-acento); font: 700 11px/1 var(--mono); }
.licao-opcoes button:hover:not(:disabled), .licao-opcoes button:focus-visible { border-color: var(--licao-acento); transform: translateX(3px); }
.licao-opcoes button:disabled { opacity: .64; cursor: default; }
.licao-opcoes button.correta { opacity: 1; border-color: #72eaa4; background: rgba(70, 181, 115, .11); }
.licao-opcoes button.incorreta { opacity: 1; border-color: #ff8874; background: rgba(220, 76, 62, .11); }
.licao-feedback { min-height: 48px; margin-top: 14px; padding: 12px 14px; color: #b7c7d2; border-left: 2px solid transparent; }
.licao-feedback strong { color: #eef7fb; }
.licao-feedback.acerto { border-color: #72eaa4; background: rgba(70, 181, 115, .08); }
.licao-feedback.apoio { border-color: #ffb06f; background: rgba(255, 154, 91, .08); }

.licao-ordem { display: grid; grid-template-columns: 36px 1fr; gap: 11px 13px; margin: 24px 0; max-width: 720px; }
.licao-ordem span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--licao-acento); border: 1px solid currentColor; border-radius: 50%; font: 700 11px/1 var(--mono); }
.licao-ordem p { margin: 5px 0 0; color: #d5e0e7; }
.licao-campo { max-width: 760px; padding: 15px 18px; border: 1px solid rgba(var(--licao-acento-rgb), .22); background: rgba(5, 13, 20, .7); }
.licao-campo b { color: var(--licao-acento); font: 700 9px/1 var(--mono); letter-spacing: .14em; }
.licao-campo p { margin: 9px 0 0; line-height: 1.5; color: #aebdca; }
.licao-terminal { min-width: min(100%, 340px); margin-top: 22px; }
.licao-final-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.licao-final-acoes .licao-terminal { margin-top: 0; }
.licao-revisar { min-height: 48px; padding: 10px 16px; border: 1px solid rgba(var(--licao-acento-rgb), .32); background: rgba(3, 10, 17, .76); color: #cbd9e2; font: 700 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.licao-revisar:hover, .licao-revisar:focus-visible { border-color: var(--licao-acento); }

.licao-kamale {
  align-self: end;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(var(--licao-acento-rgb), .26);
  background: rgba(3, 10, 16, .88);
}
.licao-kamale img { width: 78px; height: 92px; object-fit: cover; object-position: 50% 43%; border: 1px solid rgba(var(--licao-acento-rgb), .3); }
.licao-kamale strong, .licao-kamale span { display: block; }
.licao-kamale strong { color: var(--licao-acento); font: 700 10px/1.2 var(--mono); letter-spacing: .14em; }
.licao-kamale span { margin-top: 4px; color: #748a9a; font: 600 7px/1.2 var(--mono); letter-spacing: .12em; }
.licao-kamale p { margin: 10px 0 0; color: #d1dce4; font-size: 12.5px; line-height: 1.45; }

.licao-comandos {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr minmax(150px, 220px);
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(var(--licao-acento-rgb), .22);
}
.licao-comandos > span { text-align: center; color: #758b9b; font: 600 8px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.licao-voltar, .licao-avancar {
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid rgba(var(--licao-acento-rgb), .32);
  background: rgba(3, 10, 17, .76);
  color: #cbd9e2;
  font: 700 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.licao-avancar { color: var(--licao-acento); }
.licao-voltar:disabled, .licao-avancar:disabled { opacity: .25; cursor: default; }
.licao-voltar:hover:not(:disabled), .licao-avancar:hover:not(:disabled),
.licao-voltar:focus-visible, .licao-avancar:focus-visible { border-color: var(--licao-acento); background: rgba(var(--licao-acento-rgb), .08); }

@keyframes licao-etapa-entrar {
  from { opacity: 0; transform: translate3d(16px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes licao-respirar {
  from { transform: scale(1.025) translate3d(0, 0, 0); }
  to { transform: scale(1.055) translate3d(0, -4px, 0); }
}
@keyframes licao-varredura {
  0%, 68% { transform: translateX(-125%); opacity: 0; }
  76% { opacity: .8; }
  92%, 100% { transform: translateX(125%); opacity: 0; }
}

@media (max-width: 1180px) {
  .licao-topo { grid-template-columns: auto 1fr auto; }
  .licao-corpo { grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); }
  .licao-kamale { display: none; }
  .licao-conceito-grade { grid-template-columns: 1fr; }
  .licao-etapa h2 { font-size: clamp(27px, 3.6vw, 42px); }
}

@media (max-width: 900px) {
  body.modo-licao-cinematica #ui { padding-inline: 10px; }
  body.modo-licao-cinematica #hud { display: none; }
  #cena.licao-cinematica-aberta { overflow-y: auto; }
  .licao-cinema { height: auto; min-height: 100%; grid-template-rows: auto auto auto; }
  .licao-topo { position: sticky; top: 0; z-index: 6; grid-template-columns: 1fr auto; padding: 8px 0; gap: 10px; }
  .licao-marca span { display: none; }
  .licao-trilha { grid-row: 2; grid-column: 1 / -1; }
  .licao-trilha i { grid-template-columns: 17px 1fr; }
  .licao-trilha i span { width: 17px; height: 17px; font-size: 7px; }
  .licao-trilha i b { font-size: 6px; }
  /* O alvo de toque não encolhe onde o dedo é o único ponteiro. Esta regra
     baixava "Pular explicação" de 44px para 40px justamente abaixo de 900px
     de largura, ou seja, só no celular — medido a 390x844 e a 195x422, era o
     menor interativo do jogo inteiro nas duas janelas. Os 4px vinham de
     espremer a barra do topo; a barra cabe sem eles. */
  .licao-pular { min-height: 44px; }
  .licao-corpo { min-height: 0; grid-template-columns: 1fr; padding: 10px 0; }
  .licao-personagem { min-height: 185px; grid-template-columns: 150px 1fr; grid-template-rows: 1fr; }
  .licao-retrato { min-height: 185px; }
  .licao-personagem figcaption { display: flex; flex-direction: column; justify-content: end; border-top: 0; border-left: 1px solid rgba(var(--licao-acento-rgb), .3); }
  .licao-palco { min-height: 540px; clip-path: none; }
  .licao-etapa { padding: 22px 18px 96px; overflow: visible; }
  .licao-etapa h2 { font-size: clamp(28px, 8vw, 40px); }
  .licao-tabelas { grid-template-columns: 1fr; }
  .licao-conceito-grade { grid-template-columns: 1fr; }
  .licao-conceito-cabecalho { display: block; }
  .licao-conceito-cabecalho > b { margin-top: 10px; max-width: none; text-align: left; }
  .licao-comandos { position: sticky; bottom: 0; z-index: 7; grid-template-columns: 1fr 1fr; background: rgba(3, 9, 15, .96); padding: 8px 0 max(8px, env(safe-area-inset-bottom)); }
  .licao-comandos > span { display: none; }
  .licao-cinema.etapa-final .licao-comandos { display: none; }
}

@media (max-width: 520px) {
  .licao-personagem { min-height: 145px; grid-template-columns: 112px 1fr; }
  .licao-retrato { min-height: 145px; }
  .licao-personagem figcaption { padding: 12px; }
  .licao-personagem figcaption strong { font-size: 10px; }
  .licao-personagem figcaption span { font-size: 6.5px; }
  .licao-palco { min-height: 590px; }
  .licao-etapa { padding: 20px 14px; }
  .licao-etapa blockquote { margin-top: 18px; padding: 16px; font-size: 17px; }
  .licao-conceito-grade pre { font-size: 11px; padding: 14px; }
  .licao-opcoes button { min-height: 54px; font-size: 13px; }
  .licao-trilha i b { display: none; }
  .licao-trilha i { grid-template-columns: 1fr; justify-items: center; }
  .licao-trilha i::after { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body.modo-licao-cinematica #ambiente.posto,
  .licao-personagem::after,
  .licao-retrato img,
  .licao-etapa.ativa,
  .licao-trilha i,
  .licao-opcoes button { animation: none !important; transition: none !important; transform: none !important; }
}

@media (prefers-contrast: more) {
  .licao-palco, .licao-personagem, .licao-kamale, .licao-topo, .licao-comandos { background: #050b11; }
  .licao-palco, .licao-personagem, .licao-opcoes button, .licao-tabela { border-color: #9cefff; }
}


/* A encenação não usa mais a ação corporal como se fosse uma fala.
   A fala ocupa o quadro de diálogo; a ação move retrato, câmera e objeto de
   cena. O texto da ação permanece apenas para tecnologia assistiva. */
.licao-somente-leitor {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.licao-dialogo-cena {
  max-width: 780px;
  margin-top: 24px;
  padding: 0;
}
.licao-dialogo-cena > span {
  display: block;
  margin: 0 0 8px 4px;
  color: var(--licao-acento);
  font: 700 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.licao-etapa .licao-dialogo-cena blockquote {
  margin: 0;
  position: relative;
  overflow: hidden;
}
.licao-etapa .licao-dialogo-cena blockquote::after {
  content: '';
  position: absolute;
  right: 16px;
  bottom: 12px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--licao-acento);
  border-bottom: 2px solid var(--licao-acento);
  transform: rotate(45deg);
  opacity: .72;
}
.licao-narracao {
  max-width: 720px;
  margin: 24px 0 0;
  padding: 15px 18px;
  color: #b8c9d5;
  border-left: 2px solid rgba(var(--licao-acento-rgb), .55);
  background: rgba(3, 10, 16, .48);
  font-style: italic;
}
.licao-acao-vfx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.licao-acao-vfx i,
.licao-acao-vfx b,
.licao-acao-vfx em {
  position: absolute;
  display: block;
  opacity: 0;
  font-style: normal;
}
.licao-acao-vfx i {
  left: 13%;
  top: 22%;
  width: 74%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--licao-acento), transparent);
  box-shadow: 0 0 18px rgba(var(--licao-acento-rgb), .6);
}
.licao-acao-vfx b {
  right: 12%;
  bottom: 18%;
  width: 92px;
  height: 46px;
  border: 1px solid rgba(var(--licao-acento-rgb), .72);
  background: rgba(var(--licao-acento-rgb), .08);
}
.licao-acao-vfx em {
  left: 50%;
  top: 50%;
  width: 110px;
  height: 110px;
  margin: -55px;
  border: 1px solid rgba(var(--licao-acento-rgb), .65);
  border-radius: 50%;
}

.licao-cinema.acao-reproduzir[data-acao="olhar"] .licao-retrato img {
  animation: licao-acao-olhar 1.4s cubic-bezier(.2,.75,.2,1) 1 both, licao-respirar 7s ease-in-out 1.4s infinite alternate;
}
.licao-cinema.acao-reproduzir[data-acao="postura"] .licao-personagem {
  animation: licao-acao-postura 1.15s cubic-bezier(.16,.84,.25,1) 1 both;
}
.licao-cinema.acao-reproduzir[data-acao="apontar"] .licao-personagem {
  animation: licao-acao-apontar 1.25s cubic-bezier(.16,.84,.25,1) 1 both;
}
.licao-cinema.acao-reproduzir[data-acao="apontar"] .licao-acao-vfx i {
  animation: licao-acao-linha 1.15s ease-out .28s 1 both;
}
.licao-cinema.acao-reproduzir[data-acao="registrar"] .licao-personagem {
  animation: licao-acao-registrar .88s cubic-bezier(.2,.8,.2,1) 1 both;
}
.licao-cinema.acao-reproduzir[data-acao="registrar"] .licao-acao-vfx b {
  animation: licao-acao-selo .9s cubic-bezier(.18,.89,.32,1.2) .35s 1 both;
}
.licao-cinema.acao-reproduzir[data-acao="deslizar"] .licao-acao-vfx i {
  top: 62%;
  animation: licao-acao-deslizar 1.15s cubic-bezier(.2,.8,.2,1) .2s 1 both;
}
.licao-cinema.acao-reproduzir[data-acao="pousar"] .licao-personagem {
  animation: licao-acao-pousar 1.25s cubic-bezier(.16,.84,.25,1) 1 both;
}
.licao-cinema.acao-reproduzir[data-acao="materializar"] .licao-personagem {
  animation: licao-acao-materializar 1.05s steps(8,end) 1 both;
}
.licao-cinema.acao-reproduzir[data-acao="materializar"] .licao-acao-vfx em {
  animation: licao-acao-pulso 1.3s ease-out .16s 1 both;
}
.licao-cinema.acao-reproduzir[data-acao="alerta"] .licao-palco {
  animation: licao-acao-alerta 1.35s steps(1,end) 1 both;
}
.licao-cinema.acao-reproduzir[data-acao="ambiente"] .licao-cena-fundo {
  animation: licao-acao-camera 2.1s cubic-bezier(.2,.75,.2,1) 1 both;
}

@keyframes licao-acao-olhar {
  0% { transform: scale(1.035) translateX(-1.5%); filter: brightness(.92); }
  55% { transform: scale(1.055) translateX(1.8%); filter: brightness(1.08); }
  100% { transform: scale(1.045) translateX(.5%); filter: none; }
}
@keyframes licao-acao-postura {
  0% { transform: translateY(9px) scale(.985); }
  52% { transform: translateY(-3px) scale(1.012); }
  100% { transform: none; }
}
@keyframes licao-acao-apontar {
  0% { transform: translateX(-7px); }
  58% { transform: translateX(8px); }
  100% { transform: none; }
}
@keyframes licao-acao-linha {
  0% { opacity: 0; transform: scaleX(.04); transform-origin: left; }
  45% { opacity: .95; }
  100% { opacity: 0; transform: scaleX(1); transform-origin: left; }
}
@keyframes licao-acao-registrar {
  0%, 100% { transform: none; }
  45% { transform: translateY(8px) scale(.992); }
  65% { transform: translateY(-2px) scale(1.005); }
}
@keyframes licao-acao-selo {
  0% { opacity: 0; transform: scale(1.65) rotate(-7deg); }
  62% { opacity: .9; transform: scale(.94) rotate(-2deg); }
  100% { opacity: 0; transform: scale(1) rotate(0); }
}
@keyframes licao-acao-deslizar {
  0% { opacity: 0; transform: translateX(-80%); }
  45% { opacity: .9; }
  100% { opacity: 0; transform: translateX(80%); }
}
@keyframes licao-acao-pousar {
  0% { opacity: 0; transform: translateY(-28px) scale(.96); }
  62% { opacity: 1; transform: translateY(4px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes licao-acao-materializar {
  0% { opacity: .08; transform: translateX(-6px); filter: hue-rotate(45deg) brightness(1.5); }
  20% { opacity: .72; transform: translateX(7px); }
  42% { opacity: .28; transform: translateX(-3px); }
  70%, 100% { opacity: 1; transform: none; filter: none; }
}
@keyframes licao-acao-pulso {
  0% { opacity: 0; transform: scale(.25); }
  42% { opacity: .7; }
  100% { opacity: 0; transform: scale(2.3); }
}
@keyframes licao-acao-alerta {
  0%, 18%, 42%, 100% { filter: none; }
  10%, 32% { filter: brightness(1.35) saturate(1.3); }
}
@keyframes licao-acao-camera {
  0% { transform: scale(1.03) translateX(-1%); opacity: .08; }
  100% { transform: scale(1.075) translateX(1%); opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
  .licao-cinema.acao-reproduzir .licao-personagem,
  .licao-cinema.acao-reproduzir .licao-retrato img,
  .licao-cinema.acao-reproduzir .licao-cena-fundo,
  .licao-cinema.acao-reproduzir .licao-acao-vfx * {
    animation: none !important;
    transform: none !important;
  }
}