/* mrp.css — componentes do MRP.
   Usado pela apresentação do MRP inteira e pela seção do MRP da apresentação
   geral, que desde 2026-10-01 reaproveita dois slides daqui (o questionário
   navegável e as páginas do relatório). Fora do platform.css porque o resto dos
   decks não usa nada disto.
   Herda os tokens do styles.css: cor da marca, tipografia, sombras. O layout em pé
   (retrato) fica no fim, no mesmo escopo do retrato.css. Tudo em px do palco de
   1920×1080, salvo o diagrama do ciclo, que escala por cqw. */


/* ---------- dica da janela do questionário navegável ---------- */
/* No canto direito ela cobria o "Avançar" do próprio questionário, que fica numa
   barra fixa no rodapé da tela capturada. */
.bwin .live__hint--esq{right:auto; left:16px;}


/* ---------- linha do tempo das seis etapas (abertura da seção) ---------- */
/* Número + nome de cada etapa, ligados por uma linha, em branco sobre o fundo
   escuro do divisor. É o mapa da seção: cada etapa volta no eyebrow dos slides
   seguintes ("Etapa 3 · Acompanhamento"). */
.mrp-opener .dtitle{text-wrap:balance;}

.mrp-tl{
  list-style:none; margin:96px 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
}
.mrp-tl__step{
  position:relative; display:flex; flex-direction:column; gap:22px;
  padding-right:20px;
}
.mrp-tl__n{
  position:relative; z-index:1; flex:none; width:68px; height:68px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-mono); font-weight:700; font-size:28px; line-height:1; color:#fff;
  background:rgba(255,255,255,.10); border:2px solid rgba(255,255,255,.62);
}
/* a linha nasce na borda direita do círculo e morre na esquerda do próximo:
   o `right` é medido da borda do <li>, onde começa a coluna seguinte */
.mrp-tl__step:not(:last-child)::after{
  content:""; position:absolute; top:33px; left:86px; right:16px; height:2px;
  border-radius:1px; background:rgba(255,255,255,.34);
}
.mrp-tl__t{
  font-family:var(--font-display); font-weight:600; font-size:30px; line-height:1.15;
  letter-spacing:-.01em; color:#fff;
}


/* ---------- três folhas A4 reais lado a lado ("O relatório por dentro") ---------- */
/* Cada folha é um iframe de 794×1123 (uma página A4 em px CSS, sem rolagem)
   reduzido por `transform`. transform NÃO muda o tamanho de layout, então a
   folha vive num invólucro que já tem o tamanho REDUZIDO: --pg-s é a escala, e
   largura e altura do invólucro saem dela. 794 × .58 = 460px de largura. */
.mrp-pages{
  --pg-s:.58;
  display:grid; grid-template-columns:repeat(3, calc(794px * var(--pg-s)));
  justify-content:space-between; align-items:start;
}
/* o `.head + *` do styles.css põe um respiro fixo; aqui o bloco desce até o pé
   do slide e a sobra fica entre o título e as folhas */
.head + .mrp-pages{margin-top:auto;}

/* O h2 do .head carrega a margem padrão do navegador (0,83em = 51px em cima e
   embaixo, já que o .head é flex e as margens não colapsam): 105px que, neste
   slide, são altura roubada das folhas. Aqui o título cola no eyebrow. */
.head--tight .s-title{margin:0;}

.mrp-pgcol{display:flex; flex-direction:column; gap:26px; min-width:0;}
.mrp-pg{
  position:relative; flex:none; overflow:hidden; background:#fff; border-radius:4px;
  width:calc(794px * var(--pg-s)); height:calc(1123px * var(--pg-s));
  box-shadow:0 22px 46px -16px rgba(11,18,32,.34), 0 4px 14px rgba(11,18,32,.10), 0 0 0 1px var(--slate-200);
}
.mrp-pg iframe{
  position:absolute; top:0; left:0; width:794px; height:1123px;
  border:0; display:block; background:#fff;
  transform:scale(var(--pg-s)); transform-origin:0 0;
  pointer-events:none;     /* a folha é figura, não tela: o gesto passa para o quadro */
}


