/* ==========================================================================
   Vitrine do portal — a "Sala de Comando" (aprovada pelo Pedro em 14/10/2026)

   Só a tela de dentro: barra de cima, abertura com o CCM do acervo, seções e
   cartões. Login, visualizador e modo apresentação seguem na portal.css e na
   portal-v2.css. Cor, medida e tipo vêm dos tokens do padrão BCM
   (bcm-tokens.css); as classes têm o prefixo vt- para não brigar com as folhas
   antigas, que continuam carregadas. Movimento só em transform e opacity, e
   tudo some com prefers-reduced-motion.
   ========================================================================== */

html { background-color: var(--fundo) }
body { background: var(--fundo) }
.vt-topo, .vt-pagina { font-family: var(--pilha-texto); font-weight: var(--peso-padrao); color: var(--txt); -webkit-font-smoothing: antialiased }
.vt-topo *, .vt-pagina *, .vt-topo *::before, .vt-pagina *::before, .vt-topo *::after, .vt-pagina *::after { box-sizing: border-box }
.vt-pagina { --l-heroi: calc(var(--vp-h) * .94); --l-fio: color-mix(in srgb, var(--prim) 38%, transparent);
  position: relative; flex-direction: column; min-height: var(--vp-h); overflow-x: hidden }
.vt-ic { width: var(--item-menu-icone); height: var(--item-menu-icone); fill: none; stroke: currentColor;
  stroke-width: var(--traco-menu); stroke-linecap: round; stroke-linejoin: round; flex: none }
.vt-tit { font-family: var(--pilha-titulo); font-weight: 400; letter-spacing: .03em; line-height: 1 }
.vt-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
/* :where() deixa esta base sem peso: qualquer peça (gaveta, ação) define a própria cor */
:where(.vt-topo, .vt-pagina) button { font: inherit; color: inherit; cursor: pointer }
.vt-topo :focus-visible, .vt-pagina :focus-visible { outline: 2px solid var(--anel-cor); outline-offset: 2px }

/* ---------- atmosfera: grade, brilhos e a luz que segue o mouse ---------- */
.vt-atmosfera { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden }
.vt-atmosfera .vt-grade-fixa { position: absolute; inset: 0;
  background: linear-gradient(color-mix(in srgb, var(--prim) 9%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
              linear-gradient(90deg, color-mix(in srgb, var(--prim) 9%, transparent) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 15%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 45%, #000 15%, transparent 80%) }
.vt-brilho-fundo { position: absolute; width: 760px; height: 760px; border-radius: 50%; filter: blur(30px); opacity: .55;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--prim) 26%, transparent), transparent) }
.vt-brilho-fundo.a { left: -220px; top: 20%; animation: vt-vagar 26s ease-in-out infinite }
.vt-brilho-fundo.b { right: -260px; top: 55%; animation: vt-vagar 32s ease-in-out -9s infinite reverse }
@keyframes vt-vagar { 50% { transform: translate(140px, -90px) scale(1.12) } }
.vt-luz-cursor { position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--prim) 16%, transparent), transparent);
  transform: translate(var(--l-cx, -999px), var(--l-cy, -999px)) }

/* ---------- barra de cima: transparente na abertura, vidro depois ---------- */
.vt-topo { position: fixed; top: 0; left: 0; right: 0; z-index: 40; align-items: center; gap: var(--esp-4);
  padding: calc(var(--esp-3) + env(safe-area-inset-top, 0px)) var(--calha) var(--esp-3); color: var(--login-txt); transition: color var(--dur-3) }
.vt-topo::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; border-bottom: 1px solid var(--borda);
  background: rgba(var(--sup-flut-rgb), var(--vid-alto)); backdrop-filter: blur(var(--vid-desf)) var(--vid-material); -webkit-backdrop-filter: blur(var(--vid-desf)) var(--vid-material);
  box-shadow: var(--sombra); transition: opacity var(--dur-3) var(--ease) }
.vt-topo.vt-solido { color: var(--txt) }
.vt-topo.vt-solido::before { opacity: 1 }
.vt-logo { width: var(--logo-sidebar-l); height: var(--logo-sidebar-a); object-fit: contain; object-position: left center; display: block; flex: none }
.vt-topo .vt-logo-claro { display: none }
[data-tema="claro"] .vt-topo.vt-solido .vt-logo-claro { display: block }
[data-tema="claro"] .vt-topo.vt-solido .vt-logo-escuro { display: none }
.vt-cats { display: flex; gap: 2px; margin: 0 auto; padding: 3px; border-radius: var(--raio-pill); overflow-x: auto; scrollbar-width: none;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); transition: background var(--dur-3), border-color var(--dur-3) }
.vt-cats:empty { visibility: hidden }
.vt-cats::-webkit-scrollbar { display: none }
.vt-topo.vt-solido .vt-cats { background: var(--sup2); border-color: var(--borda) }
.vt-cat { border: 0; background: none; height: var(--alt-ctrl-sm); padding: 0 var(--esp-4); border-radius: var(--raio-pill);
  font-size: var(--txt-sm); font-weight: var(--peso-enfase); white-space: nowrap; color: inherit; opacity: .78; transition: opacity var(--dur-2) }
