/* Rodada 10 · Componente canônico da escada (ver /escada.js).
   Tema preto executivo: tokens --bg-*, --line-exec, --cyan, --azure, --grad; fontes Sora / IBM Plex Sans / JetBrains Mono.
   Mobile-first: a 360 px nada rola na horizontal. */
.escada{--esc-bd:var(--line-exec,rgba(255,255,255,.08));--esc-sf:var(--bg-2,#10161F);--esc-sf2:var(--bg-3,#172131);--esc-tx:var(--on-dark,#eaf3fb);--esc-soft:var(--on-dark-soft,#b9cbdd);--esc-mut:var(--on-dark-mut,#7f97ae);--esc-hi:var(--cyan,#34C3F0);
  display:block;max-width:var(--container,1160px);margin:0 auto;padding:0 16px;color:var(--esc-tx);font-family:var(--f-body,"IBM Plex Sans",system-ui,sans-serif);box-sizing:border-box}
.escada *,.escada *::before,.escada *::after{box-sizing:border-box}
.escada a{color:inherit;text-decoration:none}
.escada a:focus-visible{outline:2px solid var(--esc-hi);outline-offset:3px}
.escada b{font-weight:600}

/* fallback sem JS: 5 links simples */
.escada-fb{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;margin:0;padding:0;font-size:14px}
.escada-fb li{display:flex;align-items:center}
.escada-fb li+li::before{content:"›";margin-right:8px;color:var(--esc-mut)}
.escada-fb a{display:inline-flex;align-items:center;min-height:40px;padding:4px 12px;border:1px solid var(--esc-bd);border-radius:999px;background:var(--esc-sf)}
.escada-fb a[aria-current="page"]{border-color:var(--esc-hi);color:#fff}

/* partes comuns */
.esc-t{margin:0 0 12px;font:500 12px/1.4 var(--f-mono,"JetBrains Mono",monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--esc-mut)}
.esc-ic{flex:none;display:inline-flex;align-items:flex-end;justify-content:center;width:44px;height:52px}
.esc-ic img{display:block;width:40px;height:auto;max-height:52px;object-fit:contain}
.esc-ic svg{width:36px;height:36px;margin-bottom:6px;fill:none;stroke:var(--esc-hi);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.esc-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.esc-n{font:500 11.5px/1.35 var(--f-mono,"JetBrains Mono",monospace);letter-spacing:.04em;color:var(--esc-mut)}
.esc-nome{font-family:var(--f-display,"Sora",sans-serif);font-size:16px;line-height:1.25;color:#fff}
.esc-d{font-size:14px;line-height:1.45;color:var(--esc-soft)}
.esc-m{font-size:13px;line-height:1.4;color:var(--esc-mut)}
.esc-here{align-self:flex-start;margin-top:6px;padding:2px 8px;border-radius:999px;font:600 11px/1.5 var(--f-mono,monospace);color:var(--bg-0,#05070A);background:var(--esc-hi)}

/* ---------- completa: 5 níveis ---------- */
.esc-list{position:relative;display:grid;grid-template-columns:1fr;gap:10px;list-style:none;margin:0;padding:0}
.esc-i{position:relative}
.esc-a{display:flex;gap:12px;align-items:flex-start;height:100%;padding:14px;border:1px solid var(--esc-bd);border-radius:14px;background:var(--esc-sf);transition:border-color .2s,background .2s}
.esc-a:hover{border-color:rgba(52,195,240,.45);background:var(--esc-sf2)}
.esc-i.is-cur .esc-a{border-color:var(--esc-hi);box-shadow:inset 0 0 0 1px rgba(52,195,240,.35)}
/* conector vertical no celular */
.esc-i+.esc-i::before{content:"";position:absolute;left:35px;top:-10px;width:2px;height:10px;background:linear-gradient(var(--azure,#1B9DE0),var(--esc-hi))}
@media (min-width:1000px){
  .esc-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
  .esc-a{flex-direction:column;gap:8px;padding:16px}
  .esc-i+.esc-i::before{left:-14px;top:50%;width:14px;height:2px;background:var(--grad,linear-gradient(100deg,#1B9DE0,#34C3F0))}
}

/* ---------- compacta: anterior · [atual] · próximo ---------- */
.esc-c{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.esc-cur{grid-column:1/-1;grid-row:1;display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--esc-hi);border-radius:16px;background:linear-gradient(180deg,rgba(52,195,240,.10),rgba(52,195,240,.02)),var(--esc-sf)}
.esc-cur-a{display:flex;gap:12px;align-items:flex-start}
.esc-cur .esc-nome{font-size:18px}
.esc-cur .esc-d{color:var(--esc-tx);font-size:15px}
.esc-cur .esc-n{color:var(--esc-hi)}
.esc-dots{display:flex;gap:6px;padding-left:56px}
.esc-dots i{display:block;width:22px;height:4px;border-radius:2px;background:var(--esc-bd)}
.esc-dots i.past{background:rgba(52,195,240,.45)}
.esc-dots i.on{background:var(--esc-hi)}
.esc-v{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 10px;min-height:44px;padding:12px;border:1px solid var(--esc-bd);border-radius:14px;background:var(--esc-sf);transition:border-color .2s,background .2s}
.esc-v:hover{border-color:rgba(52,195,240,.45);background:var(--esc-sf2)}
.esc-v.is-edge{border-style:dashed;background:transparent}
.esc-v.is-edge .esc-nome{font-size:15px;color:var(--esc-hi)}
.esc-v.is-edge .esc-m{display:block}
.esc-v .esc-dir{flex:0 0 100%;font:600 12px/1.4 var(--f-mono,monospace);color:var(--esc-hi)}
.esc-v .esc-ic{width:32px;height:40px}
.esc-v .esc-ic img{width:30px}
.esc-v .esc-ic svg{width:28px;height:28px;margin-bottom:4px}
.esc-v .esc-tx{flex:1 1 0}
.esc-v .esc-m{display:none}
.esc-v-next{text-align:left}
.escada .esc-all{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0 4px;font-size:14px;font-weight:600;color:var(--esc-hi)}
.escada .esc-all:hover{text-decoration:underline}
@media (max-width:420px){.esc-v .esc-ic{display:none}.esc-dots{padding-left:0}}
@media (min-width:860px){
  .esc-c{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);align-items:stretch}
  .esc-cur{grid-column:2;grid-row:1;padding:18px 20px}
  .esc-v-prev{grid-column:1;grid-row:1}
  .esc-v-next{grid-column:3;grid-row:1}
  .esc-v{padding:16px}
  .esc-v .esc-m{display:block}
}
@media (prefers-reduced-motion:reduce){.esc-a,.esc-v{transition:none}}
/* invólucro usado nas páginas de produto, logo abaixo do hero */
.esc-wrap{padding:28px 0 8px}
.esc-wrap.esc-end{padding:8px 0 40px}
.escada-fb-d{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--esc-soft)}