/* =========================================================================
   AKROS — o ramo do exemplo (07/10)

   A plataforma é a mesma para todos; o menu, não. Produtos & Serviços,
   Orçamentos e Agenda só aparecem para o ramo que usa (abaLiberada() no
   Sidebar do produto). Esta folha veste as duas peças que mostram isso:

   1. .rbar + .rmenu — a barra do ramo, só com o dropdown, logo acima do
      título do estúdio e da jornada; a lista mora no <body> e abre sob o botão;
   2. .ps__i.is-off — o passo cuja aba o ramo não usa: apagado, com o porquê.

   Quem troca o conteúdo é o js/nichos.js; quem pula o passo é o estudio.js.
   ========================================================================= */

/* ---------- 1a. a barra ---------- */
.rbar-slot{margin:0 0 clamp(14px,2.2vh,26px)}
.rbar{
  --ramo-ac:#0A80E2;--ramo-ac-ink:#6CB8FF;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0;
}
.rbar__rot{
  flex:none;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint,rgba(232,236,242,.46));
}
.rbar__bt{
  display:inline-flex;align-items:center;gap:9px;min-width:0;max-width:100%;
  padding:5px 10px 5px 6px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;line-height:1.2;color:var(--ink,#F2F4F7);
  background:var(--gr-card,#14171C);
  border:1px solid var(--gr-fio-forte,rgba(255,255,255,.12));border-radius:2px;
  transition:border-color .2s;
}
.rbar__bt:hover,.rbar__bt[aria-expanded="true"]{border-color:color-mix(in srgb,var(--ramo-ac) 60%,transparent)}
.rbar__bt:focus-visible{outline:2px solid var(--ramo-ac-ink);outline-offset:2px}
.rbar__ic{
  flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:2px;
  color:var(--ramo-ac-ink);
  background:color-mix(in srgb,var(--ramo-ac) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--ramo-ac) 40%,transparent);
}
.rbar__ic svg{width:15px;height:15px}
.rbar__v{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbar__seta{flex:none;width:12px;height:12px;color:var(--ramo-ac-ink);transition:transform .25s var(--ease,ease)}
.rbar__bt[aria-expanded="true"] .rbar__seta{transform:rotate(180deg)}

/* ---------- 1b. a lista (no <body>, fora das faixas: tokens próprios) ---------- */
.rmenu{
  --ink:#F2F4F7;--ink-soft:#DDE2E8;--body:#A7B0BC;--faint:rgba(232,236,242,.46);
  --ramo-ac:#0A80E2;--ramo-ac-ink:#6CB8FF;
  position:fixed;z-index:80;left:0;top:0;width:min(460px,calc(100vw - 24px));
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(var(--linhas,8),auto);grid-auto-flow:column;gap:2px 4px;
  padding:6px;overflow:auto;overscroll-behavior:contain;
  background:#0E1014;border:1px solid rgba(255,255,255,.12);border-radius:2px;
  box-shadow:0 24px 48px -20px rgba(0,0,0,.8);
  opacity:0;transform:translateY(-4px);transition:opacity .16s,transform .16s;
}
.rmenu[hidden]{display:none}
.rmenu.is-aberto{opacity:1;transform:none}
.rmenu__op{
  display:flex;align-items:center;gap:9px;min-width:0;
  padding:8px 10px;cursor:pointer;text-align:left;
  font:inherit;font-size:13px;line-height:1.25;color:var(--body);
  background:none;border:0;border-radius:2px;
  box-shadow:inset 2px 0 0 transparent;
  transition:color .15s,background .15s;
}
.rmenu__op i{flex:none;display:grid;place-items:center;color:var(--faint);transition:color .15s}
.rmenu__op:hover,.rmenu__op:focus-visible{color:var(--ink);background:rgba(255,255,255,.05);outline:0}
.rmenu__op:hover i,.rmenu__op:focus-visible i{color:var(--ink-soft)}
.rmenu__op[aria-selected="true"]{
  color:var(--ink);background:color-mix(in srgb,var(--ramo-ac) 16%,transparent);
  box-shadow:inset 2px 0 0 var(--ramo-ac);
}
.rmenu__op[aria-selected="true"] i{color:var(--ramo-ac-ink)}

/* na jornada a barra mora dentro do #journey, que redefine --ink e --faint
   (as cores do app claro) e veste todo button e svg: devolve as da barra */
#journey .rbar{--ink:#F2F4F7;--faint:rgba(232,236,242,.46)}
#journey .rbar__bt{font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.2}
#journey .rbar__bt:focus-visible{outline:2px solid var(--ramo-ac-ink);outline-offset:2px}
#journey .rbar__ic svg{width:15px;height:15px}
#journey .rbar__seta{width:12px;height:12px}

@media (min-width:1181px) and (max-height:820px){
  .rbar-slot{margin-bottom:clamp(10px,1.6vh,16px)}
  .rbar__bt,#journey .rbar__bt{padding:3px 9px 3px 4px;font-size:13.5px}
  .rbar__ic{width:22px;height:22px}
}
@media (max-width:520px){
  .rbar__rot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rmenu,.rbar__seta{transition:none}
}

/* ---------- 2. o passo que o ramo não usa ---------- */
#estudio .ps__fora{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--body,#A7B0BC)}
#estudio .ps__fora:empty{display:none}
#estudio .ps__fora em{
  display:inline-block;margin-right:7px;padding:1px 6px;vertical-align:1px;
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint,rgba(232,236,242,.46));
  border:1px solid var(--gr-fio-forte,rgba(255,255,255,.12));border-radius:2px;
}
#estudio .ps__i.is-off{border-left-color:var(--gr-fio-forte,rgba(255,255,255,.12));background:none}
#estudio .ps__i.is-off .ps__b{cursor:default;padding-top:6px;padding-bottom:7px}
#estudio .ps__i.is-off .ps__t b,
#estudio .ps__i.is-off:hover .ps__t b{color:var(--faint,rgba(232,236,242,.46))}
#estudio .ps__i.is-off .ps__n{
  color:var(--faint,rgba(232,236,242,.46));background:transparent;
  border-color:var(--gr-fio-forte,rgba(255,255,255,.12));
}
#estudio .ps__i.is-off .ps__x,
#estudio .ps__i.is-off .ps__bar{display:none}