.vt-cat:hover { opacity: 1 }
.vt-cat[aria-pressed="true"] { background: var(--nav-ativo); color: var(--nav-ativo-txt); opacity: 1 }
.vt-dir { display: flex; align-items: center; gap: var(--esp-2); flex: none }
.vt-busca { position: relative; align-items: center }
.vt-busca .vt-ic { position: absolute; left: 11px; pointer-events: none; opacity: .75 }
.vt-busca input { width: 190px; height: var(--alt-ctrl); border-radius: var(--raio-pill); font: inherit; font-size: var(--txt-sm); color: inherit;
  padding: 0 var(--esp-4) 0 36px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); outline: none;
  transition: width var(--dur-3) var(--ease), background var(--dur-3), border-color var(--dur-3) }
.vt-busca input::placeholder { color: inherit; opacity: .7 }
.vt-busca input:focus { width: 260px; border-color: var(--anel-cor) }
.vt-topo.vt-solido .vt-busca input { background: var(--campo-fundo); border-color: var(--borda-ctrl) }
.vt-ico { width: var(--alt-ctrl); height: var(--alt-ctrl); align-items: center; justify-content: center; display: inline-flex; border-radius: 50%;
  border: 1px solid transparent; background: none; color: inherit; text-decoration: none; transition: background var(--dur-2), border-color var(--dur-2) }
.vt-ico:hover { background: rgba(127,127,127,.14); border-color: rgba(127,127,127,.25) }
[data-tema="escuro"] .vt-ic-sol, [data-tema="claro"] .vt-ic-lua { display: none }

/* ---------- a abertura ---------- */
.vt-heroi { position: relative; z-index: 1; min-height: var(--l-heroi); overflow: hidden; color: var(--login-txt); background: var(--deg-marca-fundo);
  display: grid; align-items: center; isolation: isolate }
.vt-heroi::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 3; pointer-events: none;
  background: linear-gradient(transparent, var(--fundo)) }
