/* ==========================================================================
   04 O QUE ASSUMIMOS — lista de frentes (acordeão) + painel de leitura
   Desktop: hover/clique troca o painel (.pv) da direita.
   ≤1024px: painel some e cada frente abre como acordeão (.op-y).
   Ligação: <li class="op" data-pv="p3"> ↔ <div class="pv" id="p3">
   ========================================================================== */
#operacao .sec-hd{margin-bottom:clamp(36px,5vw,60px);row-gap:20px}

.ops{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.74fr);gap:clamp(32px,4vw,66px);align-items:start}

/* ---------- lista de frentes ---------- */
.ops-l{border-top:1px solid var(--border)}
.op{border-bottom:1px solid var(--border);position:relative}
.op::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--interactive);transform:scaleY(0);transform-origin:top;transition:transform var(--t-slow) var(--e-out)}
.op.on::before{transform:scaleY(1)}
.op-b{width:100%;display:grid;grid-template-columns:44px 1fr 24px;gap:16px;align-items:center;padding:20px 2px;text-align:left;transition:padding-left var(--t-base) var(--e-out)}
.op.on .op-b{padding-left:15px}
.op-n{font-family:"IBM Plex Mono",monospace;font-size:var(--f-12);font-weight:600;color:var(--text-3);transition:color var(--t-base)}
.op.on .op-n{color:var(--interactive)}
.op-t b{display:block;font-family:Archivo;font-stretch:106%;font-size:clamp(1.06rem,1.6vw,1.26rem);font-weight:700;letter-spacing:-.025em;margin-bottom:2px;transition:color var(--t-base)}
.op.on .op-t b{color:var(--interactive-hover)}
.op-t span{font-family:"IBM Plex Mono",monospace;font-size:var(--f-12);color:var(--text-3);letter-spacing:.04em}
.op-i svg{width:11px;height:11px;stroke:var(--text-3);stroke-width:1.8;fill:none;transition:stroke var(--t-base),transform var(--t-base) var(--e-out)}
.op.on .op-i svg{stroke:var(--interactive);transform:rotate(90deg)}
.op-y{display:none;padding:0 2px 20px 60px;color:var(--text-2);font-size:var(--f-15);max-width:56ch}

/* ---------- painel lateral ---------- */
.panel{position:sticky;top:104px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--sh-2)}
.panel-t{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px}
.panel-t b{font-family:"IBM Plex Mono",monospace;font-size:var(--f-12);font-weight:600;color:var(--text-2)}
.panel-y{padding:6px 16px 16px;min-height:266px;background:var(--bg-soft)}
.pv{display:none}.pv.on{display:block}
.pv>*{opacity:0;transform:translateY(8px)}
.pv.on>*{animation:pvIn 440ms var(--e-out) forwards;animation-delay:calc(var(--i,0) * 52ms)}

/* linha de evento */
.ev{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}
.ev:last-of-type{border-bottom:none}
.ev .k{font-family:"IBM Plex Mono",monospace;font-size:var(--f-12);color:var(--text-3);letter-spacing:.05em;display:block;margin-bottom:3px}
.ev .v{font-size:var(--f-14);color:var(--text-1);font-weight:500}

/* barra de progresso (também usada no painel operacional) */
.meter{margin-top:14px}
.meter span{display:flex;justify-content:space-between;font-size:var(--f-12);color:var(--text-2);margin-bottom:6px}
.bar{height:4px;border-radius:2px;background:var(--border-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--interactive);border-radius:2px;transform-origin:left;transform:scaleX(0);transition:transform 860ms var(--e-out) .1s}
.pv.on .bar i,.dash.is-in .bar i{transform:scaleX(1)}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .ops{grid-template-columns:1fr}
  .panel{display:none}
  .op-y{display:block;max-height:0;overflow:hidden;padding-bottom:0;transition:max-height var(--t-slow) var(--e-io),padding var(--t-slow) var(--e-io)}
  .op.on .op-y{max-height:300px;padding-bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  .pv>*{opacity:1!important;transform:none!important}
  .bar i{transform:scaleX(1)!important}
}