/* ============ retrato.css — a apresentação em telas em pé ============ */
/*
 * O deck é autorado num palco de 1920×1080 que o <deck-stage> encolhe para
 * caber na janela. Num celular em pé isso vira uma faixa de 219 px no meio de
 * uma tela preta, com o corpo de texto chegando ao olho com 5,5 px: não é
 * layout quebrado, é o `Math.min` — não existe escala que salve um palco 16:9
 * numa tela 9:19,5.
 *
 * A saída é um SEGUNDO palco. Em pé, o deck-stage monta um palco de 576 px de
 * largura (ou a da janela, se maior) e altura igual à da janela, e marca
 * `data-orient="retrato"` em si mesmo. Esta folha é o layout desse palco.
 *
 * POR QUE 576. É a largura em que a tipografia já autorada volta a ter tamanho
 * de leitura de perto, sem tocar em nenhum dos 128 `font-size` dos slides: num
 * iPhone de 390 a escala vira 0,677, e o corpo de 24 px do slide chega ao olho
 * com 16 px — o que um notebook entrega hoje. Mudar a largura do palco faz o
 * trabalho que mudar 128 números faria.
 *
 * O QUE ESTA FOLHA FAZ, ENTÃO, é só o que a escala não resolve: espaçamento
 * (120 px de margem lateral comem 21% de um palco de 576), colapso de grade
 * para uma coluna, e o teto dos tamanhos de display, que crescem com o palco e
 * não com o texto.
 *
 * SEM `!important`. Os slides já não trazem `grid-template-columns`, `height`
 * nem `font-size` em atributo — trazem os arquétipos (`.split`,
 * `.grid-cards`, `.divider__lead`) e o valor de projeto em custom property
 * (`--split`, `--cover-h1`, `--shot-w`). Atributo style vence folha; custom
 * property não. É por isso que tudo aqui ganha por especificidade normal.
 *
 * Escopo: TUDO pende de `deck-stage[data-orient="retrato"]`, dentro de
 * `@media screen`. Em paisagem e no papel esta folha não existe.
 */

/* A impressão continua saindo pelo palco autorado, um slide por página em
   1920×1080: um PDF que mudasse de formato conforme a janela de quem mandou
   imprimir seria pior do que o problema que esta folha resolve. O atributo
   data-orient continua valendo durante a impressão — é a media query que
   desliga o layout em pé. */
