/* Passo a passo INTERATIVO dos tutoriais (modelo validado no GEOSIGEF, set/2026).

   Cada passo é uma tela REAL do plugin (fotografada com dados fictícios) com pontos clicáveis em
   cima dos comandos. O clique abre, AO LADO da tela, um painel com a lupa daquele pedaço, caixas
   de texto (o que faz / quando usar / atenção), uma árvore de decisão e um "saiba mais" — tudo
   sem sair da página. No celular o painel abre embaixo da tela.

   Pedido do Cledio: os contornos laranja têm de ser FINOS e suaves (1 px, meio transparentes) —
   a moldura grossa dos infográficos "poluía" a tela. Por isso nada aqui passa de 1 px de borda;
   o destaque vem de um halo de baixa opacidade, não de espessura.

   Depende dos tokens de tutorial.css (--laranja, --linha, --texto-muted…). */

.container.largo{width:min(1320px,94vw);margin:0 auto}

/* ---------- guia do topo: os passos em pastilhas ---------- */
.px-guia{
  display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 12px;padding:0;list-style:none
}
.px-guia a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:.8rem;font-weight:600;color:var(--texto-muted);
  border:1px solid var(--linha);border-radius:999px;padding:5px 12px 5px 6px;background:#fff;
  transition:border-color .15s,color .15s
}
.px-guia a b{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(255,103,0,.1);color:var(--laranja-escuro);font-size:.7rem
}
.px-guia a:hover{border-color:rgba(255,103,0,.45);color:var(--texto)}
.px-como{
  display:flex;align-items:center;gap:10px;margin:0 0 6px;
  font-size:.92rem;color:var(--texto-muted)
}
.px-como i{
  flex:0 0 auto;display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:var(--laranja);color:#fff;font-style:normal;font-weight:700;font-size:.72rem;
  box-shadow:0 0 0 4px rgba(255,103,0,.14)
}

/* ---------- um passo ---------- */
.px-passo{padding:44px 0 48px;border-bottom:1px solid var(--linha);scroll-margin-top:84px}
.px-passo:last-child{border-bottom:0}
.px-cab{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start;
  max-width:900px;margin-bottom:22px
}
.px-cab .num{margin:0}
.px-cab h3{margin:5px 0 8px;font-size:1.34rem;font-weight:700;letter-spacing:-.01em}
.px-cab p{margin:0 0 8px}
.px-cab .dica{margin-top:6px}

/* ---------- palco: a tela + o painel ---------- */
.px-palco{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start;justify-content:center}
/* aberto: a tela e o painel ficam juntos no centro (tela estreita não fica encostada na esquerda) */
.px-palco.aberto{grid-template-columns:minmax(0,var(--px-max,1fr)) minmax(330px,410px)}
.px-tela{margin:0;min-width:0;width:100%;max-width:var(--px-max,100%);justify-self:center}
.px-quadro{
  position:relative;border-radius:12px;border:1px solid var(--linha);background:#f3f3f3;
  box-shadow:0 18px 44px rgba(0,0,0,.09)
}
.px-quadro > img{width:100%;height:auto;display:block;border-radius:11px}
.px-tela figcaption{margin:10px 2px 0;font-size:.84rem;color:var(--texto-muted)}

/* ponto clicável — 1 px, laranja meio transparente, com um fio branco por fora pra não sumir
   em fundo escuro (mapa, desenho do CAD) */
