/* =========================================================================
   DECK DA REUNIÃO DE 09/11 · PRAGMA comercial · palco 16:9 de 1920 x 1080
   -------------------------------------------------------------------------
   Base: chassi navegável aprovado
     .claude/skills/slide-creator/templates/runtime/navegavel-output-chassis.html
     (scroll-snap, nav-bar com setas, pontos e contador, teclado, fade ao entrar).
   Tokens: workspace/businesses/pragma/design-system/pragma-tokens.css (valores exatos).
   Direção, escala e regras de uso: ../_fonte/DESIGN.md
   Toda medida de conteúdo está em px do palco (1920 x 1080); o JS escala o palco
   inteiro para caber na janela, com faixas nas sobras.
   ========================================================================= */

@font-face{
  font-family:'Inter';
  src:url('fontes/Inter-Variable.ttf') format('truetype');
  font-weight:100 900;font-style:normal;font-display:block;
}

:root{
  /* tokens PRAGMA comerciais, cópia exata de pragma-tokens.css */
  --dark:#1A1A2E;
  --dark-mid:#22223C;
  --dark-light:#2E2E4E;
  --orange:#E8600A;
  --orange-light:#F07A2C;
  --orange-faint:rgba(232,96,10,.08);
  --white:#FAFAFA;
  --grey:#C9C9D4;
  --font-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* nomes que o chassi usa, apontando para os tokens */
  --accent:var(--orange);
  --accent-light:var(--orange-light);
  --accent-faint:var(--orange-faint);
  --font-body:var(--font-text);

  /* derivados dos tokens (transparência sobre o token, nenhum hex novo) */
  --linha:rgba(250,250,250,.14);          /* hairline de separação */
  --linha-forte:rgba(250,250,250,.38);    /* traço de diagrama */
  --laranja-traco:rgba(232,96,10,.72);    /* tracejado do mockup */
  --faixa:#0F0F1B;                        /* fallback da faixa */
  --faixa:color-mix(in srgb,var(--dark) 58%,black); /* faixas laterais: o azul escurecido */

  /* palco e margens seguras (px do palco) */
  --palco-w:1920px;
  --palco-h:1080px;
  --mx:120px;          /* margem lateral */
  --mt:128px;          /* margem de cima (o selo mora acima dela) */
  --mb:144px;          /* margem de baixo (a barra de navegação mora abaixo dela) */
  --raio:4px;

  /* escala tipográfica pensada para tela compartilhada no Meet (px a 1080) */
  --fs-display:112px;  /* capa e pergunta */
  --fs-titulo:72px;    /* título de slide */
  --fs-destaque:48px;  /* frase de apoio forte, valor de fato */
  --fs-corpo:34px;     /* corpo */
  --fs-apoio:28px;     /* mínimo absoluto de qualquer texto no palco */
  --fs-numero:160px;   /* número protagonista */

  /* preenchidos pelo deck.js */
  --s:1;
  --ox:0px;
  --oy:0px;
}