.vt-grade { position: absolute; inset: -40px; z-index: 0; opacity: .5;
  background: linear-gradient(rgba(128,182,227,.09) 1px, transparent 1px) 0 0 / 44px 44px,
              linear-gradient(90deg, rgba(128,182,227,.09) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 65% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 65% 45%, #000 20%, transparent 75%) }
.vt-luz { position: absolute; left: 0; top: 0; z-index: 1; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(79,169,238,.28), transparent); transform: translate(var(--l-mx, 70vw), var(--l-my, 40vh)) }
.vt-unifilar { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; transform: translate(var(--l-px, 0), var(--l-py, 0));
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0, rgba(0,0,0,.25) 30%, #000 60%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0, rgba(0,0,0,.25) 30%, #000 60%) }
.vt-unifilar .fio { stroke: rgba(128,182,227,.26); stroke-width: 1.3; fill: none }
.vt-unifilar .no { fill: var(--login-g1); stroke: rgba(128,182,227,.55); stroke-width: 1.3 }
.vt-unifilar .carga { fill: rgba(128,182,227,.08); stroke: rgba(128,182,227,.4); stroke-width: 1.2 }
.vt-pulso { fill: #CFE6F8; filter: drop-shadow(0 0 6px #4FA9EE); opacity: 0; /* bcm-ok: o brilho da energia no fio */
  animation: vt-correr var(--l-dur) linear var(--l-atraso) infinite }
@keyframes vt-correr { 0% { transform: translate(0, 0); opacity: 0 } 8% { opacity: 1 } 92% { opacity: 1 } 100% { transform: translate(var(--l-dx), var(--l-dy)); opacity: 0 } }
.vt-acende { animation: vt-acender 3.2s ease-in-out var(--l-atraso, 0s) infinite }
@keyframes vt-acender { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

.vt-heroi-miolo { position: relative; z-index: 4; width: 100%; max-width: var(--conteudo-max); margin: 0 auto;
  padding: calc(110px + env(safe-area-inset-top, 0px)) var(--calha) 120px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-6); align-items: center }
.vt-heroi.vt-sem-peca .vt-heroi-miolo { grid-template-columns: minmax(0, 1fr) }
.vt-heroi.vt-sem-peca .vt-peca { display: none }
.vt-entra { opacity: 0; transform: translateY(18px); animation: vt-entrar .9s var(--ease) forwards; animation-delay: var(--l-d, 0s) }
@keyframes vt-entrar { to { opacity: 1; transform: none } }
.vt-selo { display: inline-flex; align-items: center; gap: var(--esp-3); font-size: var(--txt-grupo); font-weight: var(--peso-numeros);
  letter-spacing: .26em; text-transform: uppercase; color: var(--login-txt3) }
.vt-titulo { font-family: var(--pilha-titulo); font-weight: 400; font-size: clamp(96px, 11vw, 196px); line-height: .82; margin: var(--esp-4) 0 var(--esp-5); letter-spacing: .01em; color: var(--login-txt) }
.vt-titulo > span:not(.vt-parceria) { display: block; color: transparent; background: linear-gradient(100deg, var(--bcm-azul-claro), #EAF3F9 50%, var(--bcm-azul-claro));
  -webkit-background-clip: text; background-clip: text } /* bcm-ok: o brilho no título da abertura */
.vt-linha { font-family: var(--pilha-titulo); font-size: var(--tit-xl); letter-spacing: .08em; color: var(--login-txt); margin: 0 0 var(--esp-3) }
.vt-linha:empty { display: none }
.vt-apoio { margin: 0; max-width: 46ch; font-size: var(--tit-sm); line-height: 1.6; color: var(--login-txt2); font-weight: var(--peso-apoio) }
.vt-chamadas { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-6) }
.vt-btn { display: inline-flex; align-items: center; gap: var(--esp-2); height: 50px; padding: 0 var(--esp-5); border-radius: var(--raio-pill);
  font-weight: var(--peso-enfase); font-size: var(--txt-lg); border: 1px solid transparent; transition: transform var(--dur-2) var(--ease), background var(--dur-2) }
.vt-btn:hover { transform: translateY(-2px) }
.vt-btn.prim { background: var(--bcm-azul); color: #FFFFFF; box-shadow: 0 10px 30px -8px rgba(79,169,238,.6) } /* bcm-ok: a primária sobre o degradê */
.vt-btn.sec { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: var(--login-txt) }
.vt-btn.sec:hover { background: rgba(255,255,255,.12) }
.vt-btn[hidden] { display: none }
.vt-descer { position: absolute; left: 50%; bottom: 34px; z-index: 5; margin-left: -20px; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: none; color: var(--login-txt); animation: vt-quicar 2.4s ease-in-out infinite }
@keyframes vt-quicar { 50% { transform: translateY(6px) } }

/* a parceria no link do cliente: BCM × logo do cliente */
.vt-parceria { display: inline-flex; align-items: center; gap: var(--esp-5); flex-wrap: wrap }
.vt-parceria img { height: clamp(56px, 7vw, 96px); width: auto; max-width: 280px; object-fit: contain }
.vt-parceria .vt-parceria-cliente { padding: 12px 18px; border-radius: var(--raio-4); background: #FFFFFF; box-shadow: var(--sombra-2) } /* bcm-ok: o fundo do logo do cliente, que pode ser escuro */
.vt-parceria .vt-x { font-family: var(--pilha-titulo); font-size: .5em; color: var(--bcm-azul-claro) }
.vt-bem-vindo { display: block; font-size: .55em; line-height: .95 }

/* ---------- o quadro da abertura: o CCM do acervo, que é o mesmo menu da barra de cima ---------- */
.vt-peca { position: relative; justify-self: center; width: 100%; max-width: 640px; perspective: 1400px }
/* a caixa do giro não pega clique: com o quadro inclinado, metade dele fica atrás dela */
.vt-peca-giro { pointer-events: none; transform-style: preserve-3d; transform: rotateY(var(--l-gx, 0deg)) rotateX(var(--l-gy, 0deg)); transition: transform .6s var(--ease) }
/* As cores do quadro são as do objeto (chapa, sinaleiro, placa de advertência), e não as da tela. */
.vt-ccm { pointer-events: auto; position: relative; width: min(100%, 440px); margin: 0 auto; padding: 14px 16px 0; border-radius: var(--raio-3);
  background: linear-gradient(90deg, #C9D6E0, #EEF3F7 30%, #DCE5EC 70%, #B9C8D4); /* bcm-ok: a chapa do painel */
  box-shadow: 26px 30px 60px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 0 5px rgba(60,60,59,.06);
  transform: rotateY(-20deg) rotateX(4deg); transform-style: preserve-3d }
.vt-ccm::after { content: ""; position: absolute; top: 6px; bottom: 16px; right: -26px; width: 26px; border-radius: 0 var(--raio-3) var(--raio-3) 0;
  background: repeating-linear-gradient(180deg, transparent 0 40px, rgba(0,0,0,.18) 40px 42px, transparent 42px 48px), linear-gradient(90deg, #8FA3B3, #6F8494);
  transform-origin: left; transform: skewY(-40deg) } /* bcm-ok: a lateral do painel, com as venezianas */
/* placa, disjuntor e gavetas ficam 2px à frente da chapa: no mesmo plano, a chapa ganharia o clique */
.vt-ccm > :not(.vt-parafuso):not(.vt-dobradica) { position: relative; transform: translateZ(2px) }
.vt-parafuso { position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F4F7F9, #8C9AA6 70%); box-shadow: inset 0 0 0 1px rgba(60,60,59,.35) } /* bcm-ok: cabeça do parafuso */
.vt-parafuso::after { content: ""; position: absolute; left: 1px; right: 1px; top: 4px; height: 1px; background: rgba(60,60,59,.55); transform: rotate(var(--l-r, 35deg)) }
.vt-parafuso.a { left: 5px; top: 5px } .vt-parafuso.b { right: 5px; top: 5px; --l-r: -20deg }
.vt-parafuso.c { left: 5px; bottom: 23px; --l-r: 70deg } .vt-parafuso.d { right: 5px; bottom: 23px; --l-r: 10deg }
.vt-dobradica { position: absolute; left: -7px; width: 8px; height: 46px; border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, #6F8494, #B9C8D4); box-shadow: -1px 1px 3px rgba(0,0,0,.35) } /* bcm-ok: dobradiça da porta */
.vt-dobradica.a { top: 70px } .vt-dobradica.b { bottom: 90px }
.vt-veneziana { height: 14px; margin: 0 40px 10px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(60,60,59,.55) 0 22px, transparent 22px 28px);
  -webkit-mask-image: linear-gradient(transparent 3px, #000 3px, #000 11px, transparent 11px); mask-image: linear-gradient(transparent 3px, #000 3px, #000 11px, transparent 11px) } /* bcm-ok: rasgos de ventilação */
.vt-veneziana.baixo { margin: 10px 40px 8px }
.vt-ccm-placa { display: flex; align-items: center; gap: var(--esp-3); padding: 10px 10px 10px 14px; border-radius: var(--raio-2);
  background: var(--login-g1); color: var(--login-txt); box-shadow: inset 0 0 0 1px rgba(128,182,227,.18) }
.vt-ccm-placa img { width: 28px; height: 28px; flex: none }
.vt-ccm-placa b { display: block; font-family: var(--pilha-titulo); font-weight: 400; font-size: var(--tit-md); letter-spacing: .08em; line-height: 1 }
.vt-ccm-placa small { font-size: var(--txt-grupo); letter-spacing: .2em; text-transform: uppercase; color: var(--login-txt3); font-weight: var(--peso-numeros) }
.vt-visor { margin-left: auto; min-width: 132px; padding: 7px 12px 5px; border-radius: var(--raio-1); text-align: right; white-space: nowrap;
  background: #04121E; box-shadow: inset 0 1px 4px rgba(0,0,0,.6), 0 0 0 1px rgba(128,182,227,.25);
  font-family: var(--pilha-titulo); font-size: var(--tit-md); letter-spacing: .08em; line-height: 1; color: #7CC0F5; text-shadow: 0 0 8px rgba(79,169,238,.8) } /* bcm-ok: visor de painel */
.vt-visor.vt-troca { animation: vt-piscar-visor .5s steps(2, end) }
@keyframes vt-piscar-visor { 0%, 40% { opacity: .2 } 60% { opacity: 1 } 80% { opacity: .5 } }
.vt-instrumentos { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 8px 12px; border-radius: var(--raio-2);
  background: linear-gradient(180deg, #E4EBF0, #CBD6DF); box-shadow: inset 0 0 0 1px rgba(60,60,59,.16) } /* bcm-ok: chapa da porta de instrumentos */
.vt-medidor { position: relative; width: 62px; flex: none; text-align: center }
.vt-medidor svg { display: block; width: 62px; height: 46px; border-radius: 6px; background: #FBFCFD; box-shadow: inset 0 0 0 1px rgba(60,60,59,.3), inset 0 2px 4px rgba(0,0,0,.12) } /* bcm-ok: mostrador */
.vt-medidor .escala { fill: none; stroke: #3C3C3B; stroke-width: 1 }
.vt-medidor .faixa { fill: none; stroke: #C2410C; stroke-width: 2.4 } /* bcm-ok: a faixa vermelha do fim da escala */
.vt-medidor .marca { stroke: #3C3C3B; stroke-width: 1 }
.vt-medidor .unid { font: 800 8px var(--pilha-texto); fill: #3C3C3B }
.vt-medidor .ponteiro { transform-box: view-box; transform-origin: 31px 40px; transform: rotate(var(--l-ang, -40deg)); transition: transform 1.2s cubic-bezier(.3,1.6,.5,1) }
.vt-medidor .ponteiro line { stroke: #B42318; stroke-width: 1.6; stroke-linecap: round } /* bcm-ok: o ponteiro */
.vt-medidor .vibra { transform-box: view-box; transform-origin: 31px 40px; animation: vt-vibrar 1.8s ease-in-out infinite }
@keyframes vt-vibrar { 25% { transform: rotate(1.6deg) } 75% { transform: rotate(-1.2deg) } }
.vt-medidor .eixo { fill: #3C3C3B }
.vt-medidor small { display: block; margin-top: 3px; font-size: 8px; letter-spacing: .14em; font-weight: var(--peso-numeros); color: #51575C; text-transform: uppercase }
.vt-sinaleiros { display: flex; gap: 10px; margin-left: auto }
.vt-sinaleiro { display: grid; justify-items: center; gap: 4px; font-size: 7.5px; letter-spacing: .12em; font-weight: var(--peso-numeros); color: #51575C; text-transform: uppercase }
.vt-sinaleiro i { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 3px #9AA8B4, inset 0 -2px 3px rgba(0,0,0,.3) }
.vt-sinaleiro.verde i { background: radial-gradient(circle at 40% 35%, #B8F5D6, #22A86B); box-shadow: 0 0 0 3px #9AA8B4, 0 0 12px #46D39A } /* bcm-ok: sinaleiro aceso */
.vt-sinaleiro.ambar i { background: radial-gradient(circle at 40% 35%, #E9D9A8, #8C7A44) } /* bcm-ok: sinaleiro apagado */
.vt-sinaleiro.vermelho i { background: radial-gradient(circle at 40% 35%, #E3B3AE, #8E4A43) } /* bcm-ok: sinaleiro apagado */
.vt-emergencia { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: #F2C230; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25) } /* bcm-ok: o anel amarelo da emergência */
.vt-emergencia::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #FF8A80, #C62828 60%, #8E1B1B);
  box-shadow: 0 3px 4px rgba(0,0,0,.35) } /* bcm-ok: o cogumelo vermelho */
.vt-geral { display: flex; align-items: center; gap: var(--esp-3); width: 100%; height: 48px; margin-top: 8px; padding: 0 var(--esp-4); border: 0; border-radius: var(--raio-2);
  background: linear-gradient(180deg, #2F3B45, #1F2830); color: #EDF2F6; text-align: left; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) } /* bcm-ok: frente do disjuntor geral */
.vt-geral b { font-family: var(--pilha-titulo); font-weight: 400; font-size: var(--tit-md); letter-spacing: .06em }
.vt-geral small { margin-left: auto; font-size: var(--txt-grupo); letter-spacing: .2em; text-transform: uppercase; color: #9FB0BE; font-weight: var(--peso-numeros) }
.vt-geral .vt-alavanca { position: relative; width: 18px; height: 30px; border-radius: var(--raio-0); background: #0D1319; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); flex: none }
.vt-geral .vt-alavanca::after { content: ""; position: absolute; left: 3px; right: 3px; top: 15px; height: 12px; border-radius: 3px; background: #9AA8B4;
  transition: transform var(--dur-3) var(--ease), background var(--dur-2) }
.vt-geral[aria-pressed="true"] .vt-alavanca::after { transform: translateY(-12px); background: #2BC07F; box-shadow: 0 0 8px #46D39A } /* bcm-ok: ligado */
.vt-geral:hover small { color: #EDF2F6 }
.vt-gaveta { display: flex; align-items: center; gap: var(--esp-3); width: 100%; height: 54px; padding: 0 var(--esp-4); margin-top: 7px; border: 0; border-radius: var(--raio-2);
  background: linear-gradient(180deg, #F7FAFC, #DCE4EA); color: var(--bcm-preto); text-align: left; /* bcm-ok: frente da gaveta */
  box-shadow: inset 0 0 0 1px rgba(60,60,59,.18), 0 1px 0 rgba(255,255,255,.7);
  transform: translateZ(2px); transition: transform var(--dur-4) var(--ease), box-shadow var(--dur-4);
  animation: vt-gaveta-entra .8s var(--ease) backwards; animation-delay: calc(.7s + var(--l-i) * 90ms) }
@keyframes vt-gaveta-entra { from { transform: translateZ(-90px); opacity: 0 } }
.vt-gaveta:hover { transform: translateZ(22px) translateX(-5px) }
.vt-gaveta[aria-pressed="true"] { transform: translateZ(54px) translateX(-16px); box-shadow: inset 0 0 0 2px rgba(0,110,165,.55), 18px 20px 34px -10px rgba(0,0,0,.5) }
.vt-gaveta .vt-ic { width: 20px; height: 20px; color: var(--bcm-azul) }
.vt-gaveta b { font-family: var(--pilha-titulo); font-weight: 400; font-size: var(--tit-md); letter-spacing: .06em; flex: 1; transition: color var(--dur-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.vt-gaveta[aria-pressed="true"] b { color: var(--bcm-azul) }
.vt-gaveta .vt-puxador { width: 34px; height: 8px; flex: none; border-radius: 4px; background: linear-gradient(#9AAAB7, #73879A) }
.vt-gaveta .vt-led { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #9AA8B4; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); transition: background var(--dur-2), box-shadow var(--dur-2) }
.vt-ccm.vt-todos .vt-gaveta .vt-led { background: #2BC07F; box-shadow: 0 0 6px #46D39A } /* bcm-ok: tudo ligado */
.vt-gaveta[aria-pressed="true"] .vt-led { background: #2BC07F; box-shadow: 0 0 12px #46D39A; animation: vt-acender 1.6s ease-in-out infinite } /* bcm-ok: a gaveta ligada */
.vt-rodape-ccm { display: flex; gap: 8px; margin-top: 10px }
.vt-advertencia { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; background: #F2C230; color: #1F1F1E;
  box-shadow: inset 0 0 0 2px #1F1F1E; font-size: 8.5px; font-weight: var(--peso-numeros); letter-spacing: .1em; text-transform: uppercase; line-height: 1.25 } /* bcm-ok: placa de advertência, padrão de segurança */
.vt-advertencia .vt-tri { width: 0; height: 0; flex: none; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 19px solid #1F1F1E; position: relative }
.vt-advertencia .vt-tri::after { content: "!"; position: absolute; left: -3px; top: 5px; font: 900 11px var(--pilha-texto); color: #F2C230 }
.vt-dados-ccm { display: grid; align-content: center; padding: 5px 8px; border-radius: 4px; background: #E8EDF1; box-shadow: inset 0 0 0 1px rgba(60,60,59,.3);
  font-size: 8px; font-weight: var(--peso-numeros); letter-spacing: .08em; color: #3C3C3B; line-height: 1.35; white-space: nowrap } /* bcm-ok: placa de dados */
.vt-base-ccm { height: 16px; margin: 0 -16px; border-radius: 0 0 var(--raio-3) var(--raio-3); background: linear-gradient(180deg, #4B5862, #2F3A43) } /* bcm-ok: a soleira */

/* ---------- o acervo: um barramento descendo, cada seção uma derivação ---------- */
.vt-miolo { --l-esp: 30px; position: relative; z-index: 2; width: 100%; max-width: var(--conteudo-max); margin: 0 auto;
  padding: var(--esp-5) var(--calha) var(--esp-7) calc(var(--calha) + var(--l-esp) + 54px) }
.vt-pagina.vt-sem-heroi .vt-miolo { padding-top: calc(110px + env(safe-area-inset-top, 0px)) }
.vt-espinha { position: absolute; left: calc(var(--calha) + var(--l-esp)); top: 0; bottom: var(--esp-7); width: 2px; overflow: hidden;
  background: linear-gradient(var(--l-fio), var(--l-fio) 85%, transparent) }
.vt-espinha i { position: absolute; left: -2px; top: 0; width: 6px; height: 90px; border-radius: 3px; opacity: 0;
  background: linear-gradient(transparent, var(--prim)); filter: drop-shadow(0 0 6px var(--prim));
  animation: vt-descer var(--l-dur, 6s) linear var(--l-t, 0s) infinite }
@keyframes vt-descer { 0% { transform: translateY(-90px); opacity: 0 } 5% { opacity: 1 } 95% { opacity: 1 } 100% { transform: translateY(var(--l-alt, 2000px)); opacity: 0 } }
.vt-ferramentas { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap }
.vt-ferramentas:has(> :not([hidden])) { padding-top: var(--esp-5) }
.vt-ordem { display: inline-flex; align-items: center; gap: var(--esp-2); height: var(--alt-ctrl-sm); padding: 0 var(--esp-4); margin-left: auto;
  border-radius: var(--raio-pill); border: 1px solid var(--borda-ctrl); background: var(--sup); color: var(--txt); font-size: var(--txt-sm); font-weight: var(--peso-enfase) }
.vt-ordem[hidden] { display: none }
.vt-ordem:hover { background: var(--hover) }

/* a trilha das pastas */
.vt-miolo .trilha { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; margin: 0; padding: 0 }
.vt-miolo .trilha[hidden] { display: none }
.vt-miolo .trilha-voltar { display: inline-flex; align-items: center; gap: var(--esp-2); height: var(--alt-ctrl-sm); padding: 0 var(--esp-4);
  border-radius: var(--raio-pill); border: 1px solid var(--borda-ctrl); background: var(--sup); color: var(--txt); font-size: var(--txt-sm); font-weight: var(--peso-enfase) }
.vt-miolo .trilha-voltar svg { width: 14px; height: 14px }
.vt-miolo .trilha-voltar:hover { background: var(--hover) }
.vt-miolo .trilha-caminho { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; font-size: var(--txt-sm) }
.vt-miolo .trilha-degrau { border: 0; background: none; padding: 0; color: var(--txt2); font: inherit; font-weight: var(--peso-enfase); cursor: pointer }
.vt-miolo .trilha-degrau:hover { color: var(--prim) }
.vt-miolo .trilha-degrau.atual { color: var(--txt); cursor: default }
.vt-miolo .trilha-sep { color: var(--txt3) }
.vt-miolo .trilha-aviso { font-size: var(--txt-xs); color: var(--txt3) }

.vt-secao { position: relative; padding-top: var(--esp-7); scroll-margin-top: 70px }
.vt-cabecalho .vt-secao { padding-bottom: 0 }
.vt-secao-cab { position: relative; display: flex; align-items: center; gap: var(--esp-5); margin-bottom: var(--esp-5) }
.vt-derivacao { position: absolute; left: -54px; top: 50%; width: 54px; height: 2px; margin-top: -1px; background: var(--l-fio) }
.vt-no { position: absolute; left: -75px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center;
  color: var(--prim); background: var(--sup); border: 2px solid var(--l-fio); box-shadow: 0 0 0 6px var(--fundo), 0 0 24px color-mix(in srgb, var(--prim) 30%, transparent) }
.vt-no .vt-ic { width: 19px; height: 19px }
.vt-secao-cab h2 { font-family: var(--pilha-titulo); font-weight: 400; font-size: var(--tit-3xl); letter-spacing: .03em; margin: 0; line-height: .9; color: var(--txt) }
.vt-secao-cab p { margin: var(--esp-1) 0 0; color: var(--txt2); font-size: var(--txt-md) }
.vt-barramento { position: relative; flex: 1; height: 2px; border-radius: 2px; overflow: hidden; background: linear-gradient(90deg, var(--l-fio), transparent) }
.vt-barramento::after { content: ""; position: absolute; top: 0; left: 0; width: 120px; height: 100%;
  background: linear-gradient(90deg, transparent, var(--prim), transparent); animation: vt-energia 3.6s linear infinite }
@keyframes vt-energia { from { transform: translateX(-120px) } to { transform: translateX(1400px) } }

.vt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--esp-6) var(--esp-5) }
.vt-cards.vt-agrupada { display: block }
.vt-cabecalho:empty { display: none }

/* entrada ao rolar */
.vt-card { position: relative; opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--l-i, 0) * 60ms) }
.vt-card.vt-visivel { opacity: 1; transform: none }
.vt-card-in { position: relative; display: block; transform: perspective(900px) rotateX(var(--l-rx, 0deg)) rotateY(var(--l-ry, 0deg));
  transition: transform .5s var(--ease); cursor: pointer }
.vt-card-in.vt-mexendo { transition: transform .08s linear }
.vt-visor-capa { position: relative }
.vt-cantos { position: absolute; inset: -7px; z-index: 4; pointer-events: none; opacity: 0; transform: scale(1.04);
  transition: opacity var(--dur-3), transform var(--dur-3) var(--ease); --l-c: var(--anel-cor);
  background:
    linear-gradient(var(--l-c), var(--l-c)) left top / 16px 2px no-repeat, linear-gradient(var(--l-c), var(--l-c)) left top / 2px 16px no-repeat,
    linear-gradient(var(--l-c), var(--l-c)) right top / 16px 2px no-repeat, linear-gradient(var(--l-c), var(--l-c)) right top / 2px 16px no-repeat,
    linear-gradient(var(--l-c), var(--l-c)) left bottom / 16px 2px no-repeat, linear-gradient(var(--l-c), var(--l-c)) left bottom / 2px 16px no-repeat,
    linear-gradient(var(--l-c), var(--l-c)) right bottom / 16px 2px no-repeat, linear-gradient(var(--l-c), var(--l-c)) right bottom / 2px 16px no-repeat }
.vt-card-in:hover .vt-cantos, .vt-card-in:focus-visible .vt-cantos { opacity: 1; transform: none }
.vt-capa { position: relative; aspect-ratio: 16/9; border-radius: var(--raio-4); overflow: hidden; background: var(--sup2); box-shadow: var(--sombra), 0 0 0 1px var(--borda) }
.vt-capa img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease) }
.vt-card-in:hover .vt-capa img { transform: scale(1.05) }
.vt-capa.vt-sem-capa img { object-fit: contain; padding: 18% }
.vt-reflexo { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity var(--dur-3);
  background: radial-gradient(circle at var(--l-bx, 50%) var(--l-by, 50%), rgba(255,255,255,.28), transparent 45%) } /* bcm-ok: reflexo que segue o mouse */
.vt-card-in:hover .vt-reflexo { opacity: 1 }
.vt-sombra-chao { position: absolute; left: 8%; right: 8%; top: 0; aspect-ratio: 16/9; z-index: -1; border-radius: var(--raio-4); opacity: 0;
  background: var(--prim); filter: blur(28px); transform: translateY(18px) scale(.9); transition: opacity var(--dur-4), transform var(--dur-4) var(--ease) }
.vt-card-in:hover .vt-sombra-chao { opacity: .35; transform: translateY(24px) scale(.95) }
.vt-acoes { position: absolute; left: var(--esp-3); right: var(--esp-3); bottom: var(--esp-3); z-index: 3; display: flex; gap: var(--esp-2);
  opacity: 0; transform: translateY(12px); transition: opacity var(--dur-3), transform var(--dur-3) var(--ease) }
.vt-card-in:hover .vt-acoes, .vt-card-in:focus-within .vt-acoes { opacity: 1; transform: none }
.vt-acao { height: 38px; min-width: 38px; display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); padding: 0 var(--esp-3);
  border: 0; border-radius: var(--raio-pill); background: rgba(13,19,25,.72); color: #EDF2F6; text-decoration: none; /* bcm-ok: sobre a capa */
  backdrop-filter: blur(var(--vid-veu-desf)); -webkit-backdrop-filter: blur(var(--vid-veu-desf)); font-size: var(--txt-sm); font-weight: var(--peso-enfase); transition: background var(--dur-1) }
.vt-acao:hover { background: rgba(13,19,25,.9) }
.vt-acao.prim { background: var(--bcm-azul); padding: 0 var(--esp-4) }
.vt-acao.prim:hover { background: #0A7DB8 } /* bcm-ok: hover da primária sobre a capa */
.vt-acao svg { width: 17px; height: 17px }
.vt-acao .i-guardado { display: none }
.vt-acao.is-offline { background: rgba(31,107,74,.9) } /* bcm-ok: guardado no aparelho */
.vt-acao.is-offline .i-guardar { display: none }
.vt-acao.is-offline .i-guardado { display: block }
.vt-selo-capa { position: absolute; left: var(--esp-3); top: var(--esp-3); z-index: 3; padding: 4px 9px; border-radius: var(--raio-pill);
  background: rgba(13,19,25,.72); color: #EDF2F6; font-size: var(--txt-xs); font-weight: var(--peso-enfase) } /* bcm-ok: sobre a capa */
.vt-card .alca-arrastar { position: absolute; right: var(--esp-3); top: var(--esp-3); z-index: 5; width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: var(--raio-2); background: rgba(13,19,25,.72); color: #EDF2F6; cursor: grab; touch-action: none } /* bcm-ok: sobre a capa */
.vt-card .alca-arrastar svg { width: 16px; height: 16px; fill: currentColor }
.vt-legenda { padding: var(--esp-3) var(--esp-1) 0 }
.vt-legenda small { font-size: var(--txt-grupo); letter-spacing: .2em; text-transform: uppercase; font-weight: var(--peso-numeros); color: var(--prim) }
.vt-legenda h3 { margin: 4px 0 0; font-size: var(--tit-sm); font-weight: var(--peso-enfase); line-height: 1.3; color: var(--txt) }
.vt-legenda p { margin: 4px 0 0; font-size: var(--txt-xs); color: var(--txt3) }

/* pasta de produto: um painel energizado, sem número */
.vt-pasta .vt-capa { display: grid; place-items: center; color: var(--bcm-azul-claro);
  background: radial-gradient(circle at 70% 15%, var(--login-brilho), transparent 55%), linear-gradient(158deg, var(--login-g1), var(--login-g3)) }
.vt-pasta .vt-capa::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background: linear-gradient(rgba(128,182,227,.08) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(128,182,227,.08) 1px, transparent 1px) 0 0 / 22px 22px }
.vt-pasta .vt-simbolo { position: relative; z-index: 1; width: 88px; height: 88px; margin-bottom: var(--esp-5); display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(128,182,227,.35); transition: transform var(--dur-4) var(--ease) }
.vt-pasta .vt-simbolo::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--bcm-azul-claro); opacity: 0 }
.vt-pasta .vt-card-in:hover .vt-simbolo { transform: scale(1.08) }
.vt-pasta .vt-card-in:hover .vt-simbolo::before { animation: vt-onda 1.6s var(--ease) infinite }
@keyframes vt-onda { from { transform: scale(1); opacity: .7 } to { transform: scale(1.9); opacity: 0 } }
.vt-pasta .vt-simbolo .vt-ic { width: 38px; height: 38px; stroke-width: 1.2 }
.vt-pasta .vt-nome-dentro { position: absolute; left: var(--esp-4); right: var(--esp-4); bottom: var(--esp-4); z-index: 1; color: var(--login-txt);
  font-family: var(--pilha-titulo); font-size: var(--tit-lg); letter-spacing: .04em; line-height: 1.05 }
.vt-pasta .vt-seta-abrir { position: absolute; right: var(--esp-4); top: var(--esp-4); z-index: 1; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.08); color: var(--login-txt); opacity: 0; transform: translate(-6px, 6px);
  transition: opacity var(--dur-3), transform var(--dur-3) var(--ease) }
.vt-pasta .vt-card-in:hover .vt-seta-abrir { opacity: 1; transform: none }

/* os vazios: busca sem resultado, pasta vazia, link expirado */
.vt-miolo .empty-message, .vt-miolo .expired-message { grid-column: 1 / -1; text-align: center; padding: var(--esp-7) var(--esp-4); color: var(--txt2) }
.vt-miolo .expired-message h3 { font-family: var(--pilha-titulo); font-weight: 400; font-size: var(--tit-3xl); letter-spacing: .03em; color: var(--txt); margin: 0 0 var(--esp-3) }
.vt-miolo .expired-message p { margin: 0 auto; max-width: 52ch; line-height: 1.6 }

/* o fim do barramento: a assinatura */
.vt-rodape { position: relative; z-index: 2; color: var(--login-txt); background: var(--deg-marca-fundo); overflow: hidden }
.vt-rodape::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(var(--fundo), transparent) }
.vt-rodape-miolo { position: relative; max-width: var(--conteudo-max); margin: 0 auto; padding: 150px var(--calha) calc(var(--esp-6) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: flex-end; gap: var(--esp-5) }
.vt-rodape h2 { font-family: var(--pilha-titulo); font-weight: 400; font-size: clamp(48px, 6vw, 96px); margin: 0; line-height: .9; letter-spacing: .03em }
.vt-rodape h2 span { color: var(--bcm-azul-claro) }
.vt-rodape .vt-esp { flex: 1 }
.vt-rodape small { display: block; margin-top: var(--esp-2); color: var(--login-txt3); font-size: var(--txt-sm) }
.vt-rodape .vt-logo { margin-left: auto }

@media (max-width: 1100px) {
  .vt-heroi-miolo { grid-template-columns: minmax(0, 1fr); padding-top: calc(140px + env(safe-area-inset-top, 0px)) }
  .vt-peca { max-width: 520px; margin-top: var(--esp-4) }
}
@media (max-width: 900px) {
  /* no celular a barra é sempre de vidro: transparente, ela ficaria por cima do título */
  .vt-topo { flex-wrap: wrap; gap: var(--esp-2); color: var(--txt) }
  .vt-topo::before { opacity: 1 }
  [data-tema="claro"] .vt-topo .vt-logo-claro { display: block }
  [data-tema="claro"] .vt-topo .vt-logo-escuro { display: none }
  .vt-topo .vt-cats { background: var(--sup2); border-color: var(--borda) }
  .vt-topo .vt-busca input { background: var(--campo-fundo); border-color: var(--borda-ctrl) }
  .vt-logo { width: 120px; height: 32px }
  .vt-dir { margin-left: auto }
  .vt-cats { order: 3; flex-basis: 100%; margin: 0 }
  .vt-busca input { width: 44px; padding: 0 0 0 36px }
  .vt-busca input:focus { width: 170px; padding-right: var(--esp-3) }
  .vt-heroi-miolo { padding: calc(150px + env(safe-area-inset-top, 0px)) var(--calha) 90px; gap: var(--esp-4) }
  .vt-titulo { font-size: 92px }
  .vt-parceria img { height: 54px; max-width: 200px }
  .vt-peca { max-width: 360px }
  .vt-ccm { transform: none }
  .vt-ccm::after { display: none }
  .vt-gaveta:hover { transform: none }
  .vt-gaveta[aria-pressed="true"] { transform: translateX(-8px) }
  .vt-visor { min-width: 0 }
  .vt-sinaleiro.ambar, .vt-sinaleiro.vermelho, .vt-dobradica { display: none }
  .vt-instrumentos { gap: 8px; padding: 8px }
  .vt-miolo { --l-esp: 4px; padding-left: calc(var(--calha) + var(--l-esp) + 34px) }
  .vt-pagina.vt-sem-heroi .vt-miolo { padding-top: calc(130px + env(safe-area-inset-top, 0px)) }
  .vt-derivacao { width: 34px; left: -34px }
  .vt-no { width: 32px; height: 32px; margin-top: -16px; left: -49px }
  .vt-no .vt-ic { width: 15px; height: 15px }
  .vt-secao-cab { flex-wrap: wrap } .vt-barramento { display: none }
  .vt-secao-cab h2 { font-size: var(--tit-2xl) }
  /* sem mouse, as ações ficam sempre à vista */
  .vt-acoes { opacity: 1; transform: none }
  .vt-rodape-miolo { flex-direction: column; align-items: flex-start }
  .vt-rodape .vt-logo { margin-left: 0 }
  .vt-descer { display: none }
}
@media (hover: none) {
  .vt-acoes { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce) {
  .vt-entra, .vt-card { opacity: 1 !important; transform: none !important }
  .vt-pulso, .vt-espinha i { display: none }
  .vt-pagina *, .vt-pagina *::before, .vt-pagina *::after, .vt-topo * { animation: none !important; transition: none !important }
}