@media screen {

deck-stage[data-orient="retrato"]{
  /* Respiro: proporcional ao palco novo, não ao antigo. */
  --pad-x:26px; --pad-top:26px;
  /* A barra de navegação é fixa e flutua sobre o fim do slide — sem esta
     folga o último bloco de cada slide fica atrás dela. A conta é em px do
     PALCO, que num celular de 375px aparece a ~65%: a barra ocupa 72px de
     tela (~110 de palco). Com 96 o fim de "Números" e da capa ficava atrás dela. */
  --pad-bottom:140px;
  --gap-title:24px; --gap-item:16px;

  /* Tipografia: só o que cresce com a LARGURA do palco precisa de teto. O
     corpo de texto não entra aqui de propósito — ver o cabeçalho. */
  --type-title:42px;
  --type-subtitle:30px;
  --type-lead:26px;
  --type-mega:64px;
}

/* ── Palavra longa em coluna estreita ─────────────────────────────────────
   Numa coluna de 576 uma palavra como "Responsabilidades" fura o cartão que a
   contém. O documento é `lang="pt-BR"`, então a separação silábica sai certa;
   `break-word` fica como última rede, para o caso de uma palavra que nem
   hifenizada caiba. */
deck-stage[data-orient="retrato"] section{hyphens:auto;}
deck-stage[data-orient="retrato"] section h1,
deck-stage[data-orient="retrato"] section h2,
deck-stage[data-orient="retrato"] section h3,
deck-stage[data-orient="retrato"] section p,
deck-stage[data-orient="retrato"] section li,
deck-stage[data-orient="retrato"] section td,
deck-stage[data-orient="retrato"] section .tx,
deck-stage[data-orient="retrato"] section .rowname{overflow-wrap:break-word;}

/* ── O slide deixa de ser caixa travada e vira coluna que rola ────────────
   O palco em pé tem a altura da janela, não a de um 16:9 virado. Slide que
   não cabe rola; o que cabe continua uma tela cheia (o `min-height:100%`). */
deck-stage[data-orient="retrato"] > section[data-deck-active]{
  overflow-y:auto;
  overscroll-behavior:contain;
}
deck-stage[data-orient="retrato"] .frame,
deck-stage[data-orient="retrato"] .cover,
deck-stage[data-orient="retrato"] .divider{
  position:relative;      /* relative, não static: os círculos de fundo
                             (.deco, inset:0) precisam de âncora aqui, senão
                             se prendem no <section> e param na primeira tela */
  inset:auto;
  min-height:100%;
  height:auto;
}
/* A capa tem respiro fixo em styles.css, fora do --pad-bottom: em pé os itens
   do rodapé dela ficavam atrás da barra de navegação. */
deck-stage[data-orient="retrato"] .cover{padding-bottom:var(--pad-bottom);}

/* A marca do licenciado sai do canto absoluto e vira a primeira linha da
   coluna — em pé não há canto sobrando. */
deck-stage[data-orient="retrato"] .corner-mark{
  position:static;
  justify-content:space-between;
  margin-bottom:22px;
}

/* ── Grades: uma coluna ───────────────────────────────────────────────────
   46 dos 55 blocos de grade do deck são o mesmo arquétipo — texto de um lado,
   tela de produto do outro. Todos viram coluna. */
deck-stage[data-orient="retrato"] .split{
  grid-template-columns:minmax(0,1fr);
  gap:var(--gap-item);
  align-items:start;
}
deck-stage[data-orient="retrato"] .split--fill{height:auto;}

/* A tela de produto vai sempre DEPOIS: metade dos arquétipos a põe à esquerda
   e a outra metade à direita, e empilhados na ordem do DOM o leitor cairia ora
   no texto, ora na tela. Ela precisa da frase que a explica antes. Slides cuja
   imagem é o argumento (as capas de relatório, as telas com a marca do
   licenciado) mantêm a ordem que o autor deu. */
deck-stage[data-orient="retrato"] .split > :is(.bwin, .live, .imgslot, .snap-wrap),
deck-stage[data-orient="retrato"] .split > *:has(.bwin, .live, .imgslot, .snap-wrap){
  order:2;
}

/* Cartões: quatro colunas viram duas — são curtos, e um por linha viraria uma
   coluna de oito telas. Três viram UMA: são os cartões de assessment, cujo
   cabeçalho (ícone + título) não cabe em meia largura. */
deck-stage[data-orient="retrato"] .grid-cards{
  gap:var(--gap-item);
  align-items:stretch;
}
deck-stage[data-orient="retrato"] .grid-cards--4{grid-template-columns:repeat(2,minmax(0,1fr));}
deck-stage[data-orient="retrato"] .grid-cards--3,
deck-stage[data-orient="retrato"] .grid-cards--2{grid-template-columns:minmax(0,1fr);}

/* Numa grade que virou UMA coluna, um item que atravessava duas passa a criar
   uma coluna implícita — que rouba a largura da coluna real e espreme tudo. */
deck-stage[data-orient="retrato"] .split .span-2,
deck-stage[data-orient="retrato"] .split .span-3,
deck-stage[data-orient="retrato"] .grid-cards--2 .span-2,
deck-stage[data-orient="retrato"] .grid-cards--3 .span-2,
deck-stage[data-orient="retrato"] .grid-cards--3 .span-3,
deck-stage[data-orient="retrato"] .grid-cards--4 .span-3{grid-column:auto;}

/* O número gigante e o título da divisória, lado a lado em paisagem. */
deck-stage[data-orient="retrato"] .divider__lead{
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}

/* ── Teto dos tamanhos de display ─────────────────────────────────────────
   Estes crescem com a largura do palco, não com o texto: numa coluna de 576
   um título de 106 px não cabe em nenhuma quebra. */
deck-stage[data-orient="retrato"] .cover h1{font-size:46px; line-height:1.05;}
deck-stage[data-orient="retrato"] .cover h2{font-size:40px; line-height:1.06;}
deck-stage[data-orient="retrato"] .cover p{font-size:24px;}
deck-stage[data-orient="retrato"] .divider .dnum{font-size:96px;}
deck-stage[data-orient="retrato"] .divider .dtitle{font-size:44px; max-width:none;}
deck-stage[data-orient="retrato"] .divider .dsub{font-size:24px; max-width:none;}
deck-stage[data-orient="retrato"] .divider .dkick{font-size:18px; margin-bottom:14px;}
deck-stage[data-orient="retrato"] .s-title{max-width:none;}
deck-stage[data-orient="retrato"] .s-sub{max-width:none;}
deck-stage[data-orient="retrato"] .stat-num{font-size:52px;}
deck-stage[data-orient="retrato"] .stat-num span{font-size:.5em;}
deck-stage[data-orient="retrato"] .cover .wl-logo-img{max-height:56px; max-width:260px;}
deck-stage[data-orient="retrato"] .card{padding:22px 24px;}
deck-stage[data-orient="retrato"] .contact-line{font-size:22px;}

/* ── Fileiras que vêm de classe ───────────────────────────────────────────
   As duas instituições da validação científica e as capturas com a marca do
   licenciado: em pé, empilham. */
/* O mural de clientes é uma grade de 7 colunas com altura mínima de 420 px.
   Em pé isso dá 21 logotipos de 45 px de largura dentro de um cartão que sobra
   vazio: três colunas dobram o tamanho de cada marca, e a altura mínima sai
   para o cartão encostar no conteúdo. */
deck-stage[data-orient="retrato"] .cmural{
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:30px 20px;
  min-height:0;
}
deck-stage[data-orient="retrato"] .cmural img{max-height:64px;}
deck-stage[data-orient="retrato"] .cmural img[data-folga]{max-height:120px; margin:-28px 0;}

deck-stage[data-orient="retrato"] .valid-orgs{flex-direction:column; gap:28px;}
deck-stage[data-orient="retrato"] .valid-orgs img{height:auto; max-height:118px; max-width:76%;}
deck-stage[data-orient="retrato"] .valid-orgs__sep{width:64%; height:1px;}
/* ── Duas representações trocadas em pé ───────────────────────────────────
   Slide "Na prática": as três capturas de 1600×900 chegariam a 355 px de
   largura, e a marca — que é o argumento do slide — sumiria. Entra no lugar a
   tela de login recriada em marcação, no tamanho do aparelho. O interruptor
   continua o mesmo, então a demonstração do white-label não se perde.
   O painel e a capa do relatório ficam só no desktop: decisão de conteúdo.

   Slide "Duas formas": o organograma é um SVG de viewBox 1680×330 — numa
   coluna de 576 vira uma tira de 103 px com texto de 4 px. A árvore desce em
   vez de atravessar. */
deck-stage[data-orient="retrato"] .wlm-row{display:none;}
deck-stage[data-orient="retrato"] .wlm-login{display:flex;}
deck-stage[data-orient="retrato"] .lic-split__svg{display:none;}
deck-stage[data-orient="retrato"] .lic-split__vert{display:flex;}
deck-stage[data-orient="retrato"] .planos,
deck-stage[data-orient="retrato"] .lic-grid{grid-template-columns:minmax(0,1fr); gap:16px;}

/* ── Telas de produto ─────────────────────────────────────────────────────
   A tela de produto JÁ é responsiva: o shell V3 colapsa sozinho abaixo de
   768 px, e dentro do palco de 576 o iframe recebe exatamente isso. O que
   muda aqui é só a moldura — sangria total, porque uma janela de navegador
   com margem dos dois lados desperdiça a largura que a tela precisa. */
deck-stage[data-orient="retrato"] .bwin{
  margin-left:calc(var(--pad-x) * -1);
  margin-right:calc(var(--pad-x) * -1);
  border-radius:0;
  border-left:0; border-right:0;
}
deck-stage[data-orient="retrato"] .bwin__bar{height:38px; padding:0 14px;}
deck-stage[data-orient="retrato"] .bwin__url{font-size:13px; height:24px;}
/* Em paisagem o quadro tem a proporção da captura (1400×900). Em pé o quadro
   é SOLTO: ele recebe a altura do documento de dentro (o embeds-altura.js
   mede e aplica) e o slide inteiro rola de uma vez. Rolar dentro de uma caixa
   dentro de um slide que também rola é o pior gesto que existe num celular —
   o dedo entra no quadro e a página para de responder.

   Os 660px abaixo são só o estado inicial, até a medida chegar. */
deck-stage[data-orient="retrato"] .bwin .snap-wrap,
deck-stage[data-orient="retrato"] .live,
deck-stage[data-orient="retrato"] .bwin .snap-wrap--1020{
  aspect-ratio:auto;
  height:660px;
  overflow:hidden;
}

/* Quando a medida bate no teto (a Sobreposição de Mapas é um relatório de
   7300 px, não uma lista que dê para cortar), a moldura avisa que continua
   abaixo em vez de terminar num corte seco. */
deck-stage[data-orient="retrato"] .snap-wrap[data-embed-corte]::after,
deck-stage[data-orient="retrato"] .live[data-embed-corte]::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 88%);
  pointer-events:none;
}
deck-stage[data-orient="retrato"] .bwin .live__hint{bottom:14px;}
/* O iframe é um documento à parte: ele recebe como viewport a largura que o
   PALCO lhe dá (576), monta o layout de 576 e só então é reduzido junto com o
   palco — texto de app chegando a 9 px. Aqui o quadro pede ao iframe a largura
   real do aparelho (576 × a escala = 390 num iPhone) e o amplia de volta pelo
   inverso: o documento de dentro monta o layout de CELULAR e aparece 1:1.
   --deck-scale vem do _fit() do deck-stage. */