.px-alvo{
  position:absolute;margin:0;padding:0;cursor:pointer;background:transparent;
  border:1px solid rgba(255,103,0,.8);border-radius:5px;
  box-shadow:0 0 0 1px rgba(255,255,255,.45);
  transition:background-color .15s,box-shadow .15s,border-color .15s
}
.px-alvo:hover,.px-alvo:focus-visible{
  outline:none;background:rgba(255,103,0,.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 0 4px rgba(255,103,0,.14)
}
.px-alvo[aria-expanded="true"]{
  border-color:var(--laranja);background:rgba(255,103,0,.1);
  box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 0 4px rgba(255,103,0,.2)
}
.px-pino{
  position:absolute;left:0;top:0;transform:translate(-42%,-42%);
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--laranja);color:#fff;font:700 .7rem/20px 'Montserrat',sans-serif;text-align:center;
  box-shadow:0 1px 5px rgba(0,0,0,.28);pointer-events:none
}
.px-alvo[aria-expanded="true"] .px-pino{background:#141414}
.px-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* convite discreto no 1º ponto, até a pessoa mexer no passo */
.px-palco:not(.usado) .px-alvo:first-of-type .px-pino::after{
  content:"";position:absolute;inset:-5px;border-radius:999px;border:1px solid rgba(255,103,0,.55);
  animation:px-pulso 2s ease-out infinite
}
@keyframes px-pulso{from{transform:scale(.75);opacity:1}to{transform:scale(1.55);opacity:0}}

/* "ver a tela inteira": fica na linha dos atalhos, embaixo da tela — em cima da imagem ele
   tapava justo o botão do canto (o Buscar, o Continuar…) */
.px-ampliar{
  display:inline-flex;align-items:center;gap:7px;cursor:zoom-in;
  font:600 .78rem/1.25 'Montserrat',sans-serif;color:var(--texto-muted);background:none;
  border:1px dashed #d6d6d6;border-radius:999px;padding:6px 12px
}
.px-ampliar::before{
  content:"";width:10px;height:10px;border:1.5px solid currentColor;border-radius:2px;
  box-shadow:inset 0 0 0 2px #fff
}
.px-ampliar:hover{color:var(--texto);border-color:rgba(255,103,0,.5)}
.px-ampliar:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.px-atalhos .px-li-ampliar{margin-left:auto}

/* atalhos embaixo da tela: a mesma lista de pontos, clicável (e o caminho no celular) */
.px-atalhos{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.px-atalhos button{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:600 .8rem/1.25 'Montserrat',sans-serif;color:#333;background:#fff;
  border:1px solid var(--linha);border-radius:999px;padding:5px 12px 5px 5px;
  transition:border-color .15s,background-color .15s
}
.px-atalhos button b{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(255,103,0,.1);color:var(--laranja-escuro);font-size:.7rem
}
.px-atalhos button:hover{border-color:rgba(255,103,0,.45)}
.px-atalhos button[aria-pressed="true"]{border-color:rgba(255,103,0,.8);background:#fff7f0}
.px-atalhos button:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}

/* ---------- o painel ao lado ---------- */
.px-painel{
  position:sticky;top:86px;background:#fff;border:1px solid var(--linha);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.08);padding:16px 18px 12px;
  max-height:calc(100vh - 104px);overflow:auto;overscroll-behavior:contain;
  animation:px-entra .22s ease
}
.px-painel[hidden]{display:none}
@keyframes px-entra{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.px-p-topo{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.px-p-topo .px-pino-p{
  flex:0 0 auto;display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:999px;
  background:var(--laranja);color:#fff;font-weight:700;font-size:.76rem;margin-top:2px
}
.px-p-tipo{display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--laranja-escuro);font-weight:700}
.px-p-topo h4{margin:1px 0 0;font-size:1.1rem;line-height:1.3;font-weight:700}
.px-fechar{
  margin-left:auto;flex:0 0 auto;width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:1px solid var(--linha);background:#fff;color:#666;font-size:1.05rem;line-height:1
}
.px-fechar:hover{border-color:var(--laranja);color:var(--laranja)}
.px-fechar:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}

/* lupa: o pedaço da tela, ampliado */
.px-lupa{
  position:relative;overflow:hidden;border-radius:10px;background:#202428;margin:0 0 6px;
  border:1px solid #e2e2e2
}
.px-lupa img{position:absolute;max-width:none;left:0;top:0;border-radius:0}
.px-lupa .px-marca{
  position:absolute;border:1px solid rgba(255,103,0,.9);border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.5);pointer-events:none
}
.px-lupa-leg{margin:0 0 12px;font-size:.76rem;color:var(--texto-muted)}
.px-duas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.px-duas .px-lupa{margin:0}
.px-duas .px-lupa-leg{margin:4px 0 0;text-align:center}

/* caixas de texto — contorno FINO e suave */
.px-caixa{
  border:1px solid rgba(255,103,0,.24);border-radius:10px;padding:10px 14px 11px;margin:0 0 9px;
  background:#fff
}
.px-caixa h5{
  margin:0 0 3px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--laranja-escuro);font-weight:700
}
.px-caixa p{margin:0;font-size:.92rem;line-height:1.55}
.px-caixa p + p{margin-top:6px}
.px-caixa ul{margin:4px 0 0;padding-left:18px;font-size:.92rem;line-height:1.5}
.px-caixa li{margin:2px 0}
.px-caixa.atencao{background:#fffaf6}
.px-caixa code{font-size:.84em}

/* árvore de decisão: cada pergunta abre embaixo, com o "galho" desenhado em 1 px */
.px-arvore{margin:12px 0 8px;padding:10px 12px 6px;border-radius:10px;background:#fafafa;border:1px solid #efefef}
.px-arvore > p{margin:0 0 6px;font-weight:700;font-size:.88rem;display:flex;gap:8px;align-items:center}
.px-arvore > p::before{
  content:"";width:14px;height:14px;flex:0 0 auto;border-radius:3px;
  border:1px solid rgba(255,103,0,.6);background:
    linear-gradient(rgba(255,103,0,.6),rgba(255,103,0,.6)) 50% 3px/1px 4px no-repeat,
    linear-gradient(rgba(255,103,0,.6),rgba(255,103,0,.6)) 3px 9px/8px 1px no-repeat
}
.px-arvore details,.px-mais details{
  background:none;border:0;border-radius:0;margin:0;overflow:visible
}
.px-arvore details{position:relative;margin:0 0 0 7px;padding:0 0 0 14px;border-left:1px solid rgba(255,103,0,.3)}
.px-arvore details:last-of-type{border-left-color:transparent}
.px-arvore details:last-of-type::before{
  content:"";position:absolute;left:0;top:0;height:16px;border-left:1px solid rgba(255,103,0,.3)
}
.px-arvore summary{
  position:relative;padding:5px 24px 5px 2px;font-weight:600;font-size:.88rem;line-height:1.35;
  color:#222;border-radius:6px
}
.px-arvore summary::before{
  content:"";position:absolute;left:-14px;top:15px;width:10px;border-top:1px solid rgba(255,103,0,.3)
}
.px-arvore summary::after{content:"›";right:6px;font-size:1.05rem;font-weight:700;transition:transform .15s}
.px-arvore details[open] > summary::after{content:"›";transform:translateY(-50%) rotate(90deg)}
.px-arvore summary:hover{background:#fff4ec}
.px-arvore details > *:not(summary){margin:0 0 8px 2px}
.px-arvore details > p{font-size:.88rem;line-height:1.5;color:#333;padding:7px 10px;background:#fff;border:1px solid rgba(255,103,0,.2);border-radius:8px}
.px-arvore details:last-child > *:last-child{margin-bottom:6px}

/* saiba mais */
.px-mais{margin:10px 0 4px;border:1px solid var(--linha);border-radius:10px;background:#fff;overflow:hidden}
.px-mais summary{padding:10px 40px 10px 14px;font-size:.88rem}
.px-mais summary::after{right:14px;font-size:1.2rem}
.px-mais > *:not(summary){margin:0 14px}
.px-mais > *:last-child{margin-bottom:12px}
.px-mais p,.px-mais li{font-size:.88rem;line-height:1.55}
.px-mais .tabela{margin:6px 0 0;font-size:.84rem}
.px-mais .tabela th,.px-mais .tabela td{padding:6px 8px}

/* rodapé do painel: anterior / próximo */
.px-navega{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:10px;border-top:1px solid #f0f0f0
}
.px-navega button{
  font:600 .8rem 'Montserrat',sans-serif;color:#444;background:#fff;cursor:pointer;
  border:1px solid var(--linha);border-radius:999px;padding:6px 12px
}
.px-navega button:hover:not(:disabled){border-color:rgba(255,103,0,.6);color:var(--laranja-escuro)}
.px-navega button:disabled{opacity:.35;cursor:default}
.px-navega span{font-size:.76rem;color:var(--texto-muted)}

/* ---------- celular / tela estreita: o painel desce para baixo da tela ---------- */
@media (max-width:980px){
  .px-palco.aberto{grid-template-columns:minmax(0,1fr)}
  .px-painel{position:relative;top:0;max-height:none;animation:none}
  .px-cab{grid-template-columns:1fr}
  .px-cab .num{margin-bottom:10px}
}
@media (max-width:560px){
  /* no celular a tela encolhe e o número não: menor e mais pra fora do canto, pra não tapar a
     primeira letra do rótulo (formulário denso) */
  .px-pino{min-width:16px;height:16px;padding:0 4px;line-height:16px;font-size:.6rem;transform:translate(-68%,-68%)}
  .px-passo{padding:34px 0 36px}
}
@media (prefers-reduced-motion:reduce){
  .px-palco:not(.usado) .px-alvo:first-of-type .px-pino::after{animation:none}
  .px-painel{animation:none}
}