/* ==========================================================================
   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; }