deck-stage[data-orient="retrato"] .snap-wrap iframe,
deck-stage[data-orient="retrato"] .live iframe{
  width:calc(100% * var(--deck-scale, 1));
  height:calc(100% * var(--deck-scale, 1));
  transform:scale(calc(1 / var(--deck-scale, 1)));
  transform-origin:top left;
}

/* ── Matriz de risco: 6 colunas não colapsam, então rolam ─────────────────
   A leitura da matriz É a comparação entre colunas; empilhar destruiria o
   que ela mostra. Larguras fixas + rolagem horizontal preservam a grade e
   mantêm o texto legível. */
deck-stage[data-orient="retrato"] .matrix{
  grid-template-columns:132px repeat(5,104px);
  overflow-x:auto;
  padding-bottom:8px;
  min-width:0;
}
deck-stage[data-orient="retrato"] .matrix .cell{min-height:60px; font-size:18px;}
deck-stage[data-orient="retrato"] .matrix .axis{font-size:16px;}
/* A primeira coluna gruda: rolando para o lado, a pessoa continua sabendo de
   que linha é a célula que está olhando. `6n+1` porque a matriz tem seis
   colunas e os filhos entram em ordem — canto, cinco cabeçalhos, e depois
   rótulo + cinco células por linha. */
deck-stage[data-orient="retrato"] .matrix > *:nth-child(6n+1){
  position:sticky; left:0; z-index:1;
  background:var(--slate-100);
  box-shadow:6px 0 8px -6px rgba(11,18,32,.18);
}

