/* Uma única navegação operacional. Sem estilos da shell de demonstração. */
body.produto-operacional[data-op-tema] {
  --exp-paper:oklch(.1149 0 0);--exp-surface:oklch(.17 0 0);--exp-ink:oklch(.985 0 0);--exp-muted:oklch(.708 0 0);
  --exp-line:oklch(1 0 0 / .1);--exp-accent:oklch(.546 .245 262.881);--exp-accent-soft:oklch(.29 .07 262.9);
  --surface:oklch(.17 0 0);--surface-soft:oklch(.22 0 0);--ink:oklch(.985 0 0);--muted:oklch(.708 0 0);
  --line:oklch(1 0 0 / .1);--accent:oklch(.546 .245 262.881);--bg:oklch(.1149 0 0);--panel:oklch(.155 0 0);
  --exp-lavender:var(--surface-soft);--exp-accent-text:oklch(.75 .13 262.9);
  background:var(--exp-paper);color:var(--exp-ink);color-scheme:dark;
}
body.produto-operacional[data-op-tema="claro"] {
  --exp-paper:#fff;--exp-surface:oklch(.97 0 0);--exp-ink:oklch(.145 0 0);--exp-muted:oklch(.556 0 0);
  --exp-line:oklch(0 0 0 / .09);--exp-accent:oklch(.546 .245 262.881);--exp-accent-soft:oklch(.932 .032 255.585);
  --surface:oklch(.97 0 0);--surface-soft:oklch(.945 0 0);--ink:oklch(.145 0 0);--muted:oklch(.556 0 0);
  --line:oklch(0 0 0 / .09);--accent:oklch(.546 .245 262.881);--bg:#fff;--panel:#fff;--exp-accent-text:oklch(.48 .21 262.9);color-scheme:light;
}
/* Tokens Pulso — rebranding de 26/09/2026 (pedido do dono: "todas as abas" nas fontes e cores do Início).
   Paleta copiada de css/inicio-pulso.css. Só VALORES, por isso vale nos dois temas; quem pinta com eles
   são as seções "Pele Pulso", que só valem no escuro, com o prefixo
   body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) (peso 0,3,1).
   Este bloco vem DEPOIS do primeiro: acesso-tema-compartilhado.test.mjs lê o primeiro bloco com este seletor.
   Não redefine --bg, --panel, --surface, --ink, --muted, --line, --accent, --accent-text nem --accent-soft
   (a página pública e operacao-cobalto.test.mjs travam esses). Hex, rgba e sombras novas SÓ aqui. */