/* ---------- ciclo do plano de ação: mapear → priorizar → agir → medir de novo ---------- */
/* Montado em HTML + SVG (nada de PNG: o deck é traduzido e texto não vive em
   imagem). O quadrado é um sistema de 100×100: os quatro nós ficam nos pontos
   cardeais de uma circunferência de raio 35, e as setas do SVG percorrem essa
   mesma circunferência, no sentido horário, de um nó ao seguinte. Os tamanhos
   internos vão em cqw (container-type), então o diagrama inteiro escala junto —
   é o que o deixa legível em pé sem uma segunda versão. */
.mrp-cycle{
  position:relative; width:100%; max-width:880px; margin:0 auto;
  aspect-ratio:1 / 1; container-type:inline-size;
}
.mrp-cycle__ring{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  color:var(--brand);
}
.mrp-cycle__core{
  position:absolute; left:50%; top:50%; width:34%; aspect-ratio:1 / 1;
  transform:translate(-50%,-50%); border-radius:50%;
  display:grid; place-items:center; color:var(--brand);
  background:var(--brand-wash); border:1.5px dashed var(--brand-line);
}
.mrp-cycle__core svg{display:block; width:50%; height:50%;}

.mrp-cycle__node{
  position:absolute; width:30%; height:21%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.3cqw; padding:1.6cqw 1.4cqw; text-align:center;
  background:#fff; border:1px solid var(--slate-200); border-radius:2.6cqw;
  box-shadow:var(--shadow-pop);
}
.mrp-cycle__node--n{left:50%; top:15%;}
.mrp-cycle__node--e{left:85%; top:50%;}
.mrp-cycle__node--s{left:50%; top:85%;}
.mrp-cycle__node--w{left:15%; top:50%;}
.mrp-cycle__node .ic{width:8cqw; height:8cqw; border-radius:2.1cqw;}
/* o número da etapa pousa no canto do cartão, como o .lic-case__n da proposta */
.mrp-cycle__n{
  position:absolute; top:-1.9cqw; left:2.4cqw; width:4.1cqw; height:4.1cqw;
  display:grid; place-items:center; border-radius:1.1cqw;
  background:var(--brand); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:2.2cqw; line-height:1;
}
.mrp-cycle__t{
  font-family:var(--font-display); font-weight:700; font-size:3.5cqw; line-height:1.1;
  letter-spacing:-.015em; color:var(--ink);
}


/* ---------- planos: BASIC e PRO lado a lado (slide "Planos") ---------- */
/* Dois cartões do mesmo molde — identidade, preço, benefícios. O que separa os
   planos é só ênfase: o PRO leva a cor da marca (borda, cabeçalho em tinta da
   marca, ícone sólido), é mais largo e tem os números maiores; o BASIC fica
   neutro e, por ter menos itens, mais baixo — centrado ao lado do PRO.
   A marca nunca vira fundo sólido com texto branco: cada licenciado tem a sua
   cor, e uma marca clara (#ffb119, por exemplo) some sob texto branco. Ela entra
   como tinta (--brand-soft / --brand-wash) com texto escuro, ou como --brand-deep
   (derivada, sempre escura) com texto branco. Tudo em px do palco de 1920×1080.
   Os tamanhos de cada cartão entram por custom property (--plan-*): o PRO só
   redefine os valores, e o bloco "em pé" no fim deste arquivo redefine de novo
   para o palco de 576px — sem repetir propriedade. */
/* o <p> traz margem de baixo do navegador (1em = 34px) que o .head, sendo flex,
   não colapsa: aqui ela é altura roubada dos cartões */
.mrp-plans__sub{max-width:none; margin-bottom:0;}
/* título um degrau abaixo do padrão (62px) para sobrar altura aos cartões; o
   `min()` deixa o retrato, onde o token já cai para 42px, intocado */
.mrp-plans__title{font-size:min(var(--type-title), 56px);}

/* `flex:1` + `align-content:center`: o par de cartões ocupa o que sobra abaixo do
   cabeçalho e fica centrado nele; o respiro mínimo continua sendo o do
   `.head + *` (46px). Sem altura travada — o PRO, mais longo, dita a altura. */
.mrp-plans{
  flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);
  gap:44px; align-items:center; align-content:center;
}

