primocode 8.42.2 → 9.0.0

package/studio/web/render.css

@@ -1,1352 +0,0 @@
-/* ==========================================================================
-   render.css — aparência do que é criado (cenas, documentos, planilhas).
-   Vai junto no export autônomo, então não depende de nada do editor.
-   ========================================================================== */
-
-.cena, .folha-doc, .planilha {
-  /* "Primo *" são as fontes embutidas em fontes.css — existem sempre, em
-     qualquer máquina e no export offline. O resto da pilha é rede de
-     segurança para o caso de o CSS das fontes não ter sido carregado. */
-  --f-display: "Primo Sans", "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-  --f-corpo: var(--f-display);
-  --f-mono: "Primo Mono", "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
-
-  --c-fundo: #0b0d10;
-  --c-fundo2: #14181e;
-  --c-texto: #eef2f6;
-  --c-fraco: #949fac;
-  --c-tom: #ff5a36;
-  --c-tom2: #ffb03a;
-  --c-linha: rgba(255, 255, 255, .12);
-  --c-cartao: rgba(255, 255, 255, .05);
-}
-
-[data-tema="claro"] {
-  --c-fundo: #ffffff; --c-fundo2: #f2f5f8; --c-texto: #0e1318; --c-fraco: #59636f;
-  --c-tom: #e04a25; --c-tom2: #1f8fe0; --c-linha: rgba(0, 0, 0, .12); --c-cartao: rgba(0, 0, 0, .035);
-}
-[data-tema="meia-noite"] {
-  --c-fundo: #08060f; --c-fundo2: #150f2c; --c-texto: #f3effd; --c-fraco: #a99cd0;
-  --c-tom: #a78bfa; --c-tom2: #f472b6; --c-linha: rgba(255, 255, 255, .14); --c-cartao: rgba(255, 255, 255, .055);
-}
-[data-tema="papel"] {
-  --f-display: "Primo Serif", "Iowan Old Style", Palatino, Georgia, serif;
-  --f-corpo: "Primo Sans", "Inter", system-ui, sans-serif;
-  --c-fundo: #f9f5ee; --c-fundo2: #efe8db; --c-texto: #221e19; --c-fraco: #6c6055;
-  --c-tom: #b4532a; --c-tom2: #3f6f4f; --c-linha: rgba(0, 0, 0, .14); --c-cartao: rgba(0, 0, 0, .04);
-}
-[data-tema="neon"] {
-  --c-fundo: #03050a; --c-fundo2: #06121c; --c-texto: #e7fbff; --c-fraco: #79a5b6;
-  --c-tom: #22e5ff; --c-tom2: #c3ff3d; --c-linha: rgba(34, 229, 255, .26); --c-cartao: rgba(34, 229, 255, .07);
-}
-[data-tema="brasa"] {
-  --c-fundo: #100906; --c-fundo2: #1f0f08; --c-texto: #fdf0e8; --c-fraco: #bf9c8a;
-  --c-tom: #ff5a36; --c-tom2: #ffb03a; --c-linha: rgba(255, 140, 90, .2); --c-cartao: rgba(255, 140, 90, .07);
-}
-[data-tema="floresta"] {
-  --c-fundo: #06110d; --c-fundo2: #0c2019; --c-texto: #e9f7f0; --c-fraco: #8fb7a6;
-  --c-tom: #2fbf7f; --c-tom2: #a3e635; --c-linha: rgba(120, 220, 170, .18); --c-cartao: rgba(120, 220, 170, .06);
-}
-[data-tema="retro"] {
-  --f-display: "Primo Display", "Futura", "Avenir Next", system-ui, sans-serif;
-  --c-fundo: #f0e2c8; --c-fundo2: #e3cfa8; --c-texto: #2b1d10; --c-fraco: #7a6042;
-  --c-tom: #d1541f; --c-tom2: #3f7d6a; --c-linha: rgba(60, 40, 20, .18); --c-cartao: rgba(60, 40, 20, .06);
-}
-[data-tema="oceano"] {
-  --c-fundo: #041724; --c-fundo2: #072d42; --c-texto: #e6f6ff; --c-fraco: #86b4cd;
-  --c-tom: #38bdf8; --c-tom2: #5eead4; --c-linha: rgba(120, 200, 240, .2); --c-cartao: rgba(120, 200, 240, .07);
-}
-[data-tema="doce"] {
-  --c-fundo: #fdf2f6; --c-fundo2: #f7e0ea; --c-texto: #3d1f2e; --c-fraco: #8a6377;
-  --c-tom: #e0397a; --c-tom2: #7c5cf0; --c-linha: rgba(120, 50, 90, .16); --c-cartao: rgba(120, 50, 90, .05);
-}
-[data-tema="mono"] {
-  --f-display: "Primo Geo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
-  --c-fundo: #ffffff; --c-fundo2: #eeeeee; --c-texto: #000000; --c-fraco: #666666;
-  --c-tom: #000000; --c-tom2: #000000; --c-linha: #000000; --c-cartao: #f2f2f2;
-}
-/* "âmbar" — o marrom quente com dourado, que é a cara de curso e de aula.
-   Entrou porque faltava: os dez temas tinham roxo, ciano, laranja de fogo e
-   verde, e nenhum tom terroso onde o texto branco descansa. É o tema que
-   sustenta cena longa sem cansar a vista. */
-[data-tema="ambar"] {
-  --f-display: "Primo Geo", "Space Grotesk", system-ui, sans-serif;
-  --c-fundo: #1a100b; --c-fundo2: #2a1710; --c-texto: #f7efe8; --c-fraco: #b8a08f;
-  --c-tom: #e8a33d; --c-tom2: #d0703a; --c-linha: rgba(232, 163, 61, .22); --c-cartao: rgba(232, 163, 61, .07);
-}
-/* "grafite" — o cinza-azulado sóbrio, para conteúdo técnico e relatório.
-   Sem cor de festa: quando o assunto é número, a cor não pode competir. */
-[data-tema="grafite"] {
-  --f-display: "Primo Geo", "Space Grotesk", system-ui, sans-serif;
-  --c-fundo: #0d1117; --c-fundo2: #161d26; --c-texto: #e6edf3; --c-fraco: #8b97a6;
-  --c-tom: #4a9eff; --c-tom2: #7ee0c0; --c-linha: rgba(255, 255, 255, .1); --c-cartao: rgba(255, 255, 255, .04);
-}
-
-[data-tema="mono"] .el.no,
-[data-tema="mono"] .el.cartoes .cartao { border-width: 3px; border-radius: 0; }
-[data-tema="mono"] .el.txt { letter-spacing: -.04em; }
-
-
-/* Cada tema com a SUA letra. Antes só três trocavam de fonte, e os outros
-   sete herdavam a mesma sans — o que dava a todo vídeo a mesma cara. */
-[data-tema="meia-noite"] { --f-display: "Primo Geo", "Space Grotesk", system-ui, sans-serif; }
-[data-tema="brasa"] { --f-display: "Primo Display", "Bebas Neue", Impact, system-ui, sans-serif; letter-spacing: .01em; }
-[data-tema="neon"] { --f-display: "Primo Geo", "Space Grotesk", system-ui, sans-serif; }
-[data-tema="oceano"] { --f-display: "Primo Geo", "Space Grotesk", system-ui, sans-serif; }
-[data-tema="floresta"] { --f-display: "Primo Serif", Georgia, serif; --f-corpo: "Primo Sans", system-ui, sans-serif; }
-[data-tema="doce"] { --f-display: "Primo Serif", Georgia, serif; --f-corpo: "Primo Sans", system-ui, sans-serif; }
-
-/* Título de cena de vídeo pede peso e aperto — é o que dá cara de cinema em
-   vez de cara de slide de reunião. */
-.cena .el.txt.titulo { font-weight: 700; letter-spacing: -.025em; }
-[data-tema="brasa"] .cena .el.txt.titulo,
-[data-tema="retro"] .cena .el.txt.titulo { font-weight: 400; letter-spacing: .02em; }
-
-/* --------------------------------------------------------------- cena ---- */
-
-.cena {
-  position: relative;
-  overflow: hidden;
-  background: var(--c-fundo);
-  color: var(--c-texto);
-  font-family: var(--f-corpo);
-  flex: 0 0 auto;
-}
-
-.cena[data-fundo="malha"] {
-  background:
-    radial-gradient(1100px 640px at 10% 4%, color-mix(in srgb, var(--c-tom) 36%, transparent), transparent 62%),
-    radial-gradient(920px 560px at 94% 96%, color-mix(in srgb, var(--c-tom2) 30%, transparent), transparent 60%),
-    var(--c-fundo);
-}
-.cena[data-fundo="brilho"] {
-  background:
-    radial-gradient(760px 480px at 50% 112%, color-mix(in srgb, var(--c-tom) 42%, transparent), transparent 68%),
-    var(--c-fundo);
-}
-.cena[data-fundo="grade"] {
-  background-image:
-    linear-gradient(var(--c-linha) 1px, transparent 1px),
-    linear-gradient(90deg, var(--c-linha) 1px, transparent 1px);
-  background-size: 72px 72px;
-  background-color: var(--c-fundo);
-}
-.cena[data-fundo="pontos"] {
-  background-image: radial-gradient(var(--c-linha) 1.7px, transparent 1.7px);
-  background-size: 38px 38px;
-  background-color: var(--c-fundo);
-}
-.cena[data-fundo="suave"] { background: linear-gradient(158deg, var(--c-fundo2), var(--c-fundo) 62%); }
-.cena[data-fundo="vinheta"] {
-  background:
-    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0, 0, 0, .55) 100%),
-    var(--c-fundo);
-}
-.cena[data-fundo="aurora"] {
-  background:
-    radial-gradient(900px 500px at 20% 0%, color-mix(in srgb, var(--c-tom) 55%, transparent), transparent 55%),
-    radial-gradient(760px 620px at 78% 18%, color-mix(in srgb, var(--c-tom2) 45%, transparent), transparent 58%),
-    radial-gradient(1000px 520px at 55% 105%, color-mix(in srgb, var(--c-tom) 30%, transparent), transparent 60%),
-    var(--c-fundo);
-}
-.cena[data-fundo="raios"] {
-  background:
-    repeating-conic-gradient(from 210deg at 78% -10%,
-      color-mix(in srgb, var(--c-tom) 16%, transparent) 0deg 5deg, transparent 5deg 13deg),
-    linear-gradient(160deg, var(--c-fundo2), var(--c-fundo) 70%);
-}
-.cena[data-fundo="ondas"] {
-  background:
-    repeating-linear-gradient(115deg,
-      color-mix(in srgb, var(--c-tom) 9%, transparent) 0 3px, transparent 3px 26px),
-    linear-gradient(200deg, var(--c-fundo2), var(--c-fundo) 65%);
-}
-.cena[data-fundo="nevoa"] {
-  background:
-    radial-gradient(1200px 700px at 30% 110%, color-mix(in srgb, var(--c-fundo2) 90%, white 10%), transparent 60%),
-    radial-gradient(900px 500px at 80% -10%, color-mix(in srgb, var(--c-tom) 20%, transparent), transparent 60%),
-    var(--c-fundo);
-}
-.cena[data-fundo="xadrez"] {
-  background-image:
-    linear-gradient(45deg, var(--c-cartao) 25%, transparent 25%, transparent 75%, var(--c-cartao) 75%),
-    linear-gradient(45deg, var(--c-cartao) 25%, transparent 25%, transparent 75%, var(--c-cartao) 75%);
-  background-size: 120px 120px;
-  background-position: 0 0, 60px 60px;
-  background-color: var(--c-fundo);
-}
-
-.cena .cobertura { position: absolute; inset: 0; z-index: 0; }
-
-/* acabamentos — textura por cima de tudo, sem tocar no conteúdo ---------- */
-
-.cena::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: 5;
-  pointer-events: none;
-  display: none;
-}
-.cena[data-acabamento]::after { display: block; }
-
-.cena[data-acabamento="grao"]::after {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.42'/%3E%3C/svg%3E");
-  opacity: .22;
-  mix-blend-mode: overlay;
-}
-.cena[data-acabamento="vinheta"]::after {
-  background: radial-gradient(125% 95% at 50% 45%, transparent 42%, rgba(0, 0, 0, .62) 100%);
-}
-.cena[data-acabamento="scanlines"]::after {
-  background: repeating-linear-gradient(rgba(0, 0, 0, .26) 0 2px, transparent 2px 5px);
-  opacity: .5;
-}
-.cena[data-acabamento="luz"]::after {
-  background: linear-gradient(118deg, transparent 34%,
-    color-mix(in srgb, var(--c-tom2) 26%, transparent) 47%, transparent 60%);
-  mix-blend-mode: screen;
-}
-.cena[data-acabamento="brilho"]::after {
-  background: radial-gradient(60% 45% at 50% 50%,
-    color-mix(in srgb, var(--c-tom) 22%, transparent), transparent 72%);
-  mix-blend-mode: screen;
-}
-.cena[data-acabamento="moldura"]::after {
-  border: 3px solid var(--c-linha);
-  inset: 34px;
-  border-radius: 4px;
-}
-
-/* fluxo — o estúdio posiciona quando a cena usa um layout nomeado -------- */
-
-.cena .fluxo {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 34px;
-}
-.cena .fluxo > .el { flex: 0 0 auto; max-width: 100%; }
-
-/* --------------------------------------------------- legenda de fala ----
-   Legenda de vídeo é lida em movimento e, muitas vezes, sem som — e por cima
-   de uma imagem que muda a cada quadro. Cor de tema não resolve: sobre um céu
-   claro, texto claro some; sobre uma sombra, texto escuro some.
-
-   Então ela não confia no fundo. Branco puro, peso alto, chapa escura atrás e
-   um contorno de sombra que segura a leitura mesmo quando a chapa cai em cima
-   de algo claro. É a mesma decisão de toda legenda de streaming. */
-.cena .faixa-fala {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  text-align: center;
-  pointer-events: none;
-}
-.cena .el.txt.fala {
-  display: inline-block;
-  max-width: 86%;
-  color: #fff;
-  background: rgba(6, 8, 12, .72);
-  padding: .32em .7em;
-  border-radius: .28em;
-  text-shadow: 0 2px 10px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .9);
-  text-wrap: balance;
-}
-
-.cena .fluxo[data-layout="capa"],
-.cena .fluxo[data-layout="centro"],
-.cena .fluxo[data-layout="citacao"] { align-items: center; text-align: center; }
-.cena .fluxo[data-layout="capa"] > .el.txt,
-.cena .fluxo[data-layout="centro"] > .el.txt,
-.cena .fluxo[data-layout="citacao"] > .el { align-items: center; }
-.cena .fluxo[data-layout="capa"] > .el.txt.corpo { max-width: 74%; }
-
-.cena .fluxo[data-layout="secao"] { gap: 20px; }
-.cena .fluxo[data-layout="numeros"] { gap: 76px; }
-
-.cena .fluxo .colunas { display: grid; gap: 42px; align-items: start; }
-.cena .fluxo .colunas > .el { position: relative; }
-
-.cena .fluxo[data-layout="imagem-direita"],
-.cena .fluxo[data-layout="imagem-esquerda"] {
-  flex-direction: row;
-  display: grid;
-  grid-template-columns: 1.05fr 1fr;
-  gap: 0;
-}
-.cena .fluxo .lado-texto {
-  display: flex; flex-direction: column; justify-content: center; gap: 30px;
-  min-width: 0;
-}
-.cena .fluxo .lado-imagem { position: relative; overflow: hidden; }
-.cena .fluxo .lado-imagem .el.imagem { border-radius: 0 !important; }
-
-/* elementos ------------------------------------------------------------- */
-
-.el { position: absolute; }
-.el.txt {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  font-family: var(--f-display);
-  letter-spacing: -.022em;
-  line-height: 1.12;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-.el.txt.corpo { font-family: var(--f-corpo); letter-spacing: -.005em; line-height: 1.5; }
-.el.txt.chapeu {
-  font-size: 22px; font-weight: 640; letter-spacing: .17em;
-  text-transform: uppercase; color: var(--c-tom); line-height: 1.3;
-}
-
-/* estilos de texto — o oposto do "tudo igual" ---------------------------- */
-
-.el.txt[data-estilo="gradiente"] {
-  background: linear-gradient(96deg, var(--c-tom), var(--c-tom2));
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-.el.txt[data-estilo="contorno"] {
-  color: transparent;
-  -webkit-text-stroke: 2.5px var(--c-texto);
-}
-.el.txt[data-estilo="contorno-tom"] {
-  color: transparent;
-  -webkit-text-stroke: 2.5px var(--c-tom);
-}
-.el.txt[data-estilo="sombra"] { text-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
-.el.txt[data-estilo="brilho"] {
-  text-shadow: 0 0 28px color-mix(in srgb, var(--c-tom) 85%, transparent),
-               0 0 70px color-mix(in srgb, var(--c-tom) 45%, transparent);
-}
-.el.txt[data-estilo="relevo"] { text-shadow: 5px 5px 0 var(--c-tom); }
-.el.txt[data-estilo="marcador"] .marca,
-.el.txt[data-estilo="marcador"] { display: inline; }
-.el.txt[data-estilo="marcador"] > span.linha {
-  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--c-tom) 55%, transparent) 58%);
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-  padding: 0 .08em;
-}
-.el.txt[data-estilo="fita"] > span.linha {
-  background: var(--c-tom);
-  color: #fff;
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-  padding: .06em .22em;
-}
-.el.txt[data-estilo="caixa"] {
-  border: 3px solid var(--c-tom);
-  border-radius: 18px;
-  padding: .34em .5em;
-}
-
-.el.forma { border-radius: 0; }
-.el.imagem { overflow: hidden; }
-.el.imagem img { width: 100%; height: 100%; display: block; }
-
-/* movimento de imagem (Ken Burns) ---------------------------------------- */
-
-@keyframes kbAproxima { from { transform: scale(1); } to { transform: scale(1.16); } }
-@keyframes kbAfasta { from { transform: scale(1.16); } to { transform: scale(1); } }
-@keyframes kbEsquerda { from { transform: scale(1.16) translateX(3%); } to { transform: scale(1.16) translateX(-3%); } }
-@keyframes kbDireita { from { transform: scale(1.16) translateX(-3%); } to { transform: scale(1.16) translateX(3%); } }
-@keyframes kbCima { from { transform: scale(1.16) translateY(3%); } to { transform: scale(1.16) translateY(-3%); } }
-
-.el.imagem[data-mov] img { animation-duration: 9s; animation-timing-function: linear; animation-fill-mode: both; }
-.el.imagem[data-mov="aproximar"] img { animation-name: kbAproxima; }
-.el.imagem[data-mov="afastar"] img { animation-name: kbAfasta; }
-.el.imagem[data-mov="esquerda"] img { animation-name: kbEsquerda; }
-.el.imagem[data-mov="direita"] img { animation-name: kbDireita; }
-.el.imagem[data-mov="cima"] img { animation-name: kbCima; }
-
-.el.lista { display: flex; flex-direction: column; gap: calc(18px * var(--esc, 1)); justify-content: center; }
-.el.lista .item {
-  position: relative;
-  padding-left: calc(42px * var(--esc, 1));
-  font-size: calc(34px * var(--esc, 1));
-  line-height: 1.42;
-}
-.el.lista .item::before {
-  content: ""; position: absolute; left: 4px; top: .58em;
-  width: 12px; height: 12px; border-radius: 4px; background: var(--c-tom);
-}
-.el.lista.numerada .item::before {
-  content: counter(li); counter-increment: li;
-  width: 30px; height: 30px; left: 0; top: .12em;
-  border-radius: 9px; background: var(--c-cartao);
-  border: 1px solid var(--c-linha); color: var(--c-tom);
-  font-size: 16px; font-weight: 640;
-  display: grid; place-items: center;
-}
-.el.lista.numerada { counter-reset: li; }
-
-.el.cartoes { display: grid; gap: 24px; align-content: center; }
-.el.cartoes .cartao {
-  background: var(--c-cartao);
-  border: 1px solid var(--c-linha);
-  border-radius: 20px;
-  padding: 26px 28px;
-  display: grid; gap: 8px; align-content: start;
-}
-.el.cartoes .cartao b { font-family: var(--f-display); font-size: 27px; font-weight: 620; letter-spacing: -.02em; }
-.el.cartoes .cartao span { font-size: 19px; line-height: 1.45; color: var(--c-fraco); }
-
-/* ═══════════════════════════════════════════════════════════════════════
-   O vocabulário do vídeo de referência.
-
-   Tudo aqui existe porque o dono mandou um vídeo e disse "pega tudo que tem
-   esse vídeo, e coloca pro Primo poder fazer também" — cartão com relevo,
-   vidro, foto, celular com conversa dentro.
-
-   O fio comum é o VIDRO: painel translúcido, borda clara em cima (onde a luz
-   bateria) e sombra embaixo. Não é enfeite — é o que dá profundidade sem
-   precisar de imagem, e o que separa "cartão" de "retângulo com borda".
-   ═══════════════════════════════════════════════════════════════════════ */
-
-.vidro, .el.cartoes[data-estilo="vidro"] .cartao, .el.passos .passo {
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015)),
-    var(--c-cartao);
-  border: 1px solid var(--c-linha);
-  /* A luz de cima e a sombra de baixo, dentro da própria caixa. É o truque
-     inteiro do "liquid glass": a borda superior clara finge um bisel. */
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, .13),
-    0 18px 44px rgba(0, 0, 0, .34);
-}
-
-/* ── MATERIAL: vidro (liquid glass) ─────────────────────────────────────
-   Pedido do dono: "liquid glass, icon, bem motion". O que faz o vidro ser
-   vidro, e não um retângulo translúcido:
-     · DESFOCA o que está atrás (backdrop-filter) e SATURA — o fundo fica
-       vivo através dele, como numa lente;
-     · o BISEL: uma linha clara em cima (onde a luz bate) e uma escura
-       embaixo, dentro da própria caixa;
-     · o REFLEXO diagonal (::before), que no vídeo atravessa devagar — é o
-       "líquido" do nome;
-     · a TINTA opcional (--tinta), fraca, para o vidro ter cor sem ficar opaco.
-   Vale em qualquer elemento: texto vira pílula de vidro, forma vira painel,
-   ícone vira azulejo, imagem ganha moldura. ─────────────────────────────── */
-.el[data-material="vidro"] {
-  position: absolute;
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07) 38%,
-                    rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .14)),
-    color-mix(in srgb, var(--tinta, transparent) 28%, transparent);
-  -webkit-backdrop-filter: blur(22px) saturate(1.65);
-  backdrop-filter: blur(22px) saturate(1.65);
-  border: 1px solid rgba(255, 255, 255, .30);
-  border-radius: 28px;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, .60),
-    inset 0 -1px 0 rgba(0, 0, 0, .20),
-    inset 0 0 0 1px rgba(255, 255, 255, .05),
-    0 26px 60px -22px rgba(0, 0, 0, .60);
-  overflow: hidden;
-}
-.el[data-material="vidro"]::before {
-  content: ""; position: absolute; inset: -40% -30%; pointer-events: none;
-  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .30) 47%,
-                              rgba(255, 255, 255, .07) 53%, transparent 60%);
-  transform: translateX(-28%);
-}
-.cena.animar .el[data-material="vidro"]::before { animation: brilhoVidro 7s cubic-bezier(.4, 0, .2, 1) infinite; }
-@keyframes brilhoVidro {
-  0%, 100% { transform: translateX(-28%); }
-  50%      { transform: translateX(28%); }
-}
-.el.txt[data-material="vidro"] { padding: .42em .85em; }
-.el.forma[data-material="vidro"] { background-color: transparent; }
-.el.imagem[data-material="vidro"] { padding: 14px; }
-.el.imagem[data-material="vidro"] img { border-radius: calc(28px - 12px); }
-.el.lista[data-material="vidro"], .el.cartoes[data-material="vidro"], .el.numeros[data-material="vidro"] { padding: 4% 5%; }
-/* Tema claro: o vidro escurece um pouco, senão some no branco. */
-[data-tema="claro"] .el[data-material="vidro"], .tema-claro .el[data-material="vidro"] {
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .30) 40%, rgba(255, 255, 255, .55)),
-    color-mix(in srgb, var(--tinta, transparent) 22%, transparent);
-  border-color: rgba(0, 0, 0, .10);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .06), 0 26px 60px -24px rgba(0, 0, 0, .28);
-}
-
-/* ── ÍCONE COMO OBJETO: o azulejo de aplicativo ──────────────────────────
-   `estilo: "app"`: a cor em gradiente com duas luzes, o brilho na metade de
-   cima, a sombra colorida embaixo e o traço branco com sombra própria — é a
-   gramática de ícone de app, e o olho lê "produto" em vez de "sinal".
-   `estilo: "vidro"`: o mesmo azulejo em liquid glass. ─────────────────── */
-.el.icone[data-estilo="app"], .el.icone[data-estilo="vidro"] {
-  position: absolute; border-radius: 23.5%; overflow: hidden;
-}
-/* O traço ocupa 58% do azulejo. NÃO por padding em %: padding em
-   porcentagem é relativo à LARGURA DO PAI (a cena, 1920px), e 21% virava
-   400px de padding num ícone de 220 — o azulejo engolia o canto da tela e
-   o traço sumia. Medido na primeira captura. */
-.el.icone[data-estilo="app"] svg, .el.icone[data-estilo="vidro"] svg { width: 58%; height: 58%; }
-.el.icone[data-estilo="app"] {
-  --az: var(--azulejo, var(--c-tom));
-  background:
-    radial-gradient(130% 110% at 18% 8%, rgba(255, 255, 255, .55), transparent 52%),
-    linear-gradient(160deg, color-mix(in srgb, var(--az) 78%, #fff), var(--az) 52%,
-                    color-mix(in srgb, var(--az) 68%, #000));
-  box-shadow:
-    inset 0 2px 0 rgba(255, 255, 255, .55),
-    inset 0 -3px 0 rgba(0, 0, 0, .28),
-    0 22px 44px -16px color-mix(in srgb, var(--az) 70%, #000);
-}
-.el.icone[data-estilo="app"]::after {
-  content: ""; position: absolute; left: 5%; right: 5%; top: 3%; height: 47%; pointer-events: none;
-  border-radius: 22% 22% 48% 48% / 30% 30% 60% 60%;
-  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .02));
-}
-.el.icone[data-estilo="app"] svg { position: relative; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
-.el.icone[data-estilo="vidro"] {
-  --tinta: var(--azulejo, var(--c-tom));
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .07) 40%, rgba(255, 255, 255, .16)),
-    color-mix(in srgb, var(--tinta) 30%, transparent);
-  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
-  border: 1px solid rgba(255, 255, 255, .32);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 24px 50px -20px rgba(0, 0, 0, .55);
-}
-.el.icone[data-estilo="vidro"] svg { position: relative; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .3)); }
-
-/* ── selo ──────────────────────────────────────────────────────────────── */
-.el.selo {
-  display: inline-flex; align-items: center; gap: .5em;
-  align-self: flex-start;
-  font-family: var(--f-corpo);
-  font-size: 21px; font-weight: 620;
-  letter-spacing: .13em; text-transform: uppercase;
-  color: var(--c-tom);
-  background: color-mix(in srgb, var(--c-tom) 13%, transparent);
-  border: 1px solid color-mix(in srgb, var(--c-tom) 42%, transparent);
-  border-radius: 999px;
-  padding: .42em 1.05em;
-}
-.el.selo[data-estilo="vivo"] {
-  color: var(--c-fundo);
-  background: var(--c-tom);
-  border-color: var(--c-tom);
-}
-.el.selo[data-estilo="solto"] {
-  background: none; border-color: transparent; padding-left: 0; padding-right: 0;
-}
-.el.selo .selo-icone { font-size: 1.15em; letter-spacing: 0; }
-.cena .fluxo[data-layout="capa"] > .el.selo,
-.cena .fluxo[data-layout="centro"] > .el.selo { align-self: center; }
-
-/* ── progresso ─────────────────────────────────────────────────────────── */
-.el.progresso {
-  display: flex; align-items: center; gap: 18px;
-  color: var(--c-tom); font-family: var(--f-corpo);
-}
-.el.progresso > b { font-size: 24px; font-weight: 620; letter-spacing: .04em; }
-.el.progresso .pontos { display: flex; align-items: center; gap: 9px; }
-.el.progresso .pontos i {
-  width: 9px; height: 9px; border-radius: 50%;
-  background: var(--c-linha);
-  transition: none;
-}
-.el.progresso .pontos i.feito { background: color-mix(in srgb, var(--c-tom) 45%, transparent); }
-.el.progresso .pontos i.aqui {
-  background: var(--c-tom); width: 12px; height: 12px;
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-tom) 18%, transparent);
-}
-
-/* ── avatar ────────────────────────────────────────────────────────────── */
-.el.avatar {
-  border-radius: 50%; overflow: hidden; position: relative;
-  display: grid; place-items: center; flex: 0 0 auto;
-  background: var(--c-cartao);
-  /* O anel aceso: dois anéis, um forte colado e um aberto e fraco. Um só
-     fica duro; dois viram luz. */
-  box-shadow:
-    0 0 0 3px var(--c-tom),
-    0 0 0 12px color-mix(in srgb, var(--c-tom) 16%, transparent),
-    0 22px 50px rgba(0, 0, 0, .42);
-}
-.el.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.el.avatar b {
-  font-family: var(--f-display); font-weight: 640;
-  color: var(--c-tom); letter-spacing: .02em;
-}
-.cena .fluxo[data-layout="capa"] > .el.avatar,
-.cena .fluxo[data-layout="centro"] > .el.avatar { align-self: center; }
-
-/* ── dispositivo ───────────────────────────────────────────────────────── */
-/* O aparelho ENCOLHE para caber na cena. Preso só pela largura, o celular de
-   380px virava 800px de altura e vazava pelo pé do quadro — metade da
-   conversa ficava fora do vídeo, e na tela do editor parecia certo porque ali
-   a página rola. A altura é que manda; a largura vem da proporção. */
-.el.dispositivo {
-  display: grid; align-content: center; justify-items: center;
-  flex: 0 1 auto; min-height: 0; max-height: 100%;
-}
-.el.dispositivo .moldura {
-  background: linear-gradient(180deg, #22262c, #14171b);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, .16),
-    0 30px 70px rgba(0, 0, 0, .5);
-  overflow: hidden;
-  display: flex; flex-direction: column;
-}
-.el.dispositivo .tela {
-  flex: 1; overflow: hidden;
-  background: var(--c-fundo2);
-  display: flex; flex-direction: column; justify-content: center;
-  gap: 16px;
-}
-
-.el.dispositivo[data-forma="celular"] { width: 100%; }
-/* O TETO DO APARELHO ACOMPANHA O QUADRO. Ele era 780px fixos, calibrados em
-   1920x1080 — e num vídeo vertical de 1080x1920 isso deixa o celular ocupando
-   um terço da altura, boiando no meio do branco. Num anúncio o aparelho é o
-   assunto da cena: ele ocupa a tela. `--alto` é a altura da cena, posta pelo
-   renderCena. */
-.el.dispositivo[data-forma="celular"] .moldura {
-  /* Altura em PIXEL vindo do quadro, sem porcentagem: `min(100%, …)` dentro de
-     um pai de altura automática é percentagem circular — o navegador desiste
-     dela e o aparelho volta a ser medido pela largura. Medido: 408px de altura
-     num quadro de 1920, um quinto da tela. */
-  height: calc(var(--alto, 1080px) * .62); width: auto; max-width: 100%;
-  aspect-ratio: 9 / 19;
-  border-radius: 42px; padding: 12px;
-}
-.el.dispositivo[data-forma="celular"] .tela { border-radius: 31px; padding: 26px 20px; }
-/* A ilha da câmera. Sem ela um retângulo arredondado é só um retângulo
-   arredondado — é este detalhe que faz o olho ler "celular". */
-.el.dispositivo[data-forma="celular"] .moldura::before {
-  content: ""; position: absolute; left: 50%; top: 20px;
-  width: 88px; height: 9px; border-radius: 999px;
-  background: rgba(0, 0, 0, .55); transform: translateX(-50%); z-index: 2;
-}
-.el.dispositivo[data-forma="celular"] .moldura { position: relative; }
-
-.el.dispositivo[data-forma="tablet"] .moldura {
-  height: min(100%, 740px); width: auto; max-width: 100%;
-  aspect-ratio: 3 / 4;
-  border-radius: 26px; padding: 16px;
-}
-.el.dispositivo[data-forma="tablet"] .tela { border-radius: 12px; padding: 26px; }
-
-.el.dispositivo[data-forma="notebook"] { width: 100%; }
-.el.dispositivo[data-forma="notebook"] .moldura {
-  width: 100%; max-height: 100%; aspect-ratio: 16 / 10;
-  border-radius: 16px 16px 4px 4px; padding: 12px 12px 14px;
-}
-.el.dispositivo[data-forma="notebook"] .tela { border-radius: 7px; padding: 26px 28px; }
-.el.dispositivo[data-forma="notebook"] .base {
-  width: 116%; height: 13px; margin-top: -1px;
-  border-radius: 0 0 12px 12px;
-  background: linear-gradient(180deg, #2c3138, #171a1e);
-  box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
-}
-
-.el.dispositivo[data-forma="navegador"] { width: 100%; }
-.el.dispositivo[data-forma="navegador"] .moldura {
-  width: 100%; max-height: 100%; aspect-ratio: 16 / 10; border-radius: 14px; padding: 0;
-}
-.el.dispositivo .barra-nav {
-  display: flex; align-items: center; gap: 8px;
-  padding: 13px 16px; flex: 0 0 auto;
-  border-bottom: 1px solid rgba(255, 255, 255, .07);
-}
-.el.dispositivo .barra-nav i {
-  width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .17);
-}
-.el.dispositivo .barra-nav .url {
-  margin-left: 12px; flex: 1;
-  font-family: var(--f-mono); font-size: 15px; color: rgba(255, 255, 255, .45);
-  background: rgba(0, 0, 0, .3); border-radius: 999px; padding: 5px 14px;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.el.dispositivo[data-forma="navegador"] .tela { padding: 24px 26px; }
-
-/* ── conversa ──────────────────────────────────────────────────────────── */
-.el.conversa {
-  display: flex; flex-direction: column; gap: 14px; justify-content: flex-end;
-}
-.el.conversa .balao {
-  max-width: 88%; padding: 13px 17px; line-height: 1.42;
-  font-size: 20px; border-radius: 16px;
-}
-.el.conversa .balao.meu {
-  align-self: flex-start;
-  background: var(--c-cartao); border: 1px solid var(--c-linha);
-  color: var(--c-texto); border-bottom-left-radius: 5px;
-}
-/* A resposta é o que importa: ela leva a cor do tema. */
-.el.conversa .balao.dela {
-  align-self: flex-end;
-  background: color-mix(in srgb, var(--c-tom) 20%, transparent);
-  border: 1px solid color-mix(in srgb, var(--c-tom) 40%, transparent);
-  color: var(--c-texto); border-bottom-right-radius: 5px;
-}
-/* Os balões entram um de cada vez, como numa conversa de verdade. Todos ao
-   mesmo tempo lê como captura de tela, não como diálogo. */
-.cena.animar .el.conversa .balao {
-  animation: balaoEntra .46s cubic-bezier(.22, 1, .36, 1) both;
-  animation-delay: calc(var(--atraso, 0) * 1s);
-}
-@keyframes balaoEntra {
-  from { opacity: 0; transform: translateY(14px) scale(.96); }
-  to   { opacity: 1; transform: none; }
-}
-
-/* ── passos ────────────────────────────────────────────────────────────── */
-/* Sem largura declarada, o grid encolhe até o conteúdo e as três etapas
-   viram três selinhos no meio da tela — em `capa` e `centro`, onde o eixo
-   está centralizado, isso é o padrão. Etapa é estrutura: ocupa a linha. */
-.el.passos { display: grid; gap: 18px; align-items: stretch; width: 100%; }
-.el.passos .passo {
-  border-radius: 18px; padding: 22px 20px;
-  display: grid; gap: 6px; align-content: start;
-  color: var(--c-fraco);
-}
-.el.passos .passo b {
-  font-family: var(--f-display); font-size: 23px; font-weight: 620;
-  letter-spacing: -.015em; color: inherit;
-}
-.el.passos .passo span { font-size: 17px; line-height: 1.4; }
-.el.passos .passo.feito { color: var(--c-texto); }
-/* O de agora cresce e acende. Escala pequena de propósito: 1.06 lê como
-   "este", 1.2 lê como erro de layout. */
-.el.passos .passo.agora {
-  color: var(--c-texto);
-  transform: scale(1.06);
-  border-color: color-mix(in srgb, var(--c-tom) 55%, transparent);
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--c-tom) 17%, transparent),
-                            color-mix(in srgb, var(--c-tom) 6%, transparent));
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, .16),
-    0 20px 46px color-mix(in srgb, var(--c-tom) 16%, transparent);
-}
-.el.passos .passo.agora b { color: var(--c-tom); }
-
-/* ── opcoes ────────────────────────────────────────────────────────────── */
-.el.opcoes { display: grid; gap: 12px; align-content: center; }
-.el.opcoes .pergunta {
-  font-family: var(--f-display); font-size: 26px; font-weight: 640;
-  letter-spacing: -.018em; margin-bottom: 6px; color: var(--c-texto);
-}
-.el.opcoes .opcao {
-  border: 1px solid var(--c-linha); border-radius: 12px;
-  padding: 14px 18px; font-size: 19px; color: var(--c-fraco);
-  background: var(--c-cartao);
-}
-.el.opcoes .opcao.certa {
-  color: var(--c-tom);
-  border-color: color-mix(in srgb, var(--c-tom) 60%, transparent);
-  background: color-mix(in srgb, var(--c-tom) 12%, transparent);
-}
-/* O ✓ vem do CSS, não do texto: assim o autor escreve só a alternativa e a
-   marca nunca aparece por engano na errada. */
-.el.opcoes .opcao.certa::before { content: "✓ "; font-weight: 700; }
-.cena.animar .el.opcoes .opcao {
-  animation: balaoEntra .4s cubic-bezier(.22, 1, .36, 1) both;
-  animation-delay: calc(var(--atraso, 0) * 1s);
-}
-
-.el.numeros { display: grid; gap: calc(30px * var(--esc, 1)); align-content: center; }
-.el.numeros .num { display: grid; gap: 6px; }
-.el.numeros .num b {
-  font-family: var(--f-display);
-  font-size: var(--tam-num, calc(84px * var(--esc, 1)));
-  font-weight: 680;
-  letter-spacing: -.045em; line-height: 1; color: var(--c-tom);
-  font-variant-numeric: tabular-nums;
-}
-.el.numeros .num span {
-  font-size: calc(20px * var(--esc, 1));
-  color: var(--c-fraco); line-height: 1.35;
-}
-
-.el.tabela { display: flex; align-items: center; }
-.el.tabela table { width: 100%; border-collapse: collapse; font-size: 22px; }
-.el.tabela th, .el.tabela td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--c-linha); }
-.el.tabela th {
-  font-size: 15px; text-transform: uppercase; letter-spacing: .1em;
-  color: var(--c-fraco); font-weight: 620;
-}
-
-.el.codigo {
-  background: var(--c-fundo2);
-  border: 1px solid var(--c-linha);
-  border-radius: 18px;
-  padding: 26px 30px;
-  font-family: var(--f-mono);
-  font-size: 21px;
-  line-height: 1.6;
-  white-space: pre;
-  overflow: hidden;
-  display: flex; flex-direction: column; justify-content: center;
-}
-
-.el.citacao { display: flex; flex-direction: column; justify-content: center; gap: 26px; }
-.el.citacao .aspas {
-  font-family: var(--f-display); font-size: 52px; font-weight: 500;
-  line-height: 1.3; letter-spacing: -.02em;
-}
-.el.citacao .autor { font-size: 21px; color: var(--c-fraco); letter-spacing: .04em; }
-
-.el.icone { display: grid; place-items: center; }
-.el.icone svg { width: 100%; height: 100%; }
-
-.el.no {
-  display: grid; place-items: center; text-align: center;
-  border-radius: 18px;
-  background: var(--c-cartao);
-  border: 1.5px solid var(--c-linha);
-  font-family: var(--f-display);
-  font-size: 30px; font-weight: 580;
-  padding: 18px 22px;
-  line-height: 1.25;
-}
-.el.no.destaque { background: var(--c-tom); border-color: transparent; color: #fff; }
-.el.no.circulo { border-radius: 999px; }
-
-.cena svg.conectores { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
-
-/* animação de entrada ----------------------------------------------------- */
-
-@keyframes anSubir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
-@keyframes anSurgir { from { opacity: 0; } to { opacity: 1; } }
-@keyframes anEsq { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
-@keyframes anDir { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
-@keyframes anZoom { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
-@keyframes anDesfoque { from { opacity: 0; filter: blur(16px); transform: scale(1.03); } to { opacity: 1; filter: blur(0); transform: none; } }
-@keyframes anCair { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
-@keyframes anGirar { from { opacity: 0; transform: rotate(-7deg) scale(.9); } to { opacity: 1; transform: none; } }
-@keyframes anSaltar {
-  0% { opacity: 0; transform: translateY(46px) scale(.94); }
-  62% { opacity: 1; transform: translateY(-11px) scale(1.02); }
-  100% { opacity: 1; transform: none; }
-}
-@keyframes anRevelar {
-  from { opacity: 1; clip-path: inset(0 100% 0 0); }
-  to { opacity: 1; clip-path: inset(0 0 0 0); }
-}
-@keyframes anCortina {
-  from { opacity: 1; clip-path: inset(100% 0 0 0); }
-  to { opacity: 1; clip-path: inset(0 0 0 0); }
-}
-@keyframes anElastico {
-  0% { opacity: 0; transform: scale(.6); }
-  55% { opacity: 1; transform: scale(1.08); }
-  75% { transform: scale(.97); }
-  100% { opacity: 1; transform: none; }
-}
-
-.cena.animar .el[data-an] {
-  animation-duration: .66s;
-  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
-  animation-fill-mode: both;
-  animation-delay: calc(var(--atraso, 0) * 1s);
-}
-.cena.animar .el[data-an="subir"]    { animation-name: anSubir; }
-.cena.animar .el[data-an="surgir"]   { animation-name: anSurgir; }
-.cena.animar .el[data-an="esquerda"] { animation-name: anEsq; }
-.cena.animar .el[data-an="direita"]  { animation-name: anDir; }
-.cena.animar .el[data-an="zoom"]     { animation-name: anZoom; }
-.cena.animar .el[data-an="desfoque"] { animation-name: anDesfoque; }
-.cena.animar .el[data-an="cair"]     { animation-name: anCair; }
-.cena.animar .el[data-an="girar"]    { animation-name: anGirar; }
-.cena.animar .el[data-an="saltar"]   { animation-name: anSaltar; animation-duration: .9s; }
-.cena.animar .el[data-an="revelar"]  { animation-name: anRevelar; animation-duration: .85s; }
-.cena.animar .el[data-an="cortina"]  { animation-name: anCortina; animation-duration: .85s; }
-.cena.animar .el[data-an="elastico"] { animation-name: anElastico; animation-duration: .95s; }
-
-/* palavra a palavra — cada palavra entra sozinha.
-
-   A palavra nasce VISÍVEL, e quem a esconde é a animação (com `both`, o
-   estado inicial do keyframe já vale antes de ela começar). Com `opacity: 0`
-   aqui na base, toda cena com `anim: "palavra"` saía EM BRANCO fora do player
-   — na miniatura, na prévia parada do editor, em qualquer render estático.
-   Texto que some sem erro nenhum é o defeito mais caro deste arquivo. */
-.el.txt .pal { display: inline-block; }
-.cena.animar .el[data-an="palavra"] { animation: none; opacity: 1; }
-.cena.animar .el[data-an="palavra"] .pal {
-  animation: anSubir .58s cubic-bezier(.22, 1, .36, 1) both;
-  animation-delay: calc(var(--atraso, 0) * 1s + var(--p, 0) * .085s);
-}
-
-/* itens de lista com revelação em cascata */
-.cena.animar .el.lista .item[data-an] {
-  animation: anSubir .6s cubic-bezier(.22, 1, .36, 1) both;
-  animation-delay: calc(var(--atraso, 0) * 1s);
-}
-
-/* transições entre cenas (Corte) ----------------------------------------- */
-
-@keyframes trFade { from { opacity: 0; } to { opacity: 1; } }
-@keyframes trDeslizar { from { opacity: 1; transform: translateX(100%); } to { transform: none; } }
-@keyframes trDeslizarCima { from { opacity: 1; transform: translateY(100%); } to { transform: none; } }
-@keyframes trZoom { from { opacity: 0; transform: scale(1.22); } to { opacity: 1; transform: none; } }
-@keyframes trLimpar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
-@keyframes trPersiana { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
-@keyframes trFlash {
-  0% { opacity: 0; filter: brightness(6); }
-  22% { opacity: 1; filter: brightness(3); }
-  100% { opacity: 1; filter: brightness(1); }
-}
-
-.cena[data-transicao] { animation-duration: .62s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); animation-fill-mode: both; }
-.cena[data-transicao="fade"]        { animation-name: trFade; }
-.cena[data-transicao="deslizar"]    { animation-name: trDeslizar; }
-.cena[data-transicao="subir"]       { animation-name: trDeslizarCima; }
-.cena[data-transicao="zoom"]        { animation-name: trZoom; }
-.cena[data-transicao="limpar"]      { animation-name: trLimpar; }
-.cena[data-transicao="persiana"]    { animation-name: trPersiana; }
-.cena[data-transicao="flash"]       { animation-name: trFlash; animation-duration: .5s; }
-.cena[data-transicao="corte"]       { animation: none; }
-
-/* ---------------------------------------------------------- documento ---- */
-
-.folha-doc {
-  width: 794px;
-  min-height: 1123px;
-  background: var(--c-fundo);
-  color: var(--c-texto);
-  font-family: var(--f-corpo);
-  padding: 84px 88px;
-  font-size: 15.5px;
-  line-height: 1.72;
-}
-.folha-doc > * { margin: 0 0 18px; }
-.folha-doc h1 { font-family: var(--f-display); font-size: 38px; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 8px; font-weight: 660; }
-.folha-doc h2 { font-family: var(--f-display); font-size: 24px; line-height: 1.25; letter-spacing: -.02em; margin: 34px 0 12px; font-weight: 620; }
-.folha-doc h3 { font-family: var(--f-display); font-size: 18px; margin: 24px 0 8px; font-weight: 620; }
-.folha-doc .chapeu-doc { color: var(--c-tom); font-size: 12px; font-weight: 640; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
-.folha-doc .apoio { font-size: 18px; color: var(--c-fraco); line-height: 1.6; }
-.folha-doc ul, .folha-doc ol { padding-left: 22px; }
-.folha-doc li { margin-bottom: 7px; }
-.folha-doc blockquote {
-  margin: 22px 0; padding: 4px 0 4px 22px;
-  border-left: 3px solid var(--c-tom); color: var(--c-fraco); font-size: 17px;
-}
-.folha-doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0; }
-.folha-doc th, .folha-doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--c-linha); }
-.folha-doc th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--c-fraco); }
-.folha-doc pre {
-  background: var(--c-fundo2); border: 1px solid var(--c-linha); border-radius: 10px;
-  padding: 16px 18px; font-family: var(--f-mono); font-size: 13px; line-height: 1.6; overflow-x: auto;
-}
-.folha-doc code { font-family: var(--f-mono); font-size: .88em; background: var(--c-cartao); padding: 1px 6px; border-radius: 5px; }
-.folha-doc hr { border: 0; border-top: 1px solid var(--c-linha); margin: 28px 0; }
-.folha-doc figure { margin: 24px 0; }
-.folha-doc figure img { width: 100%; border-radius: 10px; display: block; }
-.folha-doc figcaption { font-size: 12.5px; color: var(--c-fraco); margin-top: 8px; }
-
-/* ---------------------------------------------------------- planilha ----- */
-
-.planilha { background: var(--c-fundo); color: var(--c-texto); font-family: var(--f-corpo); }
-.planilha table { border-collapse: collapse; font-size: 13px; width: 100%; }
-.planilha th, .planilha td {
-  border: 1px solid var(--c-linha);
-  padding: 8px 11px;
-  text-align: left;
-  min-width: 96px;
-  white-space: nowrap;
-}
-.planilha thead th {
-  background: var(--c-fundo2);
-  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
-  color: var(--c-fraco); font-weight: 620;
-  position: sticky; top: 0; z-index: 2;
-}
-.planilha tbody th {
-  background: var(--c-fundo2); color: var(--c-fraco);
-  font-weight: 500; font-size: 11px; text-align: center; min-width: 42px;
-  position: sticky; left: 0; z-index: 1;
-}
-.planilha td.num { text-align: right; font-variant-numeric: tabular-nums; }
-.planilha td.total { font-weight: 680; color: var(--c-tom); }
-.planilha td.alto { background: color-mix(in srgb, #2fbf7f 20%, transparent); }
-.planilha td.baixo { background: color-mix(in srgb, #ff5a36 20%, transparent); }
-.planilha td.sel { outline: 2px solid var(--c-tom); outline-offset: -2px; }
-.planilha td[contenteditable]:focus { outline: 2px solid var(--c-tom); outline-offset: -2px; }
-
-/* ------------------------------------------------------------ impressão -- */
-
-@media print {
-  body { background: #fff; overflow: visible; }
-  .topo, .trilho, .painel, .inspetor, .palco-barra, .tempo, .aviso { display: none !important; }
-  .palco-wrap { padding: 0; display: block; overflow: visible; }
-  .palco { box-shadow: none; border-radius: 0; }
-  .cena {
-    page-break-after: always; break-after: page;
-    -webkit-print-color-adjust: exact; print-color-adjust: exact;
-  }
-  .cena .el { animation: none !important; opacity: 1 !important; }
-  .folha-doc { padding: 0; width: auto; min-height: 0; }
-}
-
-/* ══════════════════════════════════════════════════════════════════════════
-   Objetos 3D
-
-   Perspectiva de verdade, com transform 3D do navegador. Sem WebGL e sem
-   biblioteca — o Studio não tem dependência e não vai passar a ter por isto.
-   ═════════════════════════════════════════════════════════════════════════ */
-.el.obj3d { display: grid; place-items: center; }
-.corpo3d {
-  position: relative;
-  transform-style: preserve-3d;
-  transform: rotateX(-14deg) rotateY(-28deg);
-}
-.face3d {
-  /* Sem isto a borda e o padding SOMAM ao tamanho pedido: cada face fica
-     maior do que a medida usada no translateZ, e o cubo não fecha — as
-     faces ficam soltas, com fresta. O render.css é usado sozinho no HTML
-     exportado, então não dá para contar com o reset do core.css. */
-  box-sizing: border-box;
-  position: absolute; inset: 0;
-  display: grid; place-items: center;
-  background: var(--c-tom, #ff5a36);
-  color: #fff;
-  font: 700 clamp(14px, 2.2vw, 40px)/1.15 var(--f-display, inherit);
-  text-align: center;
-  padding: 6%;
-  border: 1px solid rgba(255, 255, 255, .16);
-  border-radius: 6px;
-  box-shadow: inset 0 0 90px rgba(0, 0, 0, .34);
-  backface-visibility: visible;
-  overflow: hidden;
-}
-.face3d img { width: 100%; height: 100%; object-fit: cover; display: block; }
-/* cada face pega uma luz diferente, senão o cubo vira uma mancha só */
-.face3d:nth-child(2) { filter: brightness(.78); }
-.face3d:nth-child(3) { filter: brightness(.88); }
-.face3d:nth-child(4) { filter: brightness(.7); }
-.face3d:nth-child(5) { filter: brightness(1.1); }
-.face3d:nth-child(6) { filter: brightness(.6); }
-
-@keyframes giro3d {
-  from { transform: rotateX(var(--inc, -14deg)) rotateY(0deg); }
-  to   { transform: rotateX(var(--inc, -14deg)) rotateY(360deg); }
-}
-
-/* painel: sem moldura, é uma superfície flutuando em profundidade */
-.el.obj3d.f-painel .face3d { border: 0; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
-
-/* O lado do aparelho não é o lado da imagem: a imagem sangra até a borda, o
-   celular precisa de ar em volta para a moldura e a sombra aparecerem. */
-.cena .fluxo .lado-imagem.com-aparelho {
-  display: grid; place-items: center; min-height: 0; overflow: visible;
-}
-.cena .fluxo .lado-imagem.com-aparelho > .el { max-height: 100%; }
-
-/* ══ O KIT DE ANÚNCIO ═══════════════════════════════════════════════════════
-   Nasceu de um vídeo de referência mandado pelo dono — um comercial de
-   fintech — com uma frase só: "ainda não tá bom, tá genérico. Quero nesse
-   nível." Medindo a peça de hoje contra aquela, o que faltava não era tema
-   nem cor (tema claro e `marca.cor` já existiam): era o PRODUTO.
-   ══════════════════════════════════════════════════════════════════════════ */
-
-/* ── cartão ───────────────────────────────────────────────────────────────
-   A proporção é a de verdade (85,6 × 54 mm = 1,586). Ela importa mais que o
-   desenho: um retângulo na proporção errada não é lido como cartão por mais
-   chip que tenha. */
-.el.cartao {
-  --cc: var(--c-tom);
-  width: min(100%, 620px);
-  perspective: 1400px;
-}
-.el.cartao .cartao-corpo {
-  position: relative;
-  aspect-ratio: 1.586;
-  border-radius: 6.2%;
-  padding: 7% 7.5%;
-  display: flex; flex-direction: column; justify-content: space-between;
-  color: #fff;
-  /* Duas fontes de luz e uma sombra longa: é o que separa "objeto pousado na
-     cena" de "retângulo colado por cima". */
-  background:
-    radial-gradient(120% 140% at 12% 4%, rgba(255, 255, 255, .30), transparent 52%),
-    linear-gradient(145deg,
-      color-mix(in srgb, var(--cc) 88%, #fff),
-      var(--cc) 46%,
-      color-mix(in srgb, var(--cc) 72%, #000) 100%);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, .38),
-    inset 0 -1px 0 rgba(0, 0, 0, .22),
-    0 2.2% 5% -1% rgba(0, 0, 0, .45);
-  transform: rotate(-1.6deg);
-}
-/* O reflexo diagonal. Sem ele o plástico vira papel colorido. */
-.el.cartao .cartao-brilho {
-  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
-  background: linear-gradient(102deg, transparent 34%, rgba(255, 255, 255, .20) 46%,
-    rgba(255, 255, 255, .05) 54%, transparent 62%);
-}
-.el.cartao .cartao-topo {
-  display: flex; align-items: baseline; justify-content: space-between; gap: 1em;
-}
-.el.cartao .cartao-marca {
-  font-weight: 800; font-size: 6.4cqw; letter-spacing: -.01em;
-}
-.el.cartao .cartao-variante {
-  font-size: 3.4cqw; letter-spacing: .18em; text-transform: uppercase;
-  opacity: .82; font-weight: 600;
-}
-.el.cartao .cartao-meio { display: flex; align-items: center; gap: 4%; }
-/* O chip: dourado, com os contatos. É o detalhe que mais faz o desenho ser
-   reconhecido — some ele e sobra um cartão de visita. */
-.el.cartao .cartao-chip {
-  width: 13%; aspect-ratio: 1.32; border-radius: 14%;
-  background: linear-gradient(150deg, #f7e3a1, #d9b558 46%, #b8912f);
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
-  position: relative; flex: none;
-}
-.el.cartao .cartao-chip::before,
-.el.cartao .cartao-chip::after {
-  content: ""; position: absolute; left: 12%; right: 12%; height: 1px;
-  background: rgba(0, 0, 0, .28);
-}
-.el.cartao .cartao-chip::before { top: 36%; }
-.el.cartao .cartao-chip::after { top: 64%; }
-.el.cartao .cartao-onda { width: 7%; opacity: .9; display: block; flex: none; }
-.el.cartao .cartao-onda svg { width: 100%; height: auto; display: block; }
-.el.cartao .cartao-numero {
-  font-family: var(--f-mono);
-  font-size: 5.6cqw; letter-spacing: .06em; opacity: .95;
-}
-.el.cartao .cartao-pe {
-  display: flex; justify-content: space-between; gap: 1em;
-  font-size: 3.1cqw; letter-spacing: .13em; text-transform: uppercase;
-  opacity: .8; font-weight: 600;
-}
-/* As medidas de dentro são `cqw` — por cento da LARGURA DO CARTÃO, não da
-   tela. Sem o contexto de contêiner o mesmo cartão sai com o chip do tamanho
-   de uma unha na vitrine e do tamanho de uma caixa na cena cheia. */
-.el.cartao .cartao-corpo { container-type: inline-size; }
-
-.el.cartao[data-face="verso"] .cartao-corpo { transform: rotate(1.6deg); }
-.el.cartao[data-mov="flutuar"] .cartao-corpo { animation: cartao-flutua 6s ease-in-out infinite; }
-.el.cartao[data-mov="girar"] .cartao-corpo { animation: cartao-gira 9s ease-in-out infinite; }
-@keyframes cartao-flutua {
-  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
-  50%      { transform: rotate(-.6deg) translateY(-2.2%); }
-}
-@keyframes cartao-gira {
-  0%, 100% { transform: rotate(-1.6deg) rotateY(-16deg); }
-  50%      { transform: rotate(-1.6deg) rotateY(16deg); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .el.cartao .cartao-corpo { animation: none; }
-}
-
-/* ── a tela do app ────────────────────────────────────────────────────────
-   Vale sozinha na cena e vale dentro do `dispositivo`. É o mesmo elemento de
-   propósito: com dois, o print da campanha e a tela do celular divergiriam na
-   primeira mudança. */
-.el.app {
-  width: 100%;
-  font-size: calc(var(--u, 10px) * 3.4);
-  display: flex; flex-direction: column; gap: 4%;
-  text-align: left;
-  background: #fff; color: #10161d;
-  border-radius: 22px; padding: 7% 6.5%;
-  box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
-}
-.el.app[data-escuro] { background: #0e1319; color: #eaf0f6; box-shadow: none; }
-.el.app .app-topo {
-  display: flex; align-items: center; justify-content: space-between;
-  font-size: .62em; font-weight: 700; opacity: .75;
-}
-.el.app .app-topo i {
-  width: 2.2em; height: .34em; border-radius: 999px;
-  background: currentColor; opacity: .25; display: block;
-}
-.el.app .app-valor { display: flex; flex-direction: column; gap: .12em; }
-.el.app .app-valor small { font-size: .5em; opacity: .6; font-weight: 600; }
-.el.app .app-valor strong {
-  font-size: 1.5em; font-weight: 800; letter-spacing: -.02em;
-  font-variant-numeric: tabular-nums;
-}
-.el.app .app-linhas { display: flex; flex-direction: column; }
-/* O FIO entre as linhas é o que faz o olho ler "extrato". Sem ele são frases
-   empilhadas, que é como a tela saía antes. */
-.el.app .app-linha {
-  display: flex; align-items: center; justify-content: space-between; gap: 1em;
-  padding: .62em 0; font-size: .56em;
-  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
-}
-.el.app .app-linha:first-child { border-top: 0; }
-.el.app .app-linha span { opacity: .82; }
-.el.app .app-linha b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
-.el.app .app-botao {
-  margin-top: auto;
-  background: var(--c-tom); color: #fff;
-  border-radius: 999px; padding: .78em 1em;
-  text-align: center; font-weight: 700; font-size: .58em;
-}
-
-/* Dentro do aparelho a tela do app OCUPA o vidro: com o padrão do
-   `dispositivo` (conteúdo centrado com folga) ela ficava boiando no meio, e o
-   que se vê num celular de verdade é a tela cheia. */
-.el.dispositivo .tela { justify-content: flex-start; }
-.el.dispositivo .tela > .el.app {
-  flex: 1; border-radius: 0; box-shadow: none;
-  margin: -26px -20px; padding: 34px 22px 26px;
-  background: transparent; color: var(--c-texto);
-}
-
-/* ── vitrine ──────────────────────────────────────────────────────────────
-   A linha de produtos com um escolhido. O item atual vem à frente; os outros
-   recuam — sem isso são quatro cartões do mesmo tamanho e ninguém sabe qual
-   está sendo oferecido. */
-.el.vitrine {
-  width: 100%; font-size: calc(var(--u, 10px) * 3.4);
-  display: flex; flex-direction: column; gap: 1.2em;
-}
-.el.vitrine .vitrine-titulo {
-  text-align: center; font-size: .62em; font-weight: 700;
-  letter-spacing: .04em; opacity: .82;
-}
-.el.vitrine .vitrine-fila {
-  display: flex; align-items: center; justify-content: center; gap: 2.2%;
-}
-.el.vitrine .vitrine-item {
-  flex: 1 1 0; min-width: 0;
-  display: flex; flex-direction: column; align-items: center; gap: .5em;
-  /* Recuado, não apagado: a .42 sobre fundo escuro os outros cartões somem, e
-     uma vitrine com um produto só não é vitrine. */
-  opacity: .58; transform: scale(.86);
-  transition: opacity .4s ease, transform .4s ease;
-}
-.el.vitrine .vitrine-item.atual { opacity: 1; transform: scale(1.06); z-index: 2; }
-.el.vitrine .vitrine-item small {
-  font-size: .42em; opacity: .75; text-align: center; font-weight: 600;
-}
-.el.vitrine .el.cartao { width: 100%; }
-
-/* ── assinatura ───────────────────────────────────────────────────────────
-   O fim do anúncio: o logo sozinho, grande, sobre a cor da casa. Ela toma a
-   cena INTEIRA porque é isso que uma assinatura é — se dividisse espaço com
-   outra coisa, seria mais um bloco em vez do ponto final. */
-.el.assinatura {
-  position: absolute; inset: 0; z-index: 4;
-  font-size: calc(var(--u, 10px) * 3);
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: .5em; text-align: center; padding: 8%;
-}
-.el.assinatura[data-sobre="marca"] { background: var(--c-tom); color: #fff; }
-.el.assinatura[data-sobre="claro"] { background: #fff; color: #10161d; }
-.el.assinatura[data-sobre="escuro"] { background: #080b0e; color: #fff; }
-.el.assinatura .assinatura-logo { width: min(52%, 520px); height: auto; display: block; }
-.el.assinatura .assinatura-nome {
-  font-size: 3.6em; font-weight: 800; letter-spacing: -.03em; line-height: 1;
-}
-.el.assinatura .assinatura-frase { font-size: .62em; opacity: .82; letter-spacing: .02em; }
-
-/* Título de anúncio quebra EQUILIBRADO. "Um cartão. Seu jeito." saía em
-   quatro linhas — três palavras e um órfão —, e é assim que uma frase curta
-   vira um bloco desengonçado no meio do quadro. */
-.el.texto.titulo, .el.texto[data-papel="titulo"] { text-wrap: balance; }
-
-/* ═══════════════════════════════════════════════════════════════════════
-   A COMPOSIÇÃO DE SLIDE (ver comporCabecaCorpo, em render.js).
-
-   Cabeça ancorada em cima, corpo centrado no que sobra — e o corpo em escala
-   de PROJETOR. Os tamanhos de antes (lista 34px, cartão 27/19, tabela 22)
-   foram calibrados para caber; num quadro de 1920 projetado numa sala eles
-   somem, e o que sobra é o vazio em volta. Só dentro desta composição: a cena
-   de vídeo com um título sozinho, e a capa, continuam como eram.
-   ═══════════════════════════════════════════════════════════════════════ */
-
-.cena .fluxo[data-composicao="cabeca-corpo"] { justify-content: flex-start; }
-.cena .fluxo[data-composicao="cabeca-corpo"] > .corpo-inicio { margin-top: auto; }
-.cena .fluxo[data-composicao="cabeca-corpo"] > .corpo-fim { margin-bottom: auto; }
-/* O título respira antes do corpo; o chapéu cola no título. */
-.cena .fluxo[data-composicao="cabeca-corpo"] > .el.txt.titulo { margin-bottom: calc(var(--u, 19px) * .4); }
-.cena .fluxo[data-composicao="cabeca-corpo"] > .el.txt.chapeu { margin-bottom: calc(var(--u, 19px) * -.9); }
-
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.lista { gap: calc(24px * var(--esc, 1)); }
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.lista .item {
-  font-size: calc(40px * var(--esc, 1));
-  line-height: 1.38;
-  padding-left: calc(50px * var(--esc, 1));
-}
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.lista .item::before { width: 14px; height: 14px; top: .56em; }
-
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.cartoes { gap: 28px; }
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.cartoes .cartao {
-  padding: 40px 42px;
-  min-height: calc(var(--alto, 1080px) * .27);
-  gap: 14px;
-  border-radius: 24px;
-}
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.cartoes .cartao b { font-size: 36px; line-height: 1.15; }
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.cartoes .cartao span { font-size: 25px; line-height: 1.45; }
-
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros { gap: calc(40px * var(--esc, 1)); }
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros .num { gap: 14px; }
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros .num b { font-size: var(--tam-num, calc(140px * var(--esc, 1))); }
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros .num span { font-size: calc(27px * var(--esc, 1)); }
-
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.tabela table { font-size: 29px; }
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.tabela th,
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.tabela td { padding: 22px 24px; }
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.tabela th { font-size: 18px; }
-
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.codigo { font-size: 26px; }
-
-/* O rodapé da apresentação: nome do deck e "03 / 08". Discreto — é âncora,
-   não conteúdo. */
-.cena .rodape {
-  position: absolute;
-  z-index: 2;
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 24px;
-  font-family: var(--f-corpo);
-  font-size: calc(var(--u, 19px) * .95);
-  letter-spacing: .04em;
-  color: var(--c-fraco);
-  opacity: .82;
-  pointer-events: none;
-  white-space: nowrap;
-}
-.cena .rodape span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
-.cena .rodape span:last-child { font-variant-numeric: tabular-nums; }
-
-/* Os números grandes NÃO quebram: coluna do tamanho do conteúdo, distribuídas.
-   Com três colunas iguais de um terço, "R$ 200 bi" a 140px partia em duas
-   linhas — o `!important` existe porque o render escreve `repeat(n, 1fr)`
-   inline, e é justamente isso que se troca aqui. */
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros {
-  grid-template-columns: none !important;
-  grid-auto-flow: column;
-  grid-auto-columns: max-content;
-  justify-content: space-between;
-  column-gap: calc(var(--u, 19px) * 3);
-}
-.cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros .num b { white-space: nowrap; }
-
-/* ─────────────────────────────────────────────────────────── câmera ────
-   O palco é o conteúdo da cena; a câmera anima ele. O FUNDO fica na raiz
-   de propósito: o quadro anda sobre o fundo, como faz uma câmera, em vez
-   de arrastar tudo junto — é daí que vem a profundidade sem custo.
-
-   `inset: 0` repete a geometria que o `.fluxo` já tinha, para o embrulho
-   não mudar uma única posição de elemento quando a cena não tem câmera. */
-.cena > .palco {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  transform-origin: 50% 50%;
-  will-change: transform;
-}
-/* O embrulho de paralaxe só existe em volta de elemento posicionado, e
-   herda a caixa dele — ver o comentário em render.js. */
-.cena .paralaxe { transform-origin: 50% 50%; will-change: transform; }