/* ── Tabela de risco ──────────────────────────────────────────────────────
   São duas, de formatos diferentes. A de 4 colunas (fator + 3 leituras) cabe
   em pé só apertando. A de 7 (fator + colaboradores vs. RH em três eixos)
   não cabe de jeito nenhum: cada linha vira um cartão, e cada célula ganha o
   rótulo que estava no cabeçalho, agora removido. `:has(.subhd)` separa as
   duas — só a de 7 colunas tem o sub-cabeçalho Colab./RH. */
deck-stage[data-orient="retrato"] .rtable{border-spacing:4px;}
deck-stage[data-orient="retrato"] .rtable .rowname{font-size:17px; padding-right:10px;}
deck-stage[data-orient="retrato"] .rtable .colhd{font-size:16px;}
deck-stage[data-orient="retrato"] .rtable .rc{font-size:15px; height:48px;}

deck-stage[data-orient="retrato"] .rtable:has(.subhd){display:block; border-spacing:0;}
deck-stage[data-orient="retrato"] .rtable:has(.subhd) thead{display:none;}
deck-stage[data-orient="retrato"] .rtable:has(.subhd) tbody{display:block;}
deck-stage[data-orient="retrato"] .rtable:has(.subhd) tr{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  background:#fff; border:1px solid var(--slate-200); border-radius:12px;
  padding:14px 16px; margin-bottom:10px;
}
deck-stage[data-orient="retrato"] .rtable:has(.subhd) .rowname{
  grid-column:1 / -1; font-size:20px; padding:0 0 4px;
}
deck-stage[data-orient="retrato"] .rtable:has(.subhd) .rc{
  height:auto; padding:9px 6px; border-radius:8px; font-size:16px;
}
deck-stage[data-orient="retrato"] .rtable:has(.subhd) .rc::before{
  display:block; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; opacity:.82; margin-bottom:3px;
}
deck-stage[data-orient="retrato"] .rtable:has(.subhd) td:nth-child(2)::before{content:"Prob. · colab.";}
deck-stage[data-orient="retrato"] .rtable:has(.subhd) td:nth-child(3)::before{content:"Prob. · RH";}
deck-stage[data-orient="retrato"] .rtable:has(.subhd) td:nth-child(4)::before{content:"Sever. · colab.";}
deck-stage[data-orient="retrato"] .rtable:has(.subhd) td:nth-child(5)::before{content:"Sever. · RH";}
deck-stage[data-orient="retrato"] .rtable:has(.subhd) td:nth-child(6)::before{content:"Risco · colab.";}
deck-stage[data-orient="retrato"] .rtable:has(.subhd) td:nth-child(7)::before{content:"Risco · RH";}

/* O interruptor da capa (slide "Sua logomarca") tem alvo de toque de 32 px em
   paisagem, onde o ponteiro é fino. No dedo, 44. */
deck-stage[data-orient="retrato"] .cvr-switch{padding:10px 10px 10px 0;}

/* O botão "Ocultar slides" comanda o trilho de miniaturas, que não existe em
   pé. A folha do deck já o escondia abaixo de 640 px; em pé ele sai sempre. */
html:has(deck-stage[data-orient="retrato"]) .rail-toggle{display:none;}

}