.mrp-plan{
  --plan-px:38px; --plan-chip:56px; --plan-name:42px;
  --plan-price:68px; --plan-x:28px; --plan-cents:30px; --plan-cash:34px;
  position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background:#fff; border:1px solid var(--slate-200); border-radius:20px;
  box-shadow:var(--shadow-card);
}
.mrp-plan__head{
  padding:30px var(--plan-px) 28px;
  background:var(--slate-50); border-bottom:1px solid var(--slate-200);
}
.mrp-plan__id{display:flex; align-items:center; gap:18px;}
.mrp-plan__name{
  margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--plan-name);
  line-height:1.05; letter-spacing:-.02em; color:var(--ink);
}
.mrp-plan__desc{
  margin:14px 0 0; font-size:22px; line-height:1.34; color:var(--slate-600);
  text-wrap:pretty;
}
/* o ícone do cartão: tinta da marca com traço escuro (BASIC); no PRO ele inverte
   para o --brand-deep sólido com traço branco */
.mrp-plan .ic{width:var(--plan-chip); height:var(--plan-chip); background:var(--brand-soft); color:var(--brand-deep);}

/* preço em duas colunas: parcelas à esquerda, à vista à direita, separados por
   um filete — economiza uma linha inteira de altura num cartão que já é o mais
   alto do slide */
.mrp-plan__prices{
  display:flex; align-items:stretch; justify-content:space-between; gap:30px;
  margin-top:22px;
}
/* "12x" pequeno, "R$ 60" grande, ",00" pequeno — alinhados pela linha de base,
   como numa etiqueta de preço. O espaço entre os três spans existe no DOM (texto
   extraível) e some no flex. Algarismos PROPORCIONAIS: em tabular o "1" ocupa a
   largura de um "8" e "R$ 182" sai com um buraco no meio. */
.mrp-price{
  display:flex; align-items:baseline;
  font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-variant-numeric:lining-nums proportional-nums; line-height:1;
}
.mrp-price__x{margin-right:12px; font-size:var(--plan-x); letter-spacing:-.01em; color:var(--slate-600);}
.mrp-price__main{font-size:var(--plan-price); letter-spacing:-.035em;}
.mrp-price__cents{font-size:var(--plan-cents); letter-spacing:-.02em;}
.mrp-plan__term{margin-top:10px; font-size:22px; line-height:1.2; color:var(--slate-600);}

.mrp-plan__cash{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding-left:30px; border-left:1px solid var(--slate-200);
}
.mrp-plan__cash-lbl{font-size:22px; line-height:1.2; color:var(--slate-600);}
.mrp-plan__cash-val{
  font-family:var(--font-display); font-weight:700; font-size:var(--plan-cash); line-height:1.05;
  letter-spacing:-.02em; color:var(--ink); white-space:nowrap;
  font-variant-numeric:lining-nums proportional-nums;
}

/* benefícios: o check é tinta da marca com traço --brand-deep (legível em marca
   clara e escura); o número que decide a compra vai em negrito, como nos .mrow */
.mrp-plan__feats{
  list-style:none; margin:0; padding:26px var(--plan-px) 32px;
  display:grid; gap:13px;
}
.mrp-plan__feats li{display:flex; align-items:flex-start; gap:16px;}
.mrp-plan__ck{
  flex:none; width:32px; height:32px; margin-top:-1px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-deep);
}
.mrp-plan__ck svg{width:19px; height:19px; stroke-width:2.8;}
.mrp-plan__tx{font-size:23px; line-height:1.32; color:var(--slate-700); text-wrap:pretty;}
.mrp-plan__tx b, .mrp-plan__tx .wl-name{font-weight:700; color:var(--ink);}