body.produto-operacional[data-op-tema] {
  /* Superfícies */
  --lg-fundo:#050505;--lg-coluna:linear-gradient(180deg,#0d0d10,#09090b);--lg-cartao:#121216;--lg-cartao-hover:#17171c;
  --lg-dialogo:#08080a;--lg-campo:#111115;--lg-trilho:#09090b;--lg-vidro:#0a0b0cd9;--lg-vazio-fundo:#0b0b0d;--lg-aviso-fundo:#151518ed;
  --lg-realce:#ffffff08;--lg-realce-2:#ffffff14;
  /* Linhas */
  --lg-linha:#ffffff17;--lg-linha-suave:#ffffff0e;--lg-linha-forte:#ffffff2d;--lg-linha-vazia:#ffffff25;--lg-linha-dialogo:#ffffff22;--lg-linha-selo:#ffffff24;
  /* Texto. --lg-apagado só sobre o fundo (no cartão dá 4,43:1): texto pequeno em cartão usa --lg-apoio. */
  --lg-tinta:#f7f5f2;--lg-tinta-2:#e2dfe6;--lg-subtitulo:#cfccd3;--lg-apoio:#a3a0a8;--lg-apagado:#7d7a83;
  /* Acentos. Sobre o limão a tinta é sempre --lg-sobre-limao; o violeta como texto é --lg-violeta-texto. */
  --lg-limao:#a9ff45;--lg-limao-hover:#b9ff66;--lg-sobre-limao:#071004;--lg-rosa:#ef45ff;--lg-violeta:#8b5cff;--lg-violeta-texto:#a88bff;
  --lg-amarelo:#f4e04d;--lg-ambar:#ffbd62;--lg-erro:#ff6b8a;--lg-erro-texto:#ffd1dc;--lg-pilula-ativa:#f3f1ed;--lg-sobre-pilula:#090909;
  /* Degradês */
  --lg-espectro:linear-gradient(90deg,#a9ff45,#f4e04d 38%,#ff4fa8 70%,#8b5cff);
  --lg-cta:linear-gradient(100deg,#a9ff45,#f4e04d 38%,#ff4fa8 70%,#8b5cff);
  --lg-aprovar:linear-gradient(100deg,#a9ff45,#ffe053,#ef45ff);
  --lg-progresso:linear-gradient(90deg,#a9ff45,#f4e04d 55%,#ef45ff);
  --lg-vazio:linear-gradient(135deg,#ffca58,#f448ab 45%,#714cff);
  --lg-sublinhado:linear-gradient(90deg,#a9ff45,#ffe465,#ef45ff);
  /* Sombras (cartões são chapados: só contorno) */
  --lg-sombra-dialogo:0 35px 120px #000;--lg-sombra-menu:0 30px 90px #000e;--lg-sombra-aviso:0 18px 60px #000b;
  --lg-brilho-limao:0 10px 30px #a9ff4526;--lg-veu:#000c;
  /* Raios */
  --lg-raio-pilula:999px;--lg-raio-dialogo:24px;--lg-raio-secao:20px;--lg-raio-cartao:16px;--lg-raio-item:14px;--lg-raio-botao:12px;--lg-raio-campo:10px;
  /* Tipografia: a mesma Instrument Sans local da casca (identidade-cobalto.css), nada novo. Mínimo de 11px. */
  --lg-fonte:var(--id-font);
  --lg-titulo-tela:clamp(34px,3.3vw,52px);--lg-titulo-peso:640;--lg-titulo-tracking:-.05em;--lg-titulo-altura:1.03;
  --lg-titulo-dialogo:clamp(22px,2.6vw,32px);--lg-titulo-secao:17px;
  --lg-rotulo:18px;--lg-rotulo-peso:620;--lg-rotulo-tracking:.05em;
  --lg-kicker:11px;--lg-kicker-peso:700;--lg-kicker-tracking:.12em;
}
.produto-operacional[data-op-tema] .op-shell {display:block;min-height:100dvh}
.produto-operacional[data-op-tema] .op-sidebar {
  position:sticky;inset:0 0 auto;z-index:30;width:100%;height:auto;min-height:64px;
  display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:8px 16px;padding:10px 28px 8px;
  background:var(--exp-paper);border:0;border-bottom:1px solid var(--exp-line);box-shadow:none;
}
.produto-operacional[data-op-tema] .op-brand {padding:0;gap:10px;flex:none;color:var(--exp-ink)}
.produto-operacional[data-op-tema] .op-brand {grid-column:1;grid-row:1}
.produto-operacional[data-op-tema] .op-brand img {width:20px;height:20px;object-fit:contain}
.produto-operacional[data-op-tema] .op-brand span {font-size:15px;letter-spacing:-.01em;font-weight:600}
.produto-operacional[data-op-tema] .op-sidebar nav {display:flex;grid-column:1/-1;grid-row:2;align-items:center;gap:6px;margin:0;overflow-x:auto}
.produto-operacional[data-op-tema] .op-sidebar nav button {
  display:flex;align-items:center;justify-content:center;gap:8px;flex:none;width:auto;
  height:38px;padding:0 14px;border-radius:8px;border:1px solid transparent;color:var(--exp-muted);font-size:14px;font-weight:500;
}
.produto-operacional[data-op-tema] .op-sidebar nav button:hover {background:var(--surface-soft);color:var(--exp-ink)}
.produto-operacional[data-op-tema] .op-sidebar nav button.ativo {background:var(--exp-surface);border-color:transparent;color:var(--exp-ink);box-shadow:none}
.produto-operacional[data-op-tema] .op-sidebar nav button::before,.produto-operacional[data-op-tema] .op-sidebar nav button::after {display:none}
.produto-operacional[data-op-tema] .op-sidebar nav button i {font-style:normal;font-size:17px}
.produto-operacional[data-op-tema] .op-sidebar__fim {grid-column:3;grid-row:1;display:flex;flex-direction:row;align-items:center;gap:8px;margin:0;padding:0;border:0}
.produto-operacional[data-op-tema] .op-sidebar__fim .op-live {display:none}
.produto-operacional[data-op-tema] #op-sair {margin:0;padding:9px 12px;color:var(--exp-muted)}
.produto-operacional[data-op-tema] .op-founder-link {font-size:11px;max-width:112px;color:var(--exp-accent)}
.produto-operacional[data-op-tema] .op-main {width:100%;margin:0 auto;padding:24px 28px 56px;min-width:0}
.produto-operacional[data-op-tema] .op-main--montagem {max-width:none;padding-bottom:8px}
.produto-operacional[data-op-tema] .op-workspace-bar {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid var(--exp-line)}
.produto-operacional[data-op-tema] .exp-motion-toggle {background:transparent;color:var(--exp-muted);border-color:var(--exp-line);font-size:11px}
.produto-operacional[data-op-tema] .op-company-current {display:flex;align-items:center;gap:10px}
.produto-operacional[data-op-tema] .op-company-current span {font-size:10px;color:var(--exp-muted);letter-spacing:.09em}
.produto-operacional[data-op-tema] .op-company-current strong {font-size:13px;color:var(--exp-ink)}
.produto-operacional[data-op-tema] .op-subnav {display:flex;gap:8px;margin:0 0 24px;padding:0;background:transparent;border:0;overflow-x:auto}
.produto-operacional[data-op-tema] .op-subnav button {border:1px solid var(--exp-line);border-radius:8px;padding:9px 15px;background:transparent;color:var(--exp-muted);white-space:nowrap}
.produto-operacional[data-op-tema] .op-subnav button.ativo {background:var(--exp-surface);color:var(--exp-ink);box-shadow:0 2px 4px #00000009}
.produto-operacional[data-op-tema] .op-head {margin-bottom:24px}
.produto-operacional[data-op-tema] .op-head h1 {font-family:inherit;font-size:24px;font-weight:600;letter-spacing:-.035em;color:var(--exp-ink)}
.produto-operacional[data-op-tema] .op-head h1 em {font-family:Georgia,serif;font-weight:400;color:var(--exp-muted)}
.produto-operacional[data-op-tema] .op-head p {color:var(--exp-muted);font-size:14px;max-width:760px;line-height:1.65}
.produto-operacional[data-op-tema] :is(.op-panel,.op-stat,.op-library-card,.op-company-context,.op-radar-intro,.op-radar-new,.op-radar-count,.op-agenda) {background:var(--exp-paper);border-color:var(--exp-line);border-radius:14px;color:var(--exp-ink);box-shadow:none}
.produto-operacional[data-op-tema] :is(.op-panel,.op-head,.op-workspace-bar,.op-subnav) :is(input,select,textarea) {background:var(--surface-soft);color:var(--exp-ink);border-color:var(--exp-line)}
.produto-operacional[data-op-tema] :is(.op-primary,.op-btn-primary) {background:linear-gradient(oklch(.546 .245 262.881 / .85),var(--exp-accent));border-color:var(--exp-accent);border-radius:8px;color:#fff;box-shadow:inset 0 1px 0 #fff3}
.produto-operacional[data-op-tema] :is(.op-outline,.op-link,.op-upload) {color:var(--exp-ink);border-color:var(--exp-line)}
.produto-operacional[data-op-tema] :is(.op-empty,.op-help,.op-section-title small,.op-panel p,.op-stat span) {color:var(--exp-muted)}
.produto-operacional[data-op-tema] :is(.op-panel h2,.op-panel h3,.op-section-title h2,.op-stat strong) {color:var(--exp-ink)}
.produto-operacional[data-op-tema] .op-toast {background:var(--exp-surface);color:var(--exp-ink);border:1px solid var(--exp-line)}
/* Consumo do armazenamento: nasceu com cores fixas escuras e virava uma tarja
   preta no tema claro, logo acima do Langris Clip. Agora segue o tema. */
.produto-operacional[data-op-tema] .op-studio-storage {background:var(--exp-paper);border-color:var(--exp-line);border-radius:14px}
.produto-operacional[data-op-tema] .op-studio-storage :is(span,small) {color:var(--exp-muted)}
.produto-operacional[data-op-tema] .op-studio-storage strong {color:var(--exp-ink)}
.produto-operacional[data-op-tema] .op-studio-storage>i {border-radius:99px;background:var(--surface-soft)}
.produto-operacional[data-op-tema] .op-editor-embutido {height:calc(100dvh - 270px);min-height:580px;padding:0;position:relative;border:1px solid var(--exp-line);border-radius:12px;overflow:hidden;background:var(--exp-surface)}
.produto-operacional[data-op-tema] .op-editor-embutido iframe {display:block;width:100%;height:100%;min-height:0;border:0}
/* Estados da moldura do editor. Enquanto nao esta pronta, o <iframe> fica
   invisivel (e fora do percurso do teclado) e quem fala e o cartao por cima:
   uma recusa de moldura nao consegue pintar a propria mensagem, e sem isto o
   retangulo ficaria branco e mudo. `visibility` e nao `display`: o editor
   continua carregando e medindo o tamanho certo. */
.produto-operacional[data-op-tema] .op-editor-embutido:not([data-estado="pronto"]) iframe {visibility:hidden}
.produto-operacional[data-op-tema] .op-editor-estado {position:absolute;inset:0;display:grid;place-items:center;padding:28px;overflow:auto;background:var(--exp-surface)}
.produto-operacional[data-op-tema] .op-editor-embutido[data-estado="pronto"] .op-editor-estado {display:none}
.produto-operacional[data-op-tema] .op-editor-cartao {display:grid;justify-items:center;gap:10px;max-width:520px;text-align:center}
.produto-operacional[data-op-tema] .op-editor-cartao strong {color:var(--exp-ink);font-size:16px;font-weight:600}
.produto-operacional[data-op-tema] .op-editor-cartao p {margin:0;color:var(--exp-muted);font-size:13px;line-height:1.6}
.produto-operacional[data-op-tema] .op-editor-acoes {display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.produto-operacional[data-op-tema] .op-editor-acoes :is(a,button) {text-decoration:none}
.produto-operacional[data-op-tema] .op-editor-giro {width:26px;height:26px;border:2px solid var(--exp-line);border-top-color:var(--exp-accent);border-radius:50%;animation:girar 1s linear infinite}
@media (prefers-reduced-motion: reduce) {
 .produto-operacional[data-op-tema] .op-editor-giro {animation:none}
}
.produto-operacional[data-op-tema] .op-radar-tabs {display:flex;gap:8px;border:0;margin-bottom:22px;background:transparent;padding:0}
.produto-operacional[data-op-tema] .op-radar-tabs button {padding:9px 16px;border:1px solid var(--exp-line);border-radius:8px;background:transparent;color:var(--exp-muted)}
.produto-operacional[data-op-tema] .op-radar-tabs button.ativo {background:var(--exp-accent-soft);color:var(--exp-accent-text)}
.produto-operacional[data-op-tema] .op-radar-world {background:var(--exp-paper);border:1px solid var(--exp-line);border-radius:14px;overflow:hidden;color:var(--exp-ink)}
.produto-operacional[data-op-tema] .op-radar-stage {display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:560px}
.produto-operacional[data-op-tema] .op-radar-canvas-wrap {position:relative;min-height:560px;background:#080807;overflow:hidden}
.produto-operacional[data-op-tema] radar-globe {display:block;width:100%;height:100%;min-height:560px;position:absolute;inset:0}
.produto-operacional[data-op-tema] radar-globe canvas {display:block;width:100%;height:100%}
.produto-operacional[data-op-tema] .op-radar-detail {padding:24px;border-left:1px solid var(--exp-line);background:var(--exp-paper);color:var(--exp-muted);overflow:auto;max-height:650px}
.produto-operacional[data-op-tema] .op-radar-detail h3 {color:var(--exp-ink);font-size:20px;line-height:1.4}
.produto-operacional[data-op-tema] .op-radar-canvas-label {pointer-events:none;position:absolute;bottom:20px;left:24px;color:#91a5be;z-index:2}
.produto-operacional[data-op-tema] .op-radar-filters {padding:16px 24px;gap:12px;border-block:1px solid var(--exp-line);background:var(--exp-paper)}
.produto-operacional[data-op-tema] .op-radar-filters select {background:var(--exp-paper);color:var(--exp-ink);border-color:var(--exp-line);max-width:210px}
.produto-operacional[data-op-tema] .op-radar-filters label {color:var(--exp-muted)}
.produto-operacional[data-op-tema] .op-radar-stream {border-top:1px solid var(--exp-line);padding:24px}
.produto-operacional[data-op-tema] .op-radar-not-measured {padding:16px 20px;margin-bottom:20px;border:1px solid var(--exp-line);background:var(--exp-surface);border-radius:12px;color:var(--exp-muted)}
.produto-operacional[data-op-tema] .op-radar-law {margin-top:16px;color:var(--exp-muted);font-size:12px}
.produto-operacional[data-op-tema] :focus-visible {outline:2px solid var(--exp-accent);outline-offset:3px}
/* Pele Pulso — fundação (rebranding de 26/09/2026). Só escuro: o prefixo é
   body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]). O claro fica como estava.
   Foco: anel limão de 2px no escuro (16,6:1 sobre o preto). Os dois :not() deixam de fora o editor de artes
   e as telas de entrada (login e abertura, que vão para o limão numa rodada própria) e dão peso (0,6,1): vencem
   o anel cobalto de operacao-cobalto.css (0,5,1, que carrega depois) e o azul acima. Só cor e espessura: o
   estilo e o deslocamento continuam vindo da cascata, então quem tira o contorno de propósito (campo com anel
   por sombra) e os deslocamentos para dentro (-3px, -2px) seguem valendo. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :focus-visible:not(.me-editor):not(.me-editor *,.login-shell *,.langris-abertura *) {outline-color:var(--lg-limao);outline-width:2px}
/* Paletas paralelas apontam para os tokens (só escuro): Vídeo, Clip e o diálogo de agendar cortes (vence
   studio-clip.css, 0,4,1) e o Gerar com IA (vence a neutralização de operacao-cobalto.css, 0,3,1). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-video,.clip[data-clip],.op-dialog.clip-agendar) {
  --video-verde:var(--lg-limao);--video-verde-ink:var(--lg-sobre-limao);--video-verde-suave:color-mix(in srgb,var(--lg-limao) 16%,transparent);
  --video-magenta:var(--lg-rosa);--video-violeta:var(--lg-violeta);--video-linha:var(--lg-linha);--video-cta:var(--lg-cta);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .mg {
  --mg-live:var(--lg-limao);--mg-accent:var(--lg-limao);--mg-accent-text:var(--lg-limao);
  --mg-pink:var(--lg-rosa);--mg-violet:var(--lg-violeta-texto);--mg-warm:var(--lg-ambar);
  --mg-line:var(--lg-linha);--mg-spectrum:var(--lg-espectro);
}
/* Fim Pele Pulso */
/* O grupo de contas da Demografia corta o que passa da borda (overflow): por fora, o anel sobrava só nas laterais.
   Por dentro do botão, como o foco da .op-subnav em langris.css. */
body.produto-operacional[data-op-tema="escuro"] .op-demography-accounts button:focus-visible {outline-offset:-3px}
.produto-operacional[data-op-tema] .op-head .op-kicker {display:none}
.produto-operacional[data-op-tema] .op-radar-worldbar {background:var(--exp-paper);border-color:var(--exp-line)}
body.produto-operacional[data-op-tema] .op-workspace-bar :is(.op-company-current,.op-company-switch) {background:transparent;border-color:var(--exp-line);padding:8px 0;min-width:0;box-shadow:none}
body.produto-operacional[data-op-tema] .op-workspace-bar .op-company-switch select {background:var(--exp-paper);color:var(--exp-ink);border-color:var(--exp-line)}
body.produto-operacional[data-op-tema] .op-radar-world {
 --factory-canvas:var(--exp-paper);--factory-lift:var(--surface-soft);--factory-stroke:var(--exp-line);
 --factory-bone:var(--exp-ink);--factory-chalk:var(--exp-ink);--factory-muted:var(--exp-muted);--factory-stone:var(--exp-muted);--factory-orange:var(--exp-accent);
}
body.produto-operacional[data-op-tema] .op-radar-world :is(.op-radar-stats span,.op-radar-filters label,.op-radar-pause,.op-radar-meta div,.op-radar-evidence article) {background:var(--exp-paper);border-color:var(--exp-line);color:var(--exp-muted)}
body.produto-operacional[data-op-tema] .op-radar-world :is(.op-outline,.op-link) {color:var(--exp-ink);background:transparent;border-color:var(--exp-line)}
body.produto-operacional[data-op-tema] .op-radar-world .op-section-title :is(h2,span) {color:var(--exp-ink)}
body.produto-operacional[data-op-tema] .op-radar-world .op-empty {background:var(--exp-surface);color:var(--exp-muted);border-color:var(--exp-line)}
.produto-operacional[data-op-tema] .op-radar-stream-empty {padding:28px 16px}
.produto-operacional[data-op-tema] .op-radar-stream-empty :is(strong,p),.produto-operacional[data-op-tema] .op-radar-detail-empty :is(strong,p) {font-size:14px}
.produto-operacional[data-op-tema] .op-radar-stats b {font-size:20px;font-weight:600}
.produto-operacional[data-op-tema] .op-radar-law strong {color:var(--exp-muted)}
.produto-operacional[data-op-tema] :is(.op-radar-worldbar,.op-radar-filters,.op-radar-stats,.op-radar-stream,.op-radar-detail,.op-radar-law) {font-family:inherit}
.produto-operacional[data-op-tema] :is(.op-radar-worldbar,.op-radar-stats,.op-radar-stream,.op-radar-detail) :is(h2,h3,strong,b) {color:var(--exp-ink)}
.produto-operacional[data-op-tema] :is(.op-radar-stream,.op-radar-detail,.op-radar-law) :is(p,small,dt,dd,span,em) {color:var(--exp-muted)}
.produto-operacional[data-op-tema] .op-radar-law {border:0;background:transparent;text-align:center;display:block;padding:12px;box-shadow:none}
.produto-operacional[data-op-tema] .op-radar-not-measured {background:transparent;padding:10px 0;border:0}
.produto-operacional[data-op-tema] .op-radar-not-measured span {font-size:12px;color:var(--exp-muted)}
.produto-operacional[data-op-tema] .op-radar-not-measured button {color:var(--exp-ink);text-decoration:underline}
.produto-operacional[data-op-tema] .op-radar-render-error {position:absolute;top:24px;left:24px;right:24px;color:#d5d4d0;font-size:14px;z-index:4}
.produto-operacional[data-op-tema] .op-radar-detail-empty i {border-color:var(--exp-line);color:var(--exp-muted);box-shadow:none}
/* As superfícies que antes eram papel fixo seguem o tema, sem tocar no editor nativo. */
body.produto-operacional[data-op-tema] :is(.op-studio-library-home,.op-studio-library-home > header,.op-studio-library-home > footer,.op-library-toolbar,.op-library-toolbar label,.op-library-card:hover,.op-library-projects > article,.op-library-projects > aside,.op-studio-accounts,.op-studio-account-list > span,.op-company-context-intro,.op-demography-hero,.op-demography-pending,.op-demography-radar-link,.op-radar-targets article,.op-pub-account-hero,.op-pub-kpis,.op-pub-observed,.op-demography-accounts button,.op-demography-kpis article,.op-demography-card,.op-instagram-observed .op-kpis article,.modal__caixa) {background:var(--exp-paper);border-color:var(--exp-line);color:var(--exp-ink)}
body.produto-operacional[data-op-tema] :is(.op-radar-discovery-stats span,.op-radar-candidates article,.op-radar-limit,.op-library-more,.op-studio-upload,.op-company-context__save,.op-company-import__zone,.op-check,.op-media-origins,.op-month-weekdays,.op-month-day.vazio,.op-pub-tabs,.op-demography-source,.op-usage i) {background:var(--exp-surface);border-color:var(--exp-line);color:var(--exp-muted)}
body.produto-operacional[data-op-tema] :is(.op-radar-profile input,.op-radar-new input,.op-radar-new select,.op-radar-new textarea,.op-company-context__grid input,.op-company-context__grid textarea,.op-dialog__grid input,.op-dialog__grid select,.op-dialog__grid textarea,.op-inline-form input) {background:var(--surface-soft);color:var(--exp-ink);border-color:var(--exp-line)}
/* 26/09/2026 (escuro como padrão): no escuro o contorno do campo é o token de campo (--line-strong = --id-input-line),
   não a linha de cartão, e o exemplo sai em --muted: o cinza padrão do navegador (#757575) não muda com
   color-scheme e ficava abaixo de 4,5:1 sobre o preenchimento. O trilho do consumo deixa de ter a cor do painel. O claro fica como estava. */
body.produto-operacional[data-op-tema="escuro"] :is(.op-radar-profile input,.op-radar-new input,.op-radar-new select,.op-radar-new textarea,.op-company-context__grid input,.op-company-context__grid textarea,.op-dialog__grid input,.op-dialog__grid select,.op-dialog__grid textarea,.op-inline-form input) {border-color:var(--line-strong)}
body.produto-operacional[data-op-tema="escuro"] :is(.op-radar-profile input,.op-radar-new input,.op-radar-new textarea,.op-company-context__grid input,.op-company-context__grid textarea,.op-dialog__grid input,.op-dialog__grid textarea,.op-inline-form input,.op-pub-filterbar input,.op-network-fields input,input.me-search,.me-field input,.me-field textarea)::placeholder {color:var(--muted);opacity:1}
body.produto-operacional[data-op-tema="escuro"] .op-panel .op-usage i {background:var(--surface-soft)}
body.produto-operacional[data-op-tema] :is(.op-radar-profile label,.op-radar-new label,.op-company-context__grid label) {color:var(--exp-muted)}
body.produto-operacional[data-op-tema] :is(.op-library-toolbar nav b,.op-radar-context-terms span,.op-pub-tabs button.ativo,.op-pub-filterbar button.ativo,.op-demography-accounts button.ativo,.op-pub-account.ativo,.op-month-event) {background:var(--exp-accent-soft);border-color:var(--exp-line);color:var(--exp-accent-text)}
body.produto-operacional[data-op-tema] .op-month-day {background:var(--exp-paper);border-color:var(--exp-line);color:var(--exp-ink)}
body.produto-operacional[data-op-tema] .op-month-day.hoje {background:var(--exp-surface);box-shadow:inset 0 0 0 1px var(--exp-accent)}
body.produto-operacional[data-op-tema] .op-month-day > header b {background:var(--surface-soft);color:var(--exp-muted)}
body.produto-operacional[data-op-tema] :is(.op-studio-upload:hover,.op-month-add:hover,button.op-month-event:hover) {background:var(--surface-soft);color:var(--exp-ink);border-color:var(--exp-accent)}
body.produto-operacional[data-op-tema] .op-main:has(.op-radar-world) .op-head {margin-bottom:12px}
body.produto-operacional[data-op-tema] .op-main:has(.op-radar-world) .op-inline-actions {margin:0 0 12px}
body.produto-operacional[data-op-tema] .op-radar-not-measured {gap:12px;padding:6px 0;margin-bottom:12px}
body.produto-operacional[data-op-tema] .op-radar-not-measured button {min-height:30px;padding:4px 0}
body.produto-operacional[data-op-tema] .op-radar-worldbar {padding:12px 20px}
body.produto-operacional[data-op-tema] .op-radar-worldbar > div > span {color:var(--exp-accent-text)}
body.produto-operacional[data-op-tema] .op-radar-stats span {padding:4px 13px;font-size:10px}
body.produto-operacional[data-op-tema] .op-radar-filters {padding-block:12px}
body.produto-operacional[data-op-tema] .op-outline {background:var(--exp-paper);color:var(--exp-ink);border-color:var(--exp-line)}
body.produto-operacional[data-op-tema] .op-outline:hover {background:var(--surface-soft);border-color:var(--exp-accent)}
body.produto-operacional[data-op-tema] :is(.op-empty,.op-notice,.op-dialog__notice) {background:var(--exp-surface);border-color:var(--exp-line);color:var(--exp-muted)}
body.produto-operacional[data-op-tema] :is(.op-radar-intro h2,.op-radar-count span,.op-month-summary strong,.op-dialog__notice strong) {color:var(--exp-ink)}
body.produto-operacional[data-op-tema] .op-radar-count strong {color:var(--exp-accent-text)}
body.produto-operacional[data-op-tema] .op-kicker {color:var(--exp-accent-text)}
body.produto-operacional[data-op-tema] .op-media-origins :is(span,small) {color:var(--exp-muted)}
body.produto-operacional[data-op-tema] .exp-motion-toggle:is(:hover,[aria-pressed="true"]) {background:var(--surface-soft);color:var(--exp-ink);border-color:var(--exp-line)}
body.produto-operacional[data-op-tema] .op-brand {display:flex}
body.produto-operacional[data-op-tema] .op-guard.neutra {background:var(--exp-surface);border-color:var(--exp-line)}
body.produto-operacional[data-op-tema] .op-guard.neutra strong {color:var(--exp-ink)}
body.produto-operacional[data-op-tema] .op-guard.neutra p {color:var(--exp-muted)}
body.produto-operacional[data-op-tema] .op-radar-filters label {padding:0;gap:8px}
body.produto-operacional[data-op-tema] .op-radar-filters select {min-height:34px;border:1px solid var(--exp-line);border-radius:6px;padding:6px 8px;font-size:12px}
body.produto-operacional[data-op-tema] .op-radar-pause {padding:8px 10px;border-radius:6px;font-size:11px}
.produto-operacional[data-op-tema] [hidden] {display:none!important}
@media(min-width:1400px){
 .produto-operacional[data-op-tema] .op-sidebar {grid-template-columns:auto auto minmax(140px,1fr) auto}
 .produto-operacional[data-op-tema] .op-sidebar nav {grid-column:2;grid-row:1}
 .produto-operacional[data-op-tema] .op-sidebar__fim {grid-column:4}
}
@media(max-width:1100px){
 .produto-operacional[data-op-tema] .op-sidebar {gap:8px 12px;padding:10px 16px}
 .produto-operacional[data-op-tema] .op-main {padding:18px 20px 36px}
 .produto-operacional[data-op-tema] .op-radar-stage {grid-template-columns:minmax(0,1fr) 300px}
}
@media(max-width:700px){
 .produto-operacional[data-op-tema] .op-sidebar {position:relative;gap:10px}
 .produto-operacional[data-op-tema] .op-brand span {font-size:14px}
 .produto-operacional[data-op-tema] .op-sidebar__fim .op-founder-link {max-width:74px;font-size:10px}
 .produto-operacional[data-op-tema] .op-sidebar nav button {padding:9px 11px;font-size:12px}
 .produto-operacional[data-op-tema] .op-sidebar nav button i {display:none}
 .produto-operacional[data-op-tema] .op-main {padding:16px 16px 32px}
 .produto-operacional[data-op-tema] .op-workspace-bar {align-items:flex-start;flex-direction:column;gap:12px}
 .produto-operacional[data-op-tema] .op-radar-stage {grid-template-columns:1fr}
 .produto-operacional[data-op-tema] :is(.op-radar-canvas-wrap,radar-globe) {min-height:380px}
 .produto-operacional[data-op-tema] .op-radar-detail {max-height:none;border-left:0;border-top:1px solid #293242}
 .produto-operacional[data-op-tema] .op-radar-filters {display:grid;grid-template-columns:1fr 1fr;padding:14px}
 .produto-operacional[data-op-tema] .op-radar-filters select {width:100%;max-width:none}
 .produto-operacional[data-op-tema] .op-radar-worldbar {padding:18px;gap:14px;flex-wrap:wrap}
 .produto-operacional[data-op-tema] .op-editor-embutido {min-height:680px;height:calc(100dvh - 200px)}
}

/* Início operacional: escopo próprio, sem herdar os cards brancos da landing. */
.produto-operacional[data-op-tema] .op-start {--start-card:#0b0b0e;--start-line:#29292f;--start-text:#f8f8fb;--start-muted:#9b9ba6;color:var(--start-text)}
.produto-operacional[data-op-tema="claro"] .op-start {--start-card:#fff;--start-line:#d5d8e0;--start-text:#17191f;--start-muted:#515969}
.op-start :is(h1,h2,h3,p) {margin:0}
.op-start button {font:inherit;cursor:pointer}
.op-start button:disabled {cursor:default}
.op-start-head {display:flex;justify-content:space-between;align-items:center;gap:24px;margin:10px 0 32px}
.op-start .op-start-eyebrow {display:block;font-size:11px;font-weight:650;letter-spacing:.12em;color:var(--start-muted);margin-bottom:10px}
.op-start .op-start-head h1 {font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.055em;color:var(--start-text);line-height:1.2}
.op-start .op-start-head p {font-size:15px;line-height:1.6;color:var(--start-muted);margin-top:10px}
.op-start .op-start-library {flex:none;padding:12px 17px;border:1px solid var(--start-line);background:var(--start-card);color:var(--start-text);border-radius:10px;min-height:44px}
.op-start .op-start-section {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:17px}
.op-start .op-start-section h2 {font-size:19px;font-weight:600;letter-spacing:-.03em;color:var(--start-text)}
.op-start .op-start-section :is(p,span) {font-size:12px;line-height:1.6;color:var(--start-muted)}
.op-start .op-start-section p {margin-top:5px}
.produto-operacional[data-op-tema] .op-start .op-start-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 32px}
.produto-operacional[data-op-tema] .op-start .op-start-card {display:flex;flex-direction:column;min-width:0;padding:0;text-align:left;overflow:hidden;border:1px solid var(--start-line);border-radius:16px;background:var(--start-card);color:var(--start-text);box-shadow:none;opacity:1;transition:border-color .18s,box-shadow .18s}
.op-start .op-start-card:not(:disabled):is(:hover,:focus-visible) {border-color:#8e8e99;box-shadow:0 14px 34px #0006}
.op-start .op-start-card:focus-visible {outline:2px solid #b8ff57;outline-offset:4px}
.op-start .op-start-card__body {display:flex;flex:1;flex-direction:column;padding:20px}
.op-start .op-start-card__title {font-size:19px;font-weight:600;letter-spacing:-.03em;color:var(--start-text);line-height:1.3}
.op-start .op-start-card__description {font-size:13px;line-height:1.6;color:var(--start-muted);margin:8px 0 18px}
.op-start .op-start-card__action {display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:12px;font-weight:600;color:var(--start-text)}
.op-start .op-start-card:disabled .op-start-card__action {color:var(--start-muted)}
.op-start .op-start-preview {display:block;position:relative;isolation:isolate;width:100%;height:220px;overflow:hidden;background:#23232a;color:#fff;border-bottom:1px solid var(--start-line);contain:layout paint}
.op-start .op-start-preview * {box-sizing:border-box}
.op-start .op-start-preview .op-start-demo-label {position:absolute;top:16px;left:18px;z-index:5;font:600 9px/1.4 system-ui;letter-spacing:.13em;color:#eef1fb}
.op-start .op-start-card--video .op-start-preview {background:radial-gradient(at 70% 30%,#45434e,#19181e 80%)}
.op-start .op-start-film {position:absolute;width:145px;height:180px;left:18%;top:34px;border:5px solid #43434a;border-radius:11px;background:#19171a;transform:rotate(-8deg);overflow:hidden;box-shadow:0 12px 28px #0006}
.op-start .op-start-film img {display:block;width:100%;height:100%;object-fit:cover}
.op-start .op-start-film>span {position:absolute;left:10px;top:22px;font-size:17px;font-weight:800;letter-spacing:-.04em;line-height:1.1;color:#fff}
.op-start .op-start-film>i {position:absolute;right:8px;bottom:8px;font-style:normal;background:#e2ffc3;color:#101910;border-radius:50%;padding:6px;font-size:10px}
.op-start .op-start-film--small {left:51%;top:53px;width:109px;height:146px;transform:rotate(8deg)}
.op-start .op-start-film--small>span {top:auto;bottom:18px;font-size:14px;background:#17171acc;padding:5px}
.op-start .op-start-timeline {position:absolute;bottom:12px;left:12%;width:76%;height:28px;display:flex;gap:4px;padding:5px;background:#15131fe8;border:1px solid #565262;border-radius:5px}
.op-start .op-start-timeline i {height:16px;width:30%;border-radius:2px;background:repeating-linear-gradient(90deg,#9c83c9 0 4px,#b0a0d9 4px 7px)}
.op-start .op-start-timeline b {position:absolute;left:45%;top:-4px;width:2px;height:36px;background:#e0ffc0}
.op-start .op-start-card--artes .op-start-preview {background:#dbdad1}
.op-start .op-start-card--artes .op-start-demo-label {color:#323332}
.op-start .op-start-paper {position:absolute;width:132px;height:166px;top:46px;padding:12px;box-shadow:0 9px 16px #29251625;overflow:hidden;font-style:normal}
.op-start .op-start-paper small {display:block;font-size:6px;letter-spacing:.07em;margin-bottom:16px}
.op-start .op-start-paper strong {font-size:20px;line-height:1.07;letter-spacing:-.06em;display:block}
.op-start .op-start-paper--one {left:6%;transform:rotate(-9deg);background:#e4ff80;color:#202321;z-index:2}
.op-start .op-start-paper--one i {position:absolute;bottom:9px;right:10px;font-size:30px}
.op-start .op-start-paper--two {left:35%;top:41px;transform:rotate(3deg);background:#d86c42;color:#28180e;z-index:3}
.op-start .op-start-paper--two i {display:block;width:77px;height:55px;border:16px solid #ecb595;border-radius:50%;margin-bottom:12px;transform:rotate(-35deg)}
.op-start .op-start-paper--two strong {font-family:Georgia,serif;font-size:18px;letter-spacing:-.05em;font-weight:400}
.op-start .op-start-paper--three {left:64%;top:55px;transform:rotate(11deg);background:#eeece2;color:#383944;z-index:1}
.op-start .op-start-paper--three strong {font-size:16px}.op-start .op-start-paper--three i {font-size:43px;color:#9b89bb;line-height:1.2;font-style:normal}
.op-start .op-start-card--ia .op-start-preview {background:radial-gradient(ellipse at 55% 70%,#414a8c,#171e33 80%)}
.op-start .op-start-ai-scene {display:block;position:absolute;inset:0;perspective:500px}
.op-start .op-start-ai-scene i {position:absolute;left:28%;top:51px;width:105px;height:105px;border-radius:28px;border:1px solid #c0cafa60;background:linear-gradient(140deg,#e0e7ff50,#777dc310);transform:rotate(-18deg);box-shadow:0 15px 25px #0b132050}
.op-start .op-start-ai-scene i:nth-child(2) {left:43%;top:60px;transform:rotate(3deg);background:linear-gradient(140deg,#adccff60,#6463b940)}
.op-start .op-start-ai-scene i:nth-child(3) {left:55%;top:73px;transform:rotate(18deg)}
.op-start .op-start-ai-scene b {position:absolute;left:46%;top:89px;font-size:42px;color:#e8ecff}
.op-start .op-start-ai-caption {position:absolute;bottom:15px;left:0;right:0;text-align:center;color:#d8e1ff;font-size:11px;letter-spacing:.04em}
.op-start .op-start-card--radar .op-start-preview {background:radial-gradient(at 50% 70%,#202950,#0e1526)}
.op-start .op-start-globe {display:block;position:absolute;width:100%;height:240px;top:1px;left:0}
.op-start .op-start-radar-note {position:absolute;bottom:14px;right:14px;padding:7px 9px;border:1px solid #a2b5f13d;background:#111b34e6;border-radius:6px;font-size:9px;color:#dfe7ff}
.op-start .op-start-card--agenda .op-start-preview {background:#d9dfdb}.op-start .op-start-card--agenda .op-start-demo-label {color:#2e4338}
.op-start .op-start-calendar {display:block;position:absolute;left:9%;top:47px;width:82%;height:190px;transform:rotate(-4deg);border-radius:9px;background:#f8faf7;border:1px solid #aebbb2;box-shadow:0 12px 24px #28362b25;color:#33473b;padding:13px}
.op-start .op-start-calendar-head {display:flex;justify-content:space-between;font-size:11px}.op-start .op-start-calendar-head i {font-style:normal}
.op-start .op-start-calendar-days {display:grid;grid-template-columns:repeat(5,1fr);margin-top:12px;text-align:center;font-size:6px;font-weight:700}
.op-start .op-start-calendar-days i {font-style:normal}.op-start .op-start-calendar-grid {display:grid;position:relative;grid-template-columns:repeat(5,1fr);margin-top:7px}
.op-start .op-start-calendar-grid>i {height:35px;border:1px solid #e7ece7}
.op-start .op-start-event {position:absolute;left:1%;top:6px;width:55%;padding:8px;border:1px solid #aec6a3;border-radius:4px;background:#e0edcf;font-size:9px;line-height:1.4;box-shadow:0 3px 5px #3331}
.op-start .op-start-event span {display:block;font-size:6px;color:#415938}.op-start .op-start-event small {display:block;font-size:6px;font-weight:400}
.op-start .op-start-event--two {left:44%;top:66px;width:52%;background:#e4def2;border-color:#c5b7e1;font-size:7px}
.op-start .op-start-card--resultados .op-start-preview {background:radial-gradient(at 60% 60%,#283935,#101e1b)}
.op-start .op-start-chart {position:absolute;left:8%;right:8%;top:45px;border:1px solid #ffffff20;border-radius:11px;padding:14px;background:#162623;transform:rotate(3deg);box-shadow:0 12px 20px #0003}
.op-start .op-start-chart>span:first-child {display:flex;justify-content:space-between;align-items:center;gap:6px}
.op-start .op-start-chart b {font-size:12px;color:#f0f5ee}.op-start .op-start-chart small {font-size:7px;color:#b7c7c1}
.op-start .op-start-chart svg {width:100%;height:82px;margin:8px 0}
.op-start .op-start-chart-tabs {display:flex;gap:6px}
.op-start .op-start-chart-tabs i {font-style:normal;font-size:7px;border:1px solid #ffffff20;border-radius:4px;color:#d1e0d9;padding:4px 8px}
.op-start .op-start-notice {display:flex;align-items:center;gap:16px;padding:18px 20px;margin:0 0 32px;background:var(--start-card);border:1px solid var(--start-line);border-radius:12px}
.op-start .op-start-notice__icon {font-size:26px;color:var(--start-text)}
.op-start .op-start-notice strong {font-size:14px;color:var(--start-text)}
.op-start .op-start-notice p {font-size:12px;line-height:1.5;margin-top:4px;color:var(--start-muted)}
.op-start .op-start-notice button {margin-left:auto;white-space:nowrap;min-height:44px;padding:9px 14px;border:1px solid var(--start-line);border-radius:8px;background:transparent;color:var(--start-text);font-size:12px}
.op-start .op-start-recent {margin:38px 0 24px}
.op-start .op-start-text-link {background:none;border:0;padding:8px 0;min-height:44px;color:var(--start-text);white-space:nowrap;font-size:12px}
.op-start .op-start-recent-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.op-start .op-start-recent-card {display:flex;align-items:center;gap:12px;text-align:left;background:var(--start-card);border:1px solid var(--start-line);color:var(--start-text);padding:12px;border-radius:10px;min-width:0}
.op-start .op-start-recent-card>span:nth-child(2) {min-width:0;flex:1}
.op-start .op-start-recent-card strong {display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--start-text)}
.op-start .op-start-recent-card small {font-size:10px;display:block;margin-top:5px;color:var(--start-muted)}
.op-start .op-start-recent-thumb {display:grid;place-items:center;flex:none;width:46px;height:54px;background:var(--exp-accent-soft);border-radius:6px;overflow:hidden}
.op-start .op-start-recent-thumb img {width:100%;height:100%;object-fit:cover}.op-start .op-start-recent-thumb>span {font-size:18px}
.op-start .op-start-empty {display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:110px;padding:24px;border:1px dashed var(--start-line);border-radius:12px;color:var(--start-muted);font-size:13px}
.op-start .op-start-empty>span {font-size:26px;color:var(--start-text)}
.op-start .op-start-empty strong {display:block;font-size:14px;color:var(--start-text)}
.op-start .op-start-empty p {margin-top:5px;font-size:12px}
.op-start .op-start-empty button {margin-left:auto;border:0;background:none;color:var(--start-text);padding:10px;min-height:44px;font-size:12px}
.op-start .op-start-summary {display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:18px 0 24px;color:var(--start-muted);font-size:12px}
.op-start .op-start-summary strong {color:var(--start-text);margin-right:4px;font-size:15px}
.op-start .op-start-summary small {font-size:10px;margin-left:auto}
.produto-operacional[data-op-tema] .op-start .op-panel {padding:22px;background:var(--start-card);border-color:var(--start-line);color:var(--start-text)}
.op-start .op-activity>div {border-color:var(--start-line)}
.op-start .op-activity strong {color:var(--start-text)}.op-start .op-activity small {color:var(--start-muted)}
.op-start .op-section-title>div>span {color:var(--start-muted)}
@media(min-width:1450px) {.op-start .op-start-preview {height:250px}.op-start .op-start-film {left:25%}.op-start .op-start-film--small {left:54%}.op-start .op-start-timeline {bottom:16px}.op-start .op-start-paper {top:60px}.op-start .op-start-globe {height:260px}}
@media(max-width:1050px) {.produto-operacional[data-op-tema] .op-start .op-start-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.op-start .op-start-recent-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px) {
 .op-start-head {align-items:flex-start;flex-direction:column;gap:15px;margin-bottom:26px}
 .op-start .op-start-head h1 {font-size:29px}.op-start .op-start-head p {font-size:14px}
 .op-start .op-start-library {font-size:13px}.op-start .op-start-section {align-items:flex-start;flex-wrap:wrap;gap:6px}
 .produto-operacional[data-op-tema] .op-start .op-start-grid {grid-template-columns:1fr;gap:16px}
 .op-start .op-start-card__body {padding:18px}.op-start .op-start-card__title {font-size:20px}
 .op-start .op-start-notice {flex-wrap:wrap;padding:16px}.op-start .op-start-notice>div {flex:1;min-width:200px}
 .op-start .op-start-notice button {margin-left:0}
 .op-start .op-start-recent-grid {grid-template-columns:1fr}.op-start .op-start-summary {gap:14px}
 .op-start .op-start-summary small {margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce) {.op-start .op-start-card {transition:none}}

/* Início: hub de ferramentas, com o estado operacional em uma faixa compacta. */
.op-start .op-start-tools {margin-bottom:30px}
.op-start .op-start-section>div>span {display:block;margin-bottom:6px;color:var(--start-muted);font-size:9px;font-weight:750;letter-spacing:.16em}
.op-start .op-start-card__action b {font-size:15px;font-weight:500}
.op-start .op-start-activity-rail {--activity-color:#b8ff57;margin:8px 0 42px;overflow:hidden;border:1px solid var(--start-line);border-radius:14px;background:var(--start-card)}
.op-start .op-start-activity-rail.is-danger {--activity-color:#ff7378}
.op-start .op-start-activity-rail.is-attention {--activity-color:#ffd166}
.op-start .op-start-activity-rail.is-working {--activity-color:#bf8cff}
.op-start .op-start-activity-rail.is-ok {--activity-color:#b8ff57}
.op-start .op-start-activity-rail.is-unavailable {--activity-color:#9a9aa5}
.op-start .op-start-activity-rail__head {display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px;padding:9px 14px;border-bottom:1px solid var(--start-line)}
.op-start .op-start-activity-rail__head>span {display:flex;align-items:center;gap:8px;color:var(--start-muted);font-size:9px;font-weight:760;letter-spacing:.15em}
.op-start .op-start-activity-rail__head>span i {width:7px;height:7px;border-radius:50%;background:var(--activity-color);box-shadow:0 0 12px var(--activity-color)}
.op-start .op-start-activity-rail__head>button {display:flex;align-items:center;gap:9px;min-height:32px;padding:4px 0;border:0;background:transparent;color:var(--start-text);font-size:10px}
.op-start .op-start-activity-rail__head>button b {color:var(--activity-color);font-size:14px}
.op-start .op-start-activity-rail__grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--start-line)}
.op-start .op-start-activity-rail__grid>button {position:relative;display:grid;grid-template-rows:auto auto auto 1fr;min-width:0;min-height:116px;padding:16px 44px 15px 16px;text-align:left;border:0;background:var(--start-card);color:var(--start-text)}
.op-start .op-start-activity-rail__grid>button:is(:hover,:focus-visible) {background:color-mix(in srgb,var(--start-card) 88%,var(--activity-color))}
.op-start .op-start-activity-rail__grid>button:focus-visible {z-index:1;outline:2px solid var(--activity-color);outline-offset:-2px}
.op-start .op-start-activity-rail__grid>button>span {color:var(--activity-color);font-size:8px;font-weight:780;letter-spacing:.14em}
.op-start .op-start-activity-rail__grid>button>strong {margin-top:7px;overflow:hidden;color:var(--start-text);font-size:13px;line-height:1.25;white-space:nowrap;text-overflow:ellipsis}
.op-start .op-start-activity-rail__grid>button>small {display:-webkit-box;margin-top:5px;overflow:hidden;color:var(--start-muted);font-size:10px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.op-start .op-start-activity-rail__grid>button>b:last-child {position:absolute;right:16px;top:50%;color:var(--activity-color);font-size:15px;font-weight:500;transform:translateY(-50%)}
.op-start .op-start-activity-rail__progress {display:flex;align-items:center;gap:8px;margin-top:10px}
.op-start .op-start-activity-rail__progress>i {display:block;flex:1;height:4px;overflow:hidden;border-radius:99px;background:#ffffff1c}
.op-start .op-start-activity-rail__progress>i>b {display:block;height:100%;border-radius:inherit;background:var(--activity-color)}
.op-start .op-start-activity-rail__progress>small {color:var(--start-text);font-size:9px}
@media(max-width:900px) {.op-start .op-start-activity-rail__grid {grid-template-columns:1fr}.op-start .op-start-activity-rail__grid>button {min-height:96px}}
@media(max-width:600px) {.op-start .op-start-activity-rail__head {align-items:flex-start;flex-direction:column;gap:2px;padding:13px 15px}.op-start .op-start-activity-rail__head>button {min-height:28px}.op-start .op-start-activity-rail__grid>button {padding-right:40px}}
/* Agenda: destinos múltiplos, texto por rede e fio do X */
body.produto-operacional .op-destinos{display:flex;flex-wrap:wrap;gap:.5rem .9rem;border:1px solid var(--exp-line);border-radius:.6rem;padding:.6rem .8rem;margin:0}
body.produto-operacional .op-destinos legend{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.8;padding:0 .3rem}
body.produto-operacional .op-destinos small{flex-basis:100%;opacity:.8}
body.produto-operacional .op-destino{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
body.produto-operacional .op-destinos input[type=checkbox]{width:1.15rem;height:1.15rem;min-height:0;margin:0;flex:none;accent-color:var(--exp-accent,#c8642a)}
body.produto-operacional .op-x-editor textarea{min-height:5.5rem}
body.produto-operacional .op-fio-item textarea{min-height:4.2rem}
body.produto-operacional .op-x-editor{display:grid;gap:.5rem}
body.produto-operacional .op-x-editor[hidden],body.produto-operacional .op-caption-editor[hidden]{display:none}
body.produto-operacional .op-fio{display:grid;gap:.4rem}
body.produto-operacional .op-fio-item{display:grid;grid-template-columns:1fr auto auto;gap:.4rem;align-items:start}
body.produto-operacional .op-fio-item b{font-size:.75rem;opacity:.8;padding-top:.5rem}
body.produto-operacional .op-fio-lista{margin:.4rem 0 0;padding-left:1.2rem;display:grid;gap:.25rem}
/* Publicações X: métricas medidas, saúde e "o que engaja" */
body.produto-operacional .op-metricas-x{display:block;font-style:normal;opacity:.85;margin-top:.15rem}
body.produto-operacional .op-saude-x{margin:0 0 .8rem}
body.produto-operacional .op-saude-x small{display:block;opacity:.8;margin-top:.3rem}
/* A faixa de saúde tem cara própria no tema: a base `op-guard` sem variante fica lavada. */
body.produto-operacional[data-op-tema] .op-guard.op-saude-x{background:var(--exp-surface);border-color:var(--exp-line)}
body.produto-operacional[data-op-tema] .op-guard.op-saude-x strong{color:var(--exp-ink)}
body.produto-operacional[data-op-tema] .op-guard.op-saude-x p,body.produto-operacional[data-op-tema] .op-guard.op-saude-x small{color:var(--exp-muted)}
body.produto-operacional .op-saude-x[data-saude-x="ok"]{border-color:#789b6d}
body.produto-operacional .op-saude-x[data-saude-x="atencao"]{border-color:var(--factory-orange,#c8642a)}
body.produto-operacional .op-saude-x[data-saude-x="quebrado"]{border-color:#b95f55}
body.produto-operacional[data-op-tema] .op-instagram-observed .op-kpis strong{color:var(--exp-ink)}
body.produto-operacional .op-x-observed .op-engajamento-x{display:grid;gap:.35rem}
body.produto-operacional .op-x-observed .op-engajamento-x ul{margin:.2rem 0 0;padding-left:1.1rem;display:grid;gap:.2rem}
body.produto-operacional .op-x-observed .op-engajamento-x .op-help{margin:0}
body.produto-operacional .op-radar-retratos-intro{margin:0 0 1rem}
body.produto-operacional .op-radar-retratos-intro h2{margin:.2rem 0 .3rem}

/* ── Vídeo (25/09/2026, "tudo que está lá já pode subir") ───────────────────
   A casca `.op-video` veste as abas do menu Vídeo com os tokens do protótipo
   (verde, magenta, violeta, âmbar sobre preto). O Clip em si mora em
   css/studio-clip.css; aqui ficam o cabeçalho e a tela Criar vídeo. Tudo sob
   `.op-video` para não vazar para as outras abas. Tipografia mínima: 11 px. */
.produto-operacional[data-op-tema] .op-video {
  --video-verde:#b7ff48;--video-verde-ink:#0c1403;--video-verde-suave:rgba(183,255,72,.16);
  --video-magenta:#f153e9;--video-violeta:#8c67ff;--video-ambar:#ffad55;--video-erro:#ff626b;
  --video-palco:#090909;--video-linha:rgba(255,255,255,.1);
  /* O gradiente do CTA vai com as cores claras nos DOIS temas (como em studio-clip.css): o texto
     escuro por cima precisa delas; com o verde do tema claro (#486f00) ele não contrastava. */
  --video-cta:linear-gradient(100deg,#b7ff48,#ffe25c 38%,#f15ed4 72%,#8c67ff);
  /* 26/09/2026 (acabamento): a tela Criar vídeo marca a escolha em magenta, como a
     view `create` do protótipo video/ (pílulas, presença, foco do campo). */
  --cv-acento:var(--video-magenta);--cv-acento-suave:rgba(241,83,233,.1);
}
.produto-operacional[data-op-tema="claro"] .op-video {
  --video-verde:#486f00;--video-verde-ink:#ffffff;--video-verde-suave:rgba(72,111,0,.14);
  --video-ambar:#8a5c0b;--video-erro:#b3261e;--video-palco:#0b0b0b;--video-linha:rgba(0,0,0,.12);
  --video-magenta:#b0179f;--cv-acento:#b0179f;--cv-acento-suave:rgba(176,23,159,.1);
}
/* 26/09/2026 (acabamento): o cabeçalho segue a `.page-head` do protótipo — título
   grande e justo, apoio maior, ação alinhada pela base. */
.produto-operacional[data-op-tema] .op-video .op-head {align-items:flex-end;gap:18px 30px;margin-bottom:30px}
.produto-operacional[data-op-tema] .op-video .op-head h1 {font-size:clamp(38px,4.7vw,72px);font-weight:600;letter-spacing:-.06em;line-height:.96}
.produto-operacional[data-op-tema] .op-video .op-head > div > p {max-width:690px;margin-top:16px;font-size:clamp(14px,1.2vw,18px);line-height:1.45}
.produto-operacional[data-op-tema] .op-video .op-head__actions {align-items:flex-end;padding-bottom:4px}
.produto-operacional[data-op-tema] .op-video .op-head__actions .op-outline {min-height:42px;border-radius:999px}

/* Criar vídeo: direção à esquerda, "quem aparece" e revisão à direita. */
.produto-operacional[data-op-tema] .op-video .cv-layout {display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
/* 26/09/2026 (acabamento): a coluna da direita é UM cartão ("Quem aparece?" e a
   revisão separados por um fio), como o `.presenter-panel` do protótipo. */
.produto-operacional[data-op-tema] .op-video :is(.cv-brief,.cv-lado) {display:grid;gap:18px;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.produto-operacional[data-op-tema] .op-video .cv-lado {gap:0;align-content:start}
.produto-operacional[data-op-tema] .op-video .cv-lado>section {display:grid;gap:16px}
.produto-operacional[data-op-tema] .op-video .cv-revisao {margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.produto-operacional[data-op-tema] .op-video .op-vh {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.produto-operacional[data-op-tema] .op-video .cv-kicker {font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--video-verde);text-transform:uppercase}
.produto-operacional[data-op-tema] .op-video :is(.cv-quem,.cv-revisao,.cv-material) h2 {margin:2px 0 0;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.produto-operacional[data-op-tema] .op-video :is(.cv-quem,.cv-material) header p {margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.produto-operacional[data-op-tema] .op-video .cv-pauta {display:grid;gap:8px;padding:14px;border:1px solid var(--video-verde-suave);border-radius:14px;background:linear-gradient(120deg,var(--video-verde-suave),transparent 60%)}
.produto-operacional[data-op-tema] .op-video .cv-pauta>div {display:flex;align-items:center;gap:8px}
.produto-operacional[data-op-tema] .op-video .cv-pauta i {display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--video-verde);box-shadow:0 0 12px var(--video-verde)}
.produto-operacional[data-op-tema] .op-video .cv-pauta strong {font-size:16px;color:var(--ink)}
.produto-operacional[data-op-tema] .op-video .cv-pauta p {margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.produto-operacional[data-op-tema] .op-video .cv-pauta small {color:var(--muted);font-size:11px}
.produto-operacional[data-op-tema] .op-video .cv-pauta small a {color:var(--ink)}
.produto-operacional[data-op-tema] .op-video .cv-pauta .op-link {justify-self:start;padding:0;border:0;background:transparent;color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer}
/* 26/09/2026 — o roteiro pedido pelo "Produzir" do Início (pedido do dono: "mandar pra produção deveria ser exatamente isso… mandar produzir um vídeo"): andamento, falha, aplicado e a sugestão com "Usar este roteiro". */
.produto-operacional[data-op-tema] .op-video .cv-roteiro-caixa:empty {display:none}
.produto-operacional[data-op-tema] .op-video .cv-roteiro {margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--muted);font-size:13px;line-height:1.5}
.produto-operacional[data-op-tema] .op-video .cv-roteiro--escrevendo {border-color:var(--video-verde-suave)}
.produto-operacional[data-op-tema] .op-video .cv-roteiro--aplicado {border-color:var(--video-verde-suave);color:var(--ink)}
.produto-operacional[data-op-tema] .op-video .cv-roteiro--falhou {border-color:color-mix(in srgb,var(--video-erro) 40%,transparent);color:var(--video-erro)}
.produto-operacional[data-op-tema] .op-video .cv-roteiro--sugerido {display:grid;gap:8px;border-color:var(--cv-acento-suave)}
/* No escuro o magenta a 10% (token de preenchimento) sumia como borda; vai como a dos estados irmãos. */
.produto-operacional[data-op-tema="escuro"] .op-video .cv-roteiro--sugerido {border-color:color-mix(in srgb,var(--cv-acento) 45%,transparent)}
.produto-operacional[data-op-tema] .op-video .cv-roteiro__texto {margin:0;color:var(--ink);font-size:14px;line-height:1.55;white-space:pre-line}
.produto-operacional[data-op-tema] .op-video .cv-roteiro__nota {margin:0;font-size:12px}
.produto-operacional[data-op-tema] .op-video .cv-roteiro small {font-size:11px}
.produto-operacional[data-op-tema] .op-video .cv-roteiro__acoes {display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.produto-operacional[data-op-tema] .op-video .cv-roteiro__acoes .op-link {padding:0;border:0;background:transparent;color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer}
.produto-operacional[data-op-tema] .op-video .cv-campo {display:grid;gap:8px}
.produto-operacional[data-op-tema] .op-video .cv-campo>span {font-size:15px;font-weight:600;color:var(--ink)}
.produto-operacional[data-op-tema] .op-video .cv-campo textarea {width:100%;min-height:144px;padding:16px;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;line-height:1.45;resize:vertical}
.produto-operacional[data-op-tema] .op-video .cv-campo textarea:focus-visible {outline:0;border-color:var(--cv-acento);box-shadow:0 0 0 3px var(--cv-acento-suave)}
.produto-operacional[data-op-tema] .op-video .cv-campo small {color:var(--muted);font-size:11px}
.produto-operacional[data-op-tema] .op-video .cv-fieldset {display:grid;gap:10px;margin:0;padding:0;border:0;min-width:0}
.produto-operacional[data-op-tema] .op-video .cv-fieldset legend {padding:0;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--muted)}
.produto-operacional[data-op-tema] .op-video .cv-grupo {display:grid;gap:6px}
.produto-operacional[data-op-tema] .op-video .cv-grupo>span {font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.produto-operacional[data-op-tema] .op-video .cv-pilulas {display:flex;flex-wrap:wrap;gap:8px}
.produto-operacional[data-op-tema] .op-video .cv-pilulas [role="radio"] {display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;line-height:1.2;cursor:pointer;text-align:left}
.produto-operacional[data-op-tema] .op-video .cv-pilulas [role="radio"] b {font-weight:600}
.produto-operacional[data-op-tema] .op-video .cv-pilulas [role="radio"] small {display:block;color:var(--muted);font-size:11px}
.produto-operacional[data-op-tema] .op-video .cv-pilulas [role="radio"]:hover {border-color:var(--muted)}
.produto-operacional[data-op-tema] .op-video .cv-pilulas [role="radio"]:focus-visible {outline:2px solid var(--video-verde);outline-offset:2px}
.produto-operacional[data-op-tema] .op-video .cv-pilulas [role="radio"][aria-checked="true"] {border-color:var(--cv-acento);background:var(--cv-acento-suave)}
.produto-operacional[data-op-tema] .op-video .cv-pilulas [role="radio"][aria-disabled="true"] {opacity:.55;cursor:not-allowed}
/* No escuro esmaece só o rótulo: o "ainda sem motor" explica a opção e fica legível em --muted. */
.produto-operacional[data-op-tema="escuro"] .op-video .cv-pilulas [role="radio"][aria-disabled="true"] {opacity:1;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.produto-operacional[data-op-tema] .op-video .cv-quadro {display:block;flex:none;width:22px;height:22px;border:1.5px solid currentColor;border-radius:4px}
.produto-operacional[data-op-tema] .op-video .cv-quadro--9x16 {width:14px}
.produto-operacional[data-op-tema] .op-video .cv-quadro--4x5 {width:18px}
.produto-operacional[data-op-tema] .op-video .cv-quadro--16x9 {height:14px}
.produto-operacional[data-op-tema] .op-video .cv-nota {margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.produto-operacional[data-op-tema] .op-video .cv-material {display:grid;gap:12px}
.produto-operacional[data-op-tema] .op-video .cv-material>header {display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.produto-operacional[data-op-tema] .op-video .cv-material>header .op-outline {display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-size:13px;white-space:nowrap}
.produto-operacional[data-op-tema] .op-video .cv-grade {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.produto-operacional[data-op-tema] .op-video .cv-item {display:grid;gap:6px;position:relative;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.produto-operacional[data-op-tema] .op-video .cv-item:has(input:checked) {border-color:var(--cv-acento);box-shadow:0 0 0 3px var(--cv-acento-suave)}
.produto-operacional[data-op-tema] .op-video .cv-item:has(input:focus-visible) {outline:2px solid var(--video-verde);outline-offset:2px}
.produto-operacional[data-op-tema] .op-video .cv-item input {position:absolute;left:10px;top:10px;z-index:2;width:18px;height:18px;min-height:0;margin:0;accent-color:var(--cv-acento)}
.produto-operacional[data-op-tema] .op-video .cv-item-midia {display:block;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:var(--video-palco)}
.produto-operacional[data-op-tema] .op-video .cv-item-midia :is(video,img) {display:block;width:100%;height:100%;object-fit:cover}
.produto-operacional[data-op-tema] .op-video .cv-item-midia .clip-midia {display:block;width:100%;height:100%}
.produto-operacional[data-op-tema] .op-video .cv-item-video--sem-previa {display:grid;place-items:center;height:100%;color:var(--muted);font-size:11px}
.produto-operacional[data-op-tema] .op-video .cv-item-texto strong {display:block;font-size:12px;color:var(--ink)}
.produto-operacional[data-op-tema] .op-video .cv-item-texto small {display:block;color:var(--muted);font-size:11px}
.produto-operacional[data-op-tema] .op-video .cv-mais {justify-self:start;padding:0;border:0;background:transparent;color:var(--ink);font-size:13px;text-decoration:underline;cursor:pointer}
.produto-operacional[data-op-tema] .op-video .cv-vazio {margin:0;padding:20px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:13px;text-align:center}
.produto-operacional[data-op-tema] .op-video .cv-vazio--erro {color:var(--video-erro)}
.produto-operacional[data-op-tema] .op-video .cv-vazio .op-link {padding:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.produto-operacional[data-op-tema] .op-video .cv-presencas {display:grid;gap:8px}
.produto-operacional[data-op-tema] .op-video .cv-presencas [role="radio"] {display:grid;grid-template-columns:52px minmax(0,1fr) 20px;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.produto-operacional[data-op-tema] .op-video .cv-presencas [role="radio"] strong {display:block;font-size:14px;font-weight:600}
.produto-operacional[data-op-tema] .op-video .cv-presencas [role="radio"] small {display:block;color:var(--muted);font-size:12px}
.produto-operacional[data-op-tema] .op-video .cv-presencas [role="radio"]:focus-visible {outline:2px solid var(--video-verde);outline-offset:2px}
.produto-operacional[data-op-tema] .op-video .cv-presencas [role="radio"][aria-checked="true"] {border-color:var(--cv-acento);background:var(--cv-acento-suave)}
.produto-operacional[data-op-tema] .op-video .cv-presencas [role="radio"][aria-disabled="true"] {opacity:.6;cursor:not-allowed}
/* No escuro esmaecem o retrato, o título e a marca de escolha; o "ainda sem motor" fica inteiro em --muted. */
.produto-operacional[data-op-tema="escuro"] .op-video .cv-presencas [role="radio"][aria-disabled="true"] {opacity:1}
.produto-operacional[data-op-tema="escuro"] .op-video .cv-presencas [role="radio"][aria-disabled="true"] :is(.cv-presenca,strong,b) {opacity:.6}
.produto-operacional[data-op-tema] .op-video .cv-presencas b {display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface-soft);color:transparent;font-size:11px}
.produto-operacional[data-op-tema] .op-video .cv-presencas [aria-checked="true"] b {background:var(--video-verde);color:var(--video-verde-ink)}
/* As silhuetas do protótipo avatar/, em CSS puro: sem retrato de terceiros, sem imagem. */
.produto-operacional[data-op-tema] .op-video .cv-presenca {position:relative;display:grid;place-items:center;width:52px;height:64px;overflow:hidden;border-radius:15px;font-style:normal}
.produto-operacional[data-op-tema] .op-video .cv-presenca--sem {border:1px dashed var(--line);color:var(--muted);font-size:20px}
.produto-operacional[data-op-tema] .op-video .cv-presenca--marca {background:linear-gradient(145deg,var(--video-verde),var(--video-violeta) 58%,var(--video-magenta))}
.produto-operacional[data-op-tema] .op-video .cv-presenca--marca::before {content:"";position:absolute;left:50%;top:8px;width:22px;height:24px;transform:translateX(-50%);border-radius:50%;background:#18171d}
.produto-operacional[data-op-tema] .op-video .cv-presenca--marca::after {content:"";position:absolute;left:50%;bottom:-6px;width:42px;height:36px;transform:translateX(-50%);border-radius:18px 18px 6px 6px;background:#18171d}
.produto-operacional[data-op-tema] .op-video .cv-presenca--marca span {position:relative;z-index:2;margin-top:26px;color:#fff;font-size:11px;font-weight:700}
.produto-operacional[data-op-tema] .op-video .cv-presenca--pronto {background:radial-gradient(circle at 50% 35%,#f4d7c4 0 23%,transparent 24%),linear-gradient(150deg,#eac9ba 0 38%,#8668a9 39% 70%,#28252e 71%)}
.produto-operacional[data-op-tema] .op-video .cv-resumo {display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:13px}
.produto-operacional[data-op-tema] .op-video .cv-resumo dt {color:var(--muted)}
.produto-operacional[data-op-tema] .op-video .cv-resumo dd {margin:0;color:var(--ink);overflow-wrap:anywhere}
.produto-operacional[data-op-tema] .op-video .cv-cta {display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;border:0;border-radius:999px;background:var(--video-cta);color:#090909;font-weight:600;font-size:15px;box-shadow:0 0 35px rgba(230,89,211,.15)}
.produto-operacional[data-op-tema] .op-video .cv-cta:hover {filter:saturate(1.1)}
.produto-operacional[data-op-tema] .op-video .cv-cta:focus-visible {outline:2px solid var(--video-verde);outline-offset:3px}
.produto-operacional[data-op-tema] .op-video .cv-cta svg {color:#090909}
@media (min-width:1100px) {
  .produto-operacional[data-op-tema] .op-video .cv-layout {grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);align-items:start}
}
/* O cartão da direita só gruda quando cabe inteiro na janela: se não coubesse, o CTA
   no fim dele ficaria fora de alcance até o fim da rolagem. */
@media (min-width:1100px) and (min-height:880px) {
  .produto-operacional[data-op-tema] .op-video .cv-lado {position:sticky;top:16px}
}
@media (min-width:1440px) {.produto-operacional[data-op-tema] .op-video .cv-layout {grid-template-columns:minmax(0,1.4fr) 420px}}
@media (max-width:640px) {
  .produto-operacional[data-op-tema] .op-video :is(.cv-brief,.cv-lado) {padding:16px;border-radius:16px}
  .produto-operacional[data-op-tema] .op-video .cv-material>header {flex-direction:column;align-items:flex-start}
  .produto-operacional[data-op-tema] .op-video .cv-grade {grid-template-columns:repeat(2,minmax(0,1fr))}
  .produto-operacional[data-op-tema] .op-video .op-head h1 {font-size:36px}
  /* No celular a ação do cabeçalho encosta à esquerda, como o `.history-link` do protótipo. */
  .produto-operacional[data-op-tema] .op-video .op-head {align-items:stretch}
  .produto-operacional[data-op-tema] .op-video .op-head__actions {justify-content:flex-start;padding-bottom:0}
}
@media (max-width:390px) {.produto-operacional[data-op-tema] .op-video .cv-grade {grid-template-columns:1fr}}