/* ===== BASE (chassi) =================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--faixa);color:var(--white);font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;overflow:hidden;font-optical-sizing:auto;
  font-feature-settings:"cv11","ss01"}
img,video{display:block;max-width:100%}
ul,ol{list-style:none}
b,strong{font-weight:700;color:var(--white)}

/* ===== CONTAINER DE SCROLL-SNAP (chassi) =============================== */
.deck{position:relative;height:100vh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.deck::-webkit-scrollbar{width:0;height:0}
.deck{scrollbar-width:none}

/* ===== SLIDE + PALCO ==================================================== */
/* O slide ocupa a janela (como no chassi); o palco 16:9 fica no centro, escalado. */
.slide{position:relative;height:100vh;width:100%;scroll-snap-align:start;
  scroll-snap-stop:always;overflow:hidden;background:var(--faixa)}
.palco{position:absolute;left:50%;top:50%;width:var(--palco-w);height:var(--palco-h);
  transform:translate(-50%,-50%) scale(var(--s));transform-origin:center center;
  background:var(--dark);overflow:hidden;padding:var(--mt) var(--mx) var(--mb)}
.notas{display:none}

/* Fade + leve subida ao entrar (contrato do chassi). Aplicado aos filhos do
   palco, porque o palco já usa transform para escalar. */
.palco > *{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.slide.is-visible .palco > *{opacity:1;transform:none}
.slide.is-visible .palco > *:nth-child(2){transition-delay:.08s}
.slide.is-visible .palco > *:nth-child(3){transition-delay:.16s}
.slide.is-visible .palco > *:nth-child(4){transition-delay:.24s}
.slide.is-visible .palco > *:nth-child(5){transition-delay:.32s}
html.render .palco > *{opacity:1 !important;transform:none !important;transition:none !important}
html.render .deck{scroll-behavior:auto}
html.render .dot-btn{transition:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .deck{scroll-behavior:auto}
  .palco > *{opacity:1;transform:none;transition:none}
}

/* ===== SELO (chassi, preso ao canto do palco) =========================== */
.selo{position:fixed;z-index:30;left:calc(var(--ox) + var(--mx) * var(--s));
  top:calc(var(--oy) + 46px * var(--s));transform:scale(var(--s));transform-origin:top left;
  font-family:var(--font-text);font-weight:800;font-size:30px;line-height:1;
  letter-spacing:.04em;color:var(--white);pointer-events:none}
.selo .dot{color:var(--orange)}

/* ===== NAV-BAR (chassi; mesmo mecanismo, desenho sóbrio) ================ */
.navbar{position:fixed;z-index:40;left:calc(var(--ox) + var(--palco-w) * var(--s) / 2);
  bottom:calc(var(--oy) + 30px * var(--s));transform:translateX(-50%) scale(var(--s));
  transform-origin:bottom center;display:flex;align-items:center;gap:18px;
  padding:8px 14px;border-radius:10px;background:var(--dark-mid);border:1px solid var(--linha);
  transition:opacity .4s ease}
.nav-arrow{width:44px;height:44px;border-radius:8px;border:1px solid var(--linha);cursor:pointer;
  background:transparent;color:var(--white);font-family:var(--font-text);font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s}
.nav-arrow:hover{background:var(--orange);border-color:var(--orange);color:var(--dark)}
.nav-arrow:focus-visible,.dot-btn:focus-visible{outline:2px solid var(--orange-light);outline-offset:3px}
.nav-arrow:disabled{opacity:.3;cursor:default;background:transparent;color:var(--white);border-color:var(--linha)}
.dots{display:flex;gap:10px;align-items:center}
.dot-btn{width:10px;height:10px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(250,250,250,.28);transition:background .2s,transform .2s}
.dot-btn:hover{background:var(--grey)}
.dot-btn.active{background:var(--orange);transform:scale(1.35)}
.counter{font-family:var(--font-text);font-weight:600;font-size:22px;color:var(--grey);
  min-width:4.6ch;text-align:center;font-variant-numeric:tabular-nums}
body.tela-cheia.ocioso{cursor:none}
body.tela-cheia.ocioso .navbar{opacity:0;pointer-events:none}
html.limpo .navbar{display:none}

/* ===== TIPOGRAFIA ======================================================= */
.rotulo{font-size:var(--fs-apoio);font-weight:600;line-height:1.3;color:var(--grey);margin-bottom:22px}
.display{font-size:var(--fs-display);font-weight:800;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.titulo{font-size:var(--fs-titulo);font-weight:800;line-height:1.06;letter-spacing:-.02em;text-wrap:balance;max-width:24ch}
.destaque{font-size:var(--fs-destaque);font-weight:700;line-height:1.16;letter-spacing:-.01em;text-wrap:balance}
.corpo{font-size:var(--fs-corpo);font-weight:400;line-height:1.38;color:var(--grey);max-width:38ch;text-wrap:pretty}
.apoio{font-size:var(--fs-apoio);font-weight:500;line-height:1.36;color:var(--grey)}
.numero{font-size:var(--fs-numero);font-weight:800;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.laranja{color:var(--orange)}
.branco{color:var(--white)}
.titulo + .corpo,.display + .corpo{margin-top:32px}
.ilustrativo{display:inline-block;font-size:var(--fs-apoio);font-weight:600;line-height:1;color:var(--grey);
  padding:10px 16px;border:1.5px solid var(--linha-forte);border-radius:6px}

/* ===== MÍDIA (moldura comum a vídeo e imagem) =========================== */
.midia{position:relative;overflow:hidden;background:var(--dark-mid);border-radius:var(--raio);aspect-ratio:16/9}
.midia > video,.midia > img,.midia > .mk-midia{width:100%;height:100%;object-fit:cover}
.midia > .mockup{position:absolute;inset:0}
/* desenho técnico dentro da moldura: inteiro, sem corte, sobre o azul */
.midia.desenho{background:var(--dark)}
.midia.desenho > img{object-fit:contain;padding:28px}

/* ===== COMPONENTE: CAPA ================================================= */
.capa{display:flex;flex-direction:column;justify-content:center}
.capa .capa-texto{position:relative;z-index:2;max-width:960px}
.capa .display{max-width:12.5ch}
.capa .capa-sub{font-size:var(--fs-corpo);line-height:1.38;color:var(--grey);margin-top:36px;max-width:30ch}
.capa .capa-meta{font-size:var(--fs-apoio);font-weight:500;color:var(--grey);margin-top:56px;
  padding-top:22px;border-top:1.5px solid var(--linha);max-width:760px}
.capa .capa-ilustra{position:absolute;z-index:1;right:-36px;top:296px;width:960px;height:auto}

/* ===== COMPONENTE: TÍTULO + MÍDIA 16:9 GRANDE =========================== */
/* A mídia encosta na borda do palco (sangra); .invertido troca os lados. */
.titulo-midia{display:grid;grid-template-columns:500px 1fr;column-gap:56px;align-items:center;padding-right:0}
.titulo-midia .titulo{font-size:60px;max-width:none}
.titulo-midia .corpo{font-size:30px;max-width:none}
.titulo-midia .midia{width:1244px;justify-self:end;border-radius:var(--raio) 0 0 var(--raio)}
.titulo-midia.invertido{grid-template-columns:1fr 500px;padding-right:var(--mx);padding-left:0}
.titulo-midia.invertido .midia{order:-1;justify-self:start;border-radius:0 var(--raio) var(--raio) 0}

/* ===== COMPONENTE: CELULAR COM VÍDEO VERTICAL (Reels) =================== */
.celular-slide{display:grid;grid-template-columns:1fr auto;column-gap:96px;align-items:center}
.celular-slide .titulo{max-width:16ch}
.celulares{display:flex;gap:40px;align-items:center}
.celular{position:relative;padding:14px;border-radius:58px;background:black;border:2px solid var(--dark-light)}
.celular > video,.celular > img,.celular > .mockup,.celular > .mk-midia{display:block;width:432px;aspect-ratio:9/16;
  border-radius:44px;object-fit:cover;background:var(--dark-mid)}
.celular::before{content:"";position:absolute;z-index:2;left:50%;top:30px;width:22px;height:22px;
  margin-left:-11px;border-radius:50%;background:black}
.celulares.dois .celular > video,.celulares.dois .celular > img,.celulares.dois .celular > .mockup{width:380px}
.celulares.tres .celular > video,.celulares.tres .celular > img,.celulares.tres .celular > .mockup{width:320px}
.celular > .mockup{display:flex;padding:72px 30px 48px;justify-content:center}
.celular > .mockup .mk-arquivo{font-size:28px}
.celular > .mockup .mk-texto{font-size:28px}

/* ===== COMPONENTE: MÍDIA COM 3 FATOS ==================================== */
.midia-fatos{display:grid;grid-template-columns:1032px 1fr;grid-template-rows:auto 1fr;column-gap:72px;row-gap:44px}
.midia-fatos .mf-cabeca{grid-column:1 / -1}
.midia-fatos .titulo{max-width:30ch}
.midia-fatos .midia{width:1032px;align-self:start}
.fatos{align-self:start}
.fato{padding:24px 0 26px;border-top:1.5px solid var(--linha)}
.fato:last-child{border-bottom:1.5px solid var(--linha)}
.fato dt{font-size:var(--fs-apoio);font-weight:600;color:var(--grey)}
.fato dd{font-size:var(--fs-destaque);font-weight:800;line-height:1.08;letter-spacing:-.015em;margin-top:8px;
  font-variant-numeric:tabular-nums;color:var(--white)}
.fato dd + p{font-size:var(--fs-apoio);color:var(--grey);margin-top:6px;line-height:1.3}
.fato.chave dd{color:var(--orange)}

/* ===== COMPONENTE: COTAS (número antes e depois como linha de cota) ===== */
/* Comprimento proporcional ao valor: --v = valor / maior valor da escala.  */
.cotas{display:grid;gap:30px;width:100%}
.cotas-grupo + .cotas-grupo{margin-top:14px;padding-top:30px;border-top:1.5px solid var(--linha)}
.cotas-nome{font-size:var(--fs-apoio);font-weight:600;color:var(--grey);margin-bottom:10px}
.cota-linha{display:grid;grid-template-columns:150px 1fr;align-items:end;column-gap:28px}
.cota-quando{font-size:var(--fs-apoio);font-weight:600;color:var(--grey);padding-bottom:2px}
.cota-trilho{position:relative;height:86px}
.cota{position:absolute;left:0;bottom:12px;width:calc(var(--v,1) * 100%);height:0;
  border-top:3px solid var(--white);color:var(--white)}
.cota::before,.cota::after{content:"";position:absolute;top:-17px;width:3px;height:32px;background:currentColor;transform:rotate(45deg)}
.cota::before{left:-1px}
.cota::after{right:-1px}
.cota .faixa-ate{position:absolute;top:-3px;left:100%;width:calc(var(--extra,0) * 100%);height:0;border-top:3px dashed currentColor}
.cota .faixa-ate::after{content:"";position:absolute;right:-1px;top:-17px;width:3px;height:32px;background:currentColor;transform:rotate(45deg)}
.cota-valor{position:absolute;left:0;bottom:22px;white-space:nowrap;font-size:var(--fs-destaque);font-weight:800;
  letter-spacing:-.015em;line-height:1;font-variant-numeric:tabular-nums}
.cota-valor small{font-size:var(--fs-apoio);font-weight:600;color:var(--grey);letter-spacing:0;margin-left:14px}
.cota.laranja{border-top-color:var(--orange);color:var(--orange)}
.cota.laranja .cota-valor{color:var(--orange)}

/* ===== COMPONENTE: FLUXO DE ETAPAS COM DECISÃO HUMANA =================== */
/* Etapa comum: nó quadrado. Etapa com .decide: losango laranja (ponto de controle). */
.fluxo{display:grid;grid-template-columns:repeat(var(--n,6),1fr);margin-top:80px}
.fluxo .etapa{position:relative}
.fluxo .etapa b{display:block;font-size:36px;font-weight:800;letter-spacing:-.01em;line-height:1.1;height:46px}
.fluxo .no{position:relative;display:block;height:44px;margin:22px 0 24px}
.fluxo .no::before{content:"";position:absolute;left:0;top:50%;width:22px;height:22px;margin-top:-11px;
  border:3px solid var(--white);background:var(--dark);z-index:2}
.fluxo .etapa:not(:last-child) .no::after{content:"";position:absolute;left:22px;right:24px;top:50%;
  height:3px;margin-top:-1.5px;background:var(--linha-forte)}
/* ponta de seta desenhada por recorte (sem borda lateral) */
.fluxo .etapa:not(:last-child) .no > i{position:absolute;right:18px;top:50%;width:14px;height:20px;margin-top:-10px;z-index:2;
  background:var(--linha-forte);clip-path:polygon(0 0,34% 0,100% 50%,34% 100%,0 100%,66% 50%)}
.fluxo .etapa > span:not(.no){display:block;font-size:var(--fs-apoio);line-height:1.3;color:var(--grey);max-width:11ch}
.fluxo .etapa.decide .no::before{width:30px;height:30px;margin-top:-15px;left:-4px;border:0;
  background:var(--orange);transform:rotate(45deg)}
.fluxo .etapa.decide em{display:block;font-style:normal;font-size:var(--fs-apoio);font-weight:700;
  color:var(--orange);margin-top:14px;line-height:1.25;max-width:11ch}
.fluxo-bloco{--n:6}
.fluxo-retorno{position:relative;margin:48px 0 0 10px;width:calc(100% * (var(--n) - 1) / var(--n) + 3px);height:52px;
  border:3px dashed var(--linha-forte);border-top:0}
.fluxo-retorno::before{content:"";position:absolute;left:-11.5px;top:-16px;width:20px;height:14px;
  background:var(--linha-forte);clip-path:polygon(0 100%,50% 0,100% 100%,76% 100%,50% 40%,24% 100%)}
.fluxo-retorno p{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);padding:0 22px;
  background:var(--dark);font-size:var(--fs-apoio);font-weight:600;color:var(--grey);white-space:nowrap}

/* ===== COMPONENTE: SEGUNDO CÉREBRO (fundação que sustenta as etapas) ==== */
.cerebro{display:grid;grid-template-columns:1fr 860px;column-gap:64px;align-items:center}
.cerebro .titulo{max-width:16ch}
.camadas{margin-top:44px}
.camadas li{padding:20px 0 22px;border-top:1.5px solid var(--linha)}
.camadas li:last-child{border-bottom:1.5px solid var(--linha)}
.camadas b{display:block;font-size:34px;font-weight:700;line-height:1.2}
.camadas span{display:block;font-size:var(--fs-apoio);line-height:1.34;color:var(--grey);margin-top:6px}
.camadas li.base b{color:var(--orange)}
.cerebro-figura{position:relative;width:860px;height:720px}
.cerebro-figura img{position:absolute;left:300px;top:40px;width:560px;height:auto}
.chamada{position:absolute;display:flex;align-items:center;gap:16px;white-space:nowrap;
  font-size:var(--fs-apoio);font-weight:700;color:var(--white)}
.chamada::before{content:"";width:var(--traco,80px);border-top:2px solid currentColor;order:var(--lado,0)}
.chamada.esq::before{order:2}
.chamada.base{color:var(--orange)}
.seta-vai,.seta-vem{font-weight:800}

/* ===== COMPONENTE: MATRIZ 2 x 2 (impacto e facilidade) ================== */
/* Eixos e nomes reusados do mapa da mentoria do cohort. */
.matriz-slide{display:grid;grid-template-columns:1fr 840px;column-gap:80px;align-items:center}
.matriz-slide .titulo{max-width:18ch}
.matriz{display:grid;grid-template-columns:1fr;row-gap:16px;width:800px}
.mz-eixo-y,.mz-eixo-x{font-size:var(--fs-apoio);font-weight:700;color:var(--grey)}
.mz-eixo-y{padding-left:26px}
.mz-eixo-x{text-align:end}
.mz-quadro{position:relative;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;width:800px;height:600px}
/* eixos: linhas e pontas desenhadas com fundo e recorte */
.mz-quadro::before{content:"";position:absolute;left:-2px;top:-18px;bottom:-2px;width:2px;background:var(--linha-forte)}
.mz-quadro::after{content:"";position:absolute;left:-2px;right:-18px;bottom:-2px;height:2px;background:var(--linha-forte)}
.mz-quadro .q{position:relative;padding:26px 28px;border:1px solid var(--linha);display:flex;flex-direction:column;gap:12px}
.mz-quadro .q:first-child::before{content:"";position:absolute;left:-10px;top:-30px;width:18px;height:12px;
  background:var(--linha-forte);clip-path:polygon(0 100%,50% 0,100% 100%,78% 100%,50% 42%,22% 100%)}
.mz-quadro .q:last-child::after{content:"";position:absolute;right:-30px;bottom:-10px;width:12px;height:18px;
  background:var(--linha-forte);clip-path:polygon(0 0,100% 50%,0 100%,0 78%,58% 50%,0 22%)}
.mz-quadro .q b{font-size:34px;font-weight:800;line-height:1.1;margin-bottom:4px}
.mz-quadro .q span{font-size:var(--fs-apoio);line-height:1.28;color:var(--grey)}
.mz-quadro .q.alvo{background:var(--orange-faint);border:2px solid var(--orange)}
.mz-quadro .q.alvo b{color:var(--orange)}
.mz-quadro .q.alvo span{color:var(--white)}

/* ===== COMPONENTE: LINHA DO TEMPO DE FASES ============================== */
.fases{display:grid;grid-template-columns:repeat(var(--n,4),1fr);margin-top:84px;position:relative}
.fases::before{content:"";position:absolute;left:0;right:0;top:15px;border-top:3px solid var(--linha-forte)}
.fases li{position:relative;padding:62px 36px 0 0}
.fases li > i{position:absolute;left:0;top:2px;width:28px;height:28px;background:var(--dark);
  border:3px solid var(--white);transform:rotate(45deg)}
.fases li.marco > i{background:var(--orange);border-color:var(--orange)}
.fases b{display:block;font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.fases span{display:block;font-size:var(--fs-apoio);line-height:1.34;color:var(--grey);margin-top:12px;max-width:16ch}
/* faixa de autonomia: o assistente executa cada vez mais; a pessoa sempre confere e decide */
.autonomia{position:relative;margin-top:76px;height:136px;background:var(--dark-mid);border-radius:var(--raio);overflow:hidden}
.autonomia .assistente{position:absolute;inset:0;background:var(--orange);clip-path:polygon(0 76%,100% 30%,100% 100%,0 100%)}
.autonomia p{position:absolute;font-size:var(--fs-apoio);font-weight:700;white-space:nowrap}
.autonomia .rot-humano{left:28px;top:20px;color:var(--white)}
.autonomia .rot-assistente{right:28px;bottom:18px;color:var(--dark)}
.autonomia .rot-fim{right:28px;top:20px;color:var(--white)}

/* ===== COMPONENTE: PERGUNTA CALMA ======================================= */
.pergunta{display:flex;flex-direction:column;justify-content:center}
.pergunta::before{content:"";width:96px;height:6px;background:var(--orange);margin-bottom:56px}
.pergunta .display{font-size:104px;max-width:17ch}
.pergunta .apoio{margin-top:40px;max-width:44ch;font-size:var(--fs-corpo)}

/* ===== COMPONENTE: DEMO ================================================= */
.demo{display:grid;grid-template-columns:560px 1fr;column-gap:64px;align-items:center;padding-right:0}
.demo .rotulo{display:flex;align-items:center;gap:14px;color:var(--white)}
.demo .rotulo i{width:16px;height:16px;background:var(--orange);border-radius:50%}
.demo .titulo{font-size:64px;max-width:none}
.olhar{margin-top:40px}
.olhar li{font-size:30px;line-height:1.3;color:var(--grey);padding:16px 0 18px;border-top:1.5px solid var(--linha)}
.olhar li:last-child{border-bottom:1.5px solid var(--linha)}
.olhar li b{color:var(--white)}
.demo .midia{width:1176px;justify-self:end;border-radius:var(--raio) 0 0 var(--raio)}

/* ===== COMPONENTE: MOCKUP (lacuna a completar pelo Bruno) =============== */
/* Moldura tracejada = "a construir", como no desenho técnico. O deck.js troca
   a moldura pela mídia sozinho quando o arquivo indicado existir. */
.mockup{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:48px 60px;
  border:3px dashed var(--laranja-traco);border-radius:var(--raio);background:var(--dark-mid);color:var(--white)}
.mockup .mk-quem{font-size:var(--fs-apoio);font-weight:700;color:var(--orange)}
.mockup .mk-arquivo{font-size:36px;font-weight:700;line-height:1.2;color:var(--white)}
.mockup .mk-arquivo span{white-space:nowrap}
.mockup .mk-spec{font-size:var(--fs-apoio);line-height:1.3;color:var(--grey)}
.mockup .mk-texto{font-size:30px;line-height:1.36;color:var(--white);max-width:36ch;margin-top:12px}
.mockup.preenchido{border:0;padding:0;background:var(--dark-mid);display:block;overflow:hidden}
.mockup.preenchido > .mk-midia{width:100%;height:100%;object-fit:cover}
.lacuna{color:var(--grey);border-bottom:3px dashed var(--laranja-traco);padding-bottom:2px}
.camadas span.lacuna{display:inline-block}

/* ===== COMPONENTE: APRESENTAÇÃO DE PESSOA (com mockup de foto) ========== */
.pessoa{display:grid;grid-template-columns:560px 1fr;column-gap:88px;align-items:center}
.pessoa .retrato{width:560px;aspect-ratio:4/5;position:relative;border-radius:var(--raio);overflow:hidden;background:var(--dark-mid)}
.pessoa .retrato > .mockup{position:absolute;inset:0}
.pessoa .retrato > img{width:100%;height:100%;object-fit:cover}
.pessoa .nome{font-size:var(--fs-titulo);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.pessoa .papel{font-size:var(--fs-corpo);color:var(--grey);margin-top:16px;max-width:30ch;line-height:1.38}
.pessoa .camadas{max-width:880px}

/* ===== ILUSTRAÇÃO TÉCNICA AVULSA ======================================== */
.ilustra{display:block;height:auto}

/* ===== MODO ENSAIO (tecla N) ============================================ */
body.ensaio-on .deck{width:66vw}
.ensaio{position:fixed;z-index:60;top:0;right:0;width:34vw;height:100vh;overflow:auto;
  background:var(--dark-mid);border-left:1px solid var(--linha);padding:28px 30px 32px;
  font-family:var(--font-text);color:var(--white)}
.ensaio[hidden]{display:none}
.en-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:16px;border-bottom:1px solid var(--linha)}
.en-titulo{font-size:17px;font-weight:700;color:var(--grey)}
.en-relogio{font-size:52px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.en-relogio.atrasado{color:var(--orange)}
.en-bloco{font-size:17px;color:var(--grey);margin-top:14px;line-height:1.4}
.en-slide{font-size:24px;font-weight:700;margin-top:18px;line-height:1.25}
.en-notas{font-size:21px;line-height:1.5;color:var(--white);margin-top:14px}
.en-notas p + p{margin-top:12px}
.en-notas ul{margin-top:10px;padding-left:22px;list-style:disc}
.en-notas li{margin-top:6px}
.en-prox{font-size:17px;color:var(--grey);margin-top:22px;padding-top:14px;border-top:1px solid var(--linha)}
.en-teclas{font-size:15px;color:var(--grey);margin-top:18px;line-height:1.5}