/* --- PRO: a ênfase --- */
.mrp-plan--pro{
  --plan-px:44px; --plan-chip:60px; --plan-name:50px;
  --plan-price:84px; --plan-x:30px; --plan-cents:38px; --plan-cash:38px;
  border:2px solid var(--brand);
  box-shadow:0 34px 64px -28px color-mix(in srgb, var(--brand) 55%, transparent), 0 8px 22px rgba(11,18,32,.08);
}
.mrp-plan--pro .mrp-plan__head{
  padding-top:32px;
  background:linear-gradient(180deg, var(--brand-soft), var(--brand-wash));
  border-bottom-color:var(--brand-line);
}
.mrp-plan--pro .mrp-plan__feats{padding-bottom:34px;}
.mrp-plan--pro .mrp-plan__cash{border-left-color:var(--brand-line);}
.mrp-plan--pro .ic{background:var(--brand-deep); color:#fff;}


/* ---------- slide "Tecnologia": quatro telas da plataforma em pastas ---------- */
/* Arquétipo do "Campanha": texto à esquerda, tela à direita. Só que a direita
   é uma PILHA de quatro janelas (.tec-janela), cada uma com a sua aba de pasta
   saindo do topo; o item da esquerda ou a aba traz a pasta para a frente
   (pastas.js). Desenho aprovado no canvas "Tecnologia-pastas" (2026-10-07).

   O ESTADO é estático, por atributo: `data-nivel` 0 (frente), 1, 2 e 3 em cada
   janela e `aria-pressed` em cada item. NENHUMA `transition` nessas
   propriedades: neste deck transição em slide que já foi escondido trava e
   congela o valor antigo (ver reveal.js e licenciamento.css). O deslize entre
   os níveis é enfeite, feito pelo pastas.js com a Web Animations API e uma
   trava que cancela a animação — o valor que fica é sempre o daqui.

   Marca: o chip ativo é a marca CHEIA com o ícone em --brand-fg (o texto
   legível sobre a marca que a página injeta: branco, ou o quase-preto do deck
   numa marca clara como #ffb119); o que é tinta da marca sobre fundo claro
   usa --brand-text (a marca, ou o --brand-deep quando ela não dá 4,5:1). */

.tec-itens{display:flex; flex-direction:column; gap:12px;}
.tec-item{
  display:flex; align-items:center; gap:20px; width:100%; margin:0;
  padding:22px 26px; border-radius:16px;
  border:1px solid transparent; background:transparent;
  font:inherit; color:var(--slate-500); text-align:left; cursor:pointer;
}
.tec-item[aria-pressed="true"]{background:var(--brand-wash); border-color:var(--brand-line); color:var(--slate-700);}
.tec-item:focus-visible{outline:3px solid var(--brand-text, var(--brand)); outline-offset:3px;}
.tec-item .ic{color:var(--brand-text, var(--brand));}
.tec-item[aria-pressed="true"] .ic{background:var(--brand); color:var(--brand-fg, #fff);}
.tec-item__tx{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px;}
/* o rótulo curto só aparece em pé: deitado ele já está escrito na aba da pasta */
.tec-item__rotulo{
  display:none; font-family:var(--font-mono); font-size:18px; font-weight:500;
  line-height:1.2; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-600);
}
.tec-item__frase{font-size:24px; line-height:1.34;}
.tec-item__frase b{color:var(--ink); font-weight:700;}

/* A pilha. As quatro janelas ocupam a MESMA célula da grade (grid-area 1/1),
   então a altura vem da janela — barra de 48 + a tela na proporção do
   .snap-wrap — e não de um número fixo. Os 180px de cima são o espaço das
   três pastas de trás: sobem 46, 92 e 138px e encolhem a partir do topo; os
   138 mais a aba da última (≈46px × .88) dão os ~180. */
.tec-pilha{position:relative; display:grid; padding-top:180px; min-width:0;}
.tec-janela{grid-area:1 / 1; position:relative; min-width:0; transform-origin:50% 0;}
.tec-janela[data-nivel="0"]{z-index:4; transform:translateY(0) scale(1);}
.tec-janela[data-nivel="1"]{z-index:3; transform:translateY(-46px) scale(.96);}
.tec-janela[data-nivel="2"]{z-index:2; transform:translateY(-92px) scale(.92);}
.tec-janela[data-nivel="3"]{z-index:1; transform:translateY(-138px) scale(.88);}

.tec-janela[data-nivel="0"] .bwin{box-shadow:0 24px 48px -16px rgba(11,18,32,.30), 0 4px 6px -1px rgba(11,18,32,.10);}
.tec-janela[data-nivel="1"] .bwin{box-shadow:0 10px 24px -12px rgba(11,18,32,.22);}
.tec-janela[data-nivel="2"] .bwin{box-shadow:0 6px 16px -10px rgba(11,18,32,.18);}
.tec-janela[data-nivel="3"] .bwin{box-shadow:0 4px 12px -8px rgba(11,18,32,.15);}
.tec-janela:not([data-nivel="0"]) .bwin__bar{background:var(--slate-200);}
/* véu escuro leve nas de trás — por cima de tudo da janela, inclusive a dica */
.tec-veu{position:absolute; inset:0; z-index:3; background:var(--ink); opacity:0; pointer-events:none;}
.tec-janela[data-nivel="1"] .tec-veu{opacity:.05;}
.tec-janela[data-nivel="2"] .tec-veu{opacity:.10;}
.tec-janela[data-nivel="3"] .tec-veu{opacity:.15;}

/* A aba da pasta: fora do .bwin (que corta o que passa da borda arredondada),
   pendurada no topo da janela. Cada pasta tem a sua posição, para as quatro
   abas ficarem à mostra com a pilha montada, sem se tocar em NENHUMA ordem
   (as de trás encolhem até .88 a partir do centro da janela). O -1px de baixo cobre a borda de
   cima da janela: a aba da frente emenda na barra, da mesma cor. */
.tec-aba{
  position:absolute; bottom:100%; z-index:2; margin:0 0 -1px;
  height:46px; display:flex; align-items:center; gap:8px; padding:0 16px;
  border:1px solid var(--slate-200); border-bottom:0; border-top:3px solid var(--slate-200);
  border-radius:12px 12px 0 0; background:var(--slate-200); color:var(--slate-600);
  font-family:var(--font-mono); font-size:13px; font-weight:600; line-height:1;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; cursor:pointer;
}
.tec-aba svg{width:18px; height:18px; flex:none;}
.tec-aba:focus-visible{outline:3px solid var(--brand-text, var(--brand)); outline-offset:2px;}
.tec-janela[data-pasta="0"] .tec-aba{left:16px;}
.tec-janela[data-pasta="1"] .tec-aba{left:189px;}
.tec-janela[data-pasta="2"] .tec-aba{left:442px;}
.tec-janela[data-pasta="3"] .tec-aba{left:668px;}
.tec-janela[data-nivel="0"] .tec-aba{
  background:var(--slate-100); color:var(--brand-text, var(--brand)); border-top-color:var(--brand);
}


/* ============================================================================
   EM PÉ — mesmo escopo do retrato.css (palco de 576px, o slide rola).
   ============================================================================ */
@media screen {

/* Linha do tempo: seis colunas não cabem em 524px. Vira uma linha do tempo
   vertical — marcador à esquerda, a linha descendo até o próximo. */
deck-stage[data-orient="retrato"] .mrp-tl{
  grid-template-columns:minmax(0,1fr); margin-top:44px;
}
deck-stage[data-orient="retrato"] .mrp-tl__step{
  flex-direction:row; align-items:center; gap:20px; padding:0 0 38px;
}
deck-stage[data-orient="retrato"] .mrp-tl__step:last-child{padding-bottom:0;}
deck-stage[data-orient="retrato"] .mrp-tl__n{width:54px; height:54px; font-size:23px;}
/* o <li> tem 54px de marcador + 38 de respiro: a linha vai de 6px abaixo de um
   círculo a 6px acima do seguinte */
deck-stage[data-orient="retrato"] .mrp-tl__step:not(:last-child)::after{
  top:60px; bottom:6px; left:26px; right:auto; width:2px; height:auto;
}
deck-stage[data-orient="retrato"] .mrp-tl__t{font-size:28px;}

/* Folhas do relatório: em pé, uma embaixo da outra, cada uma na largura da
   coluna (794 × .66 = 524px do palco) com a legenda logo abaixo. Já foi uma
   fileira que deslizava de lado; o Lucas pediu na vertical (2026-10-01) — rola
   mais, mas é a leitura natural no celular. */
deck-stage[data-orient="retrato"] .mrp-pages{
  --pg-s:.66;
  display:flex; flex-direction:column; align-items:flex-start; gap:44px;
  margin-top:var(--gap-title);
}
deck-stage[data-orient="retrato"] .mrp-pgcol{gap:18px;}
deck-stage[data-orient="retrato"] .mrp-pg{
  box-shadow:0 12px 26px -12px rgba(11,18,32,.34), 0 0 0 1px var(--slate-200);
}

/* Ciclo: o diagrama inteiro escala por cqw, então só os textos precisam de um
   pouco mais de corpo — em 524px o rótulo de 3,5cqw chegaria a 18px. */
deck-stage[data-orient="retrato"] .mrp-cycle{max-width:none;}
deck-stage[data-orient="retrato"] .mrp-cycle__t{font-size:4cqw;}
deck-stage[data-orient="retrato"] .mrp-cycle__node .ic{width:8.6cqw; height:8.6cqw;}

/* Planos: os dois cartões empilham, na ordem do fonte (BASIC, depois PRO), cada
   um com a largura inteira da coluna. O `flex:1` do par sai: em pé ele esticaria
   até a altura da janela e o `align-content:center` afastaria os cartões do
   título — aqui eles fluem a partir dele e o slide rola. O `--pad-bottom` do
   .frame (140px) continua reservando o fim do último cartão acima da barra de
   navegação. O "à vista" deixa de ser coluna ao lado do preço e vira uma linha
   embaixo dele (rótulo à esquerda, valor à direita). */
deck-stage[data-orient="retrato"] .mrp-plans{
  flex:none; grid-template-columns:minmax(0,1fr); gap:22px;
  align-items:stretch; align-content:start;
}
deck-stage[data-orient="retrato"] .mrp-plan{
  --plan-px:22px; --plan-chip:52px; --plan-name:38px;
  --plan-price:66px; --plan-x:26px; --plan-cents:30px; --plan-cash:32px;
  border-radius:18px;
}
deck-stage[data-orient="retrato"] .mrp-plan--pro{
  --plan-name:42px; --plan-price:74px; --plan-cents:34px;
}
deck-stage[data-orient="retrato"] .mrp-plan__head,
deck-stage[data-orient="retrato"] .mrp-plan--pro .mrp-plan__head{padding-top:24px; padding-bottom:22px;}
deck-stage[data-orient="retrato"] .mrp-plan__id{gap:16px;}
deck-stage[data-orient="retrato"] .mrp-plan__desc{font-size:22px;}
deck-stage[data-orient="retrato"] .mrp-plan__prices{
  flex-direction:column; align-items:stretch; gap:18px; margin-top:20px;
}
deck-stage[data-orient="retrato"] .mrp-plan__cash,
deck-stage[data-orient="retrato"] .mrp-plan--pro .mrp-plan__cash{
  flex-direction:row; align-items:baseline; justify-content:space-between; gap:16px;
  padding:16px 0 0; border-left:0; border-top:1px solid var(--slate-200);
}
deck-stage[data-orient="retrato"] .mrp-plan--pro .mrp-plan__cash{border-top-color:var(--brand-line);}
deck-stage[data-orient="retrato"] .mrp-plan__cash-lbl{font-size:22px;}
deck-stage[data-orient="retrato"] .mrp-plan__feats,
deck-stage[data-orient="retrato"] .mrp-plan--pro .mrp-plan__feats{padding-top:22px; padding-bottom:26px; gap:14px;}
deck-stage[data-orient="retrato"] .mrp-plan__feats li{gap:14px;}
deck-stage[data-orient="retrato"] .mrp-plan__tx{font-size:23px; line-height:1.3;}

/* Tecnologia: sem pilha e sem abas. Fica só a janela do item ativo, plana,
   com a moldura de sangria total que o retrato.css já dá ao .bwin; o TOQUE no
   item troca a tela (no pastas.js o mouse não troca em pé). Os itens ficam
   compactos — rótulo sempre visível, a frase só no ativo — para a janela
   começar ainda na primeira dobra. Medidas do canvas "Tecnologia-celular"
   (tela de 390) divididas pela escala do palco (~0,677). */
deck-stage[data-orient="retrato"] .tec-item{
  align-items:flex-start; gap:18px; padding:16px 19px; border-color:var(--slate-200);
}
deck-stage[data-orient="retrato"] .tec-item[aria-pressed="true"]{border-color:var(--brand-line);}
deck-stage[data-orient="retrato"] .tec-item__tx{min-height:56px;}
deck-stage[data-orient="retrato"] .tec-item__rotulo{display:block;}
deck-stage[data-orient="retrato"] .tec-item[aria-pressed="true"] .tec-item__rotulo{color:var(--brand-text, var(--brand));}
deck-stage[data-orient="retrato"] .tec-item[aria-pressed="false"] .tec-item__frase{display:none;}
deck-stage[data-orient="retrato"] .tec-pilha{display:block; padding-top:0; margin-top:10px;}
deck-stage[data-orient="retrato"] .tec-janela{transform:none;}
deck-stage[data-orient="retrato"] .tec-janela:not([data-nivel="0"]),
deck-stage[data-orient="retrato"] .tec-aba,
deck-stage[data-orient="retrato"] .tec-veu{display:none;}
deck-stage[data-orient="retrato"] .tec-janela .bwin{box-shadow:var(--shadow-pop);}

}