/* PEX01 FIX4 — Interactive Office / adaptive desktop */
html,body{width:100%;height:100%;overflow:hidden;background:#01070c} body{margin:0}
@media (min-width:1024px){
  .pex-app{display:grid!important;grid-template-columns:clamp(235px,16.8vw,290px) 1fr;position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden;background:#01070c}
  .pex-sidebar{display:flex!important;z-index:30;min-width:0;padding:clamp(12px,1.25vh,20px) 14px;background:linear-gradient(180deg,#020b10 0%,#01080d 68%,#01070b 100%);box-shadow:8px 0 30px rgba(0,0,0,.22)}
  .pex-menu a{padding:clamp(6px,1.05vh,10px) 9px}.pex-menu-text strong{font-size:clamp(11px,1.25vh,13px)}.pex-menu-text small{font-size:clamp(8px,1vh,10px)}
  .pex-sidebar-footer{padding-top:clamp(7px,1vh,14px);gap:clamp(5px,.8vh,9px)}
  .pex-workspace{display:grid!important;grid-template-rows:minmax(0,1fr) auto;position:relative;min-width:0;min-height:0;background:#01070c}
  .pex-scene-viewport{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0;min-height:0;background:#01070c}
  .pex-scene-canvas{position:relative;width:var(--canvas-w,100%);height:var(--canvas-h,100%);aspect-ratio:1277/1024;overflow:hidden;flex:none;border-radius:0}
  .pex-scene-bg{position:absolute;inset:0;background:url('../assets/scenario/OFFICE-MASTER-FIX4.webp?v=fix4') center/100% 100% no-repeat;transform:none!important}
  .pex-scene-vignette{display:block;pointer-events:none;background:linear-gradient(90deg,rgba(0,8,12,.16),transparent 12%,transparent 88%,rgba(0,8,12,.12))}
  .pex-hud-terminal,.pex-cta-header{display:none!important}
  .clean-nav,.clean-social{display:none!important}

  /* Physical live surfaces — coordinates relative to cropped 1277×1024 master. */
  .pex-board{left:3.4%;top:1.7%;width:29.5%;height:34.2%;min-width:0;padding:1.5% 1.8%;overflow:hidden;z-index:8;border:0;background:rgba(0,12,15,.52)!important;color:#bdfcff;transform:perspective(900px) rotateY(1.2deg) rotateZ(-.25deg);transform-origin:left center;mix-blend-mode:screen;cursor:pointer;text-align:left;box-shadow:inset 0 0 28px rgba(0,255,180,.08)!important}
  .pex-zabbix{font-family:var(--font-mono)} .zbx-head{display:flex;align-items:center;gap:3%;border-bottom:1px solid rgba(0,255,190,.35);padding-bottom:2%;margin-bottom:2%}.zbx-head b{background:#d71920;color:#fff;padding:1.2% 2%;font-size:clamp(8px,.9vw,15px)}.zbx-head em{font-style:normal;font-size:clamp(6px,.55vw,10px);color:#7fffd4}
  .zbx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:2%;margin-bottom:2%}.zbx-kpis>span{font-size:clamp(6px,.52vw,9px);color:#7fd9e5}.zbx-kpis strong{display:block;font-size:clamp(13px,1.55vw,25px);line-height:1.05;color:#39ff77;text-shadow:0 0 8px rgba(57,255,119,.45)}.zbx-kpis>span:last-child strong{color:#ff5959}
  .zbx-meters{display:grid;gap:5%;margin:2% 0}.zbx-meters>span{display:grid;grid-template-columns:12% 1fr 14%;align-items:center;gap:3%;font-size:clamp(6px,.5vw,9px)}.zbx-meters i{height:5px;background:rgba(0,255,190,.12);overflow:hidden}.zbx-meters i b{display:block;height:100%;width:var(--meter,30%);background:#27ff76;box-shadow:0 0 7px #27ff76;transition:width .8s ease}.zbx-meters strong{font-size:inherit;color:#4dffad}
  .zbx-events{display:block;margin-top:3%;font-size:clamp(5px,.43vw,8px);line-height:1.55;color:#78f7ff;opacity:.88}.zbx-link{position:absolute;left:5%;right:5%;bottom:5%;font-size:clamp(5px,.42vw,8px);color:#42ff8b;opacity:.7}.pex-zabbix:hover{filter:brightness(1.15)}

  .pex-crt,.pex-map-monitor{background:transparent!important;z-index:7;overflow:hidden;border:0}
  .pex-crt{left:22.4%;top:34.6%;width:22.5%;height:22.2%;border-radius:12%/10%}
  .pex-map-monitor{left:46.8%;top:35.0%;width:36.0%;height:24.7%;border-radius:4%/6%}
  .pex-crt-frame,.pex-crt-screen,.pex-crt-screen--map{inset:0;background:transparent!important;box-shadow:none!important;overflow:hidden}
  .pex-crt-screen{padding:8% 8%;border-radius:12%/10%;clip-path:inset(1% round 10%);font-size:clamp(5px,.5vw,9px);line-height:1.35;mix-blend-mode:screen;opacity:.82;text-shadow:0 0 4px rgba(0,255,185,.5)}
  .pex-crt-screen--map{padding:7%;border-radius:4%/7%;clip-path:inset(1% round 4%);opacity:.84}.pex-map-svg{opacity:.72}.pex-service-list{opacity:.84}.pex-scanlines{opacity:.1}
  .pex-map-monitor::after{content:'INFRAESTRUTURA';position:absolute;right:7%;top:9%;font:700 clamp(6px,.58vw,10px) var(--font-mono);color:#6fffe7;opacity:.7;text-shadow:0 0 8px rgba(0,255,220,.5)}
  .pex-map-monitor:hover::after{color:#6cff57;opacity:1}

  .pex-clock{left:85.1%;top:29.2%;width:7.8%;height:5.2%;display:flex;align-items:center;justify-content:center;font:700 clamp(11px,1.25vw,22px) 'Lucida Console','Courier New',monospace;letter-spacing:.05em;color:#ffbd2e;background:transparent!important;mix-blend-mode:screen;text-shadow:0 0 3px #ff9c00,0 0 10px rgba(255,139,0,.75);z-index:10}
  .pex-clock-colon{animation:clockColon 1s steps(1,end) infinite}@keyframes clockColon{50%{opacity:.25}}

  .pex-tower-leds{position:absolute;left:86.5%;top:43.2%;width:4.2%;height:17%;z-index:9;pointer-events:none}.pex-tower-leds i{position:absolute;width:7px;height:7px;border-radius:50%;background:#35ff67;box-shadow:0 0 8px #35ff67;animation:ledBlink 1.8s steps(1,end) infinite}.pex-tower-leds i:nth-child(1){left:18%;top:12%;animation-delay:.2s}.pex-tower-leds i:nth-child(2){left:60%;top:38%;animation-delay:.9s}.pex-tower-leds i:nth-child(3){left:25%;top:65%;animation-delay:1.35s}.pex-tower-leds i:nth-child(4){left:66%;top:80%;background:#ff594a;box-shadow:0 0 8px #ff594a;animation-delay:.55s}@keyframes ledBlink{0%,72%{opacity:.25}73%,84%{opacity:1}85%,100%{opacity:.45}}

  /* The new master already contains the three bottom cards. Keep them visual; add only invisible semantic hit areas later. */
  .pex-cards{display:none!important}
  .pex-hotspot--books{left:0%;top:42%;width:20%;height:25%}.pex-hotspot--tower{left:82%;top:35%;width:15%;height:34%}.pex-hotspot--logo{left:84%;top:44%;width:8%;height:12%}.pex-hotspot--floppy{left:8%;top:61%;width:28%;height:14%}
  .pex-hotspot-tip{background:rgba(1,8,8,.94);backdrop-filter:blur(5px)}

  .pex-footer{display:grid!important;padding:5px 22px;min-height:36px;background:#010a10;border-top:1px solid rgba(0,220,255,.18);z-index:20}
}
@media (min-width:1024px) and (max-height:800px){.pex-sidebar{padding-top:8px;padding-bottom:8px}.pex-logo{padding-bottom:8px}.pex-menu a{padding:5px 8px}.pex-sidebar-footer{gap:4px}.pex-quote{font-size:10px}.pex-version{font-size:8px}.pex-footer{min-height:30px;padding-top:3px;padding-bottom:3px}}
@media (prefers-reduced-motion:reduce){.pex-tower-leds i,.pex-clock-colon{animation:none!important}.zbx-meters i b{transition:none!important}}

/* FIX4.1 — notebook composition correction */
@media (min-width:1024px){
  .pex-workspace{grid-template-rows:minmax(0,1fr)!important}
  .pex-footer{display:none!important}
  .pex-scene-viewport{
    align-items:center!important;justify-content:flex-start!important;
    background:#01070c;
  }
  /* Fill unused widescreen space with an atmospheric extension, never a hard black slab. */
  .pex-scene-viewport::before{
    content:"";position:absolute;inset:-3%;
    background:url('../assets/scenario/OFFICE-CLEAN-CENTER.webp?v=fix41') center/cover no-repeat;
    filter:blur(28px) brightness(.34) saturate(.8);transform:scale(1.08);opacity:.75;
  }
  .pex-scene-canvas{z-index:1;box-shadow:24px 0 70px rgba(0,0,0,.5)}
  .pex-scene-bg{background-image:url('../assets/scenario/OFFICE-CLEAN-CENTER.webp?v=fix41')!important}
  /* Clean source has empty physical screens: only the live HTML is visible. */
  .pex-board{left:2.3%;top:2.0%;width:28.3%;height:31.5%;padding:1.2% 1.5%;background:transparent!important;mix-blend-mode:screen;box-shadow:none!important;transform:perspective(1000px) rotateY(1deg) rotateZ(-.25deg)}
  .pex-crt{left:24.3%;top:34.2%;width:21.0%;height:20.8%}
  .pex-map-monitor{left:48.0%;top:35.1%;width:31.7%;height:20.8%}
  .pex-clock{left:83.8%;top:29.4%;width:8.1%;height:4.3%}
  .pex-tower-leds{left:85.4%;top:42.0%;width:5%;height:18%}
  .pex-cards{display:grid!important;position:absolute;left:1.7%;right:19.6%;bottom:10.2%;grid-template-columns:repeat(3,1fr);gap:1.5%;z-index:12;pointer-events:none}
  .pex-card{min-width:0;padding:1.25% 3%;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
  .pex-card strong{font-size:clamp(8px,.72vw,12px)}.pex-card small{font-size:clamp(7px,.6vw,10px)}
}
@media (min-width:1024px) and (max-height:850px){
  .pex-app{grid-template-columns:clamp(220px,15.2vw,250px) 1fr}
  .pex-sidebar{padding-top:7px;padding-bottom:7px}
  .pex-logo{padding-bottom:6px}.pex-menu a{padding:4px 8px}.pex-sidebar-footer{gap:3px;padding-top:5px}
}

/* ============================================================
   LIVE MASTER 1 — cenário final gerado + superfícies vivas mínimas
   A fotografia faz todo o trabalho visual. O código só anima o que
   precisa estar vivo: Zabbix, relógio, LEDs e áreas clicáveis.
   ============================================================ */
@media (min-width:1024px){
  .pex-scene-canvas{aspect-ratio:1414/941!important}
  .pex-scene-bg{background-image:url('../assets/scenario/OFFICE-LIVE-MASTER.webp?v=live1')!important;background-size:100% 100%!important;background-position:center!important}
  .pex-scene-viewport::before{background-image:url('../assets/scenario/OFFICE-LIVE-MASTER.webp?v=live1')!important;background-size:cover!important;filter:blur(32px) brightness(.30) saturate(.9)!important;opacity:.9!important}

  /* A foto já contém CRT e monitor central finalizados. Não redesenhar. */
  .pex-crt{display:none!important}
  .pex-map-monitor{left:42.8%!important;top:36.1%!important;width:36.5%!important;height:27.5%!important;background:transparent!important;opacity:1!important;cursor:pointer;}
  .pex-map-monitor .pex-crt-frame,.pex-map-monitor .pex-crt-screen,.pex-map-monitor .pex-map-svg,.pex-map-monitor .pex-service-list,.pex-map-monitor::after{display:none!important}
  .pex-map-monitor:hover{box-shadow:inset 0 0 35px rgba(0,255,210,.09)!important}

  /* Zabbix: o dashboard completo já está em perspectiva na foto.
     Só os três KPIs vivos são substituídos por HTML. */
  .pex-board{left:1.7%!important;top:.5%!important;width:29.7%!important;height:34.8%!important;padding:0!important;background:transparent!important;box-shadow:none!important;mix-blend-mode:normal!important;transform:none!important;overflow:visible!important;}
  .pex-board .zbx-head,.pex-board .zbx-meters,.pex-board .zbx-events,.pex-board .zbx-link{display:none!important}
  .pex-board .zbx-kpis{position:absolute;left:7.5%;top:24%;width:67%;height:18%;display:block!important;margin:0!important;transform:perspective(900px) rotateY(2.8deg) rotateZ(.35deg);transform-origin:left center;}
  .pex-board .zbx-kpis>span{position:absolute;top:0;width:24%;height:100%;font-size:0!important;color:transparent!important;background:rgba(1,24,27,.82);border-radius:2px;box-shadow:0 0 8px rgba(0,0,0,.18);}
  .pex-board .zbx-kpis>span:nth-child(1){left:0}.pex-board .zbx-kpis>span:nth-child(2){left:37%}.pex-board .zbx-kpis>span:nth-child(3){left:74%}
  .pex-board .zbx-kpis strong{display:flex!important;align-items:center;justify-content:center;width:100%;height:100%;font:700 clamp(13px,1.45vw,25px)/1 var(--font-mono)!important;color:#39ff77!important;text-shadow:0 0 7px rgba(57,255,119,.65)!important}
  .pex-board .zbx-kpis>span:nth-child(3) strong{color:#ff5b4d!important;text-shadow:0 0 7px rgba(255,91,77,.55)!important}
  .pex-board:hover{filter:brightness(1.06)}

  /* Relógio físico: cobre apenas os dígitos impressos e escreve hora SP. */
  .pex-clock{left:80.7%!important;top:30.3%!important;width:7.7%!important;height:4.5%!important;background:rgba(13,8,1,.90)!important;border-radius:5px;color:#ffc13a!important;font-family:'Lucida Console','Courier New',monospace!important;font-size:clamp(12px,1.35vw,22px)!important;letter-spacing:.04em!important;box-shadow:inset 0 0 12px rgba(0,0,0,.8),0 0 8px rgba(255,160,0,.12)!important}

  /* Torre: apenas LEDs. Nenhum link/hotspot. */
  .pex-hotspot--tower{pointer-events:none!important;display:none!important}
  .pex-tower-leds{left:83.2%!important;top:43.8%!important;width:4.8%!important;height:20%!important;pointer-events:none!important}
  .pex-tower-leds i{width:clamp(3px,.42vw,7px)!important;height:clamp(3px,.42vw,7px)!important}

  /* A imagem já contém os cards e footer. */
  .pex-cards{display:none!important}
  .pex-footer{display:none!important}
  .clean-nav,.clean-social{display:none!important}

  /* Não deixar faixa cinza/preta dura no lado direito em notebooks. */
  .pex-scene-viewport{background:#01070c!important}
}

/* ============================================================
   LIVE MASTER 1.1 — publish fix
   - cenário central puramente visual (sem links/hotspots)
   - relógio: mascara integralmente os dígitos gravados na imagem
     e exibe somente a hora dinâmica de São Paulo
   ============================================================ */
@media (min-width:1024px){
  /* A navegação fica exclusivamente na sidebar. O cenário continua vivo,
     mas nenhum objeto central funciona como link/botão. */
  .pex-scene-canvas .pex-board,
  .pex-scene-canvas .pex-crt,
  .pex-scene-canvas .pex-map-monitor,
  .pex-scene-canvas .pex-hotspot,
  .pex-scene-canvas .clean-nav,
  .pex-scene-canvas .clean-social{
    pointer-events:none!important;
    cursor:default!important;
  }
  .pex-scene-canvas .pex-hotspot-tip{display:none!important}
  .pex-board:hover,.pex-map-monitor:hover{filter:none!important;box-shadow:none!important}

  /* A foto contém uma leitura estática no display físico. Esta máscara
     cobre TODO o visor antes de desenhar a única leitura dinâmica. */
  .pex-clock{
    left:79.95%!important;
    top:29.65%!important;
    width:9.35%!important;
    height:5.65%!important;
    padding:0!important;
    background:#100b03!important;
    border:1px solid rgba(74,48,13,.28)!important;
    border-radius:5px!important;
    box-sizing:border-box!important;
    color:#ffc13a!important;
    font-family:'Lucida Console','Courier New',monospace!important;
    font-size:clamp(12px,1.22vw,21px)!important;
    font-weight:700!important;
    line-height:1!important;
    letter-spacing:.055em!important;
    text-shadow:0 0 3px #ff9c00,0 0 9px rgba(255,139,0,.72)!important;
    box-shadow:inset 0 0 14px #000,0 0 7px rgba(255,160,0,.10)!important;
    z-index:30!important;
  }
}

/* ===== SeteVias LIVE MASTER 1.3 ===== */
@media (min-width: 900px){
  /* relógio: visor físico limpo no asset; apenas esta leitura dinâmica permanece */
  .pex-clock{
    left:91.35%!important; top:29.25%!important; width:8.15%!important; height:4.35%!important;
    background:#0e0a04!important; border:0!important; border-radius:4px!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
    color:#ffc13a!important; font-family:'Lucida Console','Courier New',monospace!important;
    font-size:clamp(12px,1.28vw,22px)!important; letter-spacing:.045em!important;
    text-shadow:0 0 3px #ff9c00,0 0 10px rgba(255,139,0,.75)!important;
    box-shadow:inset 0 0 12px #000!important; mix-blend-mode:normal!important;
  }

  /* fluxo inferior: mesma linguagem visual dos quadros atuais, agora em 5 etapas */
  .pex-cards--flow{display:grid!important;position:absolute!important;left:2.2%!important;right:2.2%!important;bottom:4.2%!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:.65%!important;z-index:14!important;pointer-events:none!important}
  .pex-cards--flow .pex-card{display:flex!important;align-items:center!important;gap:7%!important;min-width:0!important;padding:1.15% 5%!important;background:rgba(1,14,20,.88)!important;border:1px solid rgba(0,220,255,.30)!important;border-radius:4px!important;box-shadow:inset 0 0 22px rgba(0,255,170,.035)!important}
  .pex-cards--flow .pex-card strong{font-size:clamp(7px,.60vw,10.5px)!important;white-space:nowrap!important}
  .pex-cards--flow .pex-card small{font-size:clamp(6px,.52vw,9px)!important;white-space:nowrap!important;color:#21d8ff!important}
  .pex-cards--flow .pex-card-icon{font-size:clamp(13px,1.25vw,21px)!important;color:#22ff8a!important}
  .pex-evolution-title{position:absolute;left:20%;right:20%;bottom:10.25%;z-index:14;text-align:center;font:700 clamp(8px,.72vw,12px) var(--font-mono);letter-spacing:.08em;color:#d7e4ea;text-shadow:0 1px 5px #000;pointer-events:none}
  .pex-evolution-title strong{color:#36ff78}

  /* assinatura Zero: olhos seguem o cursor com movimento deliberadamente atrasado */
  .pex-zero-watch{height:28px;display:flex;align-items:center;gap:5px;opacity:.72;user-select:none;overflow:hidden}
  .zero-eye{width:22px;height:12px;border:1px solid rgba(42,255,130,.42);border-radius:60% 60% 55% 55%;display:grid;place-items:center;box-shadow:0 0 7px rgba(42,255,130,.08)}
  .zero-eye i{width:5px;height:5px;border-radius:50%;background:#39ff82;box-shadow:0 0 6px #39ff82;transform:translate(var(--eye-x,0px),var(--eye-y,0px));transition:transform .16s ease-out}
  .pex-zero-watch b{margin-left:4px;font:700 10px var(--font-mono);color:#39ff82;opacity:.75}
}


/* ===== SeteVias LIVE MASTER 1.4 — final notebook corrections ===== */
@media (min-width:1024px){
  /* 1) O Zabbix já faz parte da fotografia. Não sobrepor KPIs HTML. */
  .pex-board .zbx-kpis{display:none!important}

  /* 2) O fluxo de Evolução Digital ocupa o MESMO espaço visual dos 3 cards antigos. */
  .pex-evolution-title{
    left:4%!important;right:4%!important;bottom:18.2%!important;
    padding:.35% 1%!important;
    background:linear-gradient(90deg,transparent,rgba(1,10,15,.88) 15%,rgba(1,10,15,.88) 85%,transparent)!important;
    font-size:clamp(8px,.78vw,13px)!important;
  }
  .pex-cards--flow{
    left:2.1%!important;right:2.1%!important;bottom:9.1%!important;
    min-height:8.4%!important;padding:.8%!important;gap:.65%!important;
    background:rgba(1,9,14,.96)!important;
    border-top:1px solid rgba(0,230,190,.20)!important;
    border-bottom:1px solid rgba(0,210,255,.16)!important;
    box-shadow:0 -10px 30px rgba(0,0,0,.42)!important;
  }
  .pex-cards--flow .pex-card{
    min-height:54px!important;padding:2% 4%!important;
    background:linear-gradient(180deg,rgba(2,24,30,.94),rgba(1,12,18,.98))!important;
    border:1px solid rgba(0,220,255,.32)!important;
  }

  /* 3) O canvas usa cover real; este fundo é apenas continuidade atmosférica de segurança. */
  .pex-scene-viewport{justify-content:center!important;background:#01070c!important}
  .pex-scene-viewport::before{inset:-8%!important;opacity:1!important;filter:blur(34px) brightness(.38) saturate(.95)!important}
}

/* ===== SeteVias LIVE MASTER 1.5 — lower deck cleanup ===== */
@media (min-width:1024px){
  /* The photographic master still contains the previous 3-card strip. Hide that
     whole UI band and rebuild the requested Evolution Digital flow in the same
     physical area so there is only one lower navigation layer. */
  .pex-scene-canvas::after{
    content:"";
    position:absolute;
    left:1.7%; right:1.7%;
    bottom:7.8%; height:12.6%;
    z-index:13;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(1,10,15,.985),rgba(1,8,13,.995));
    border-top:1px solid rgba(0,220,190,.18);
    border-bottom:1px solid rgba(0,190,230,.12);
    box-shadow:0 -12px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(45,255,150,.035);
  }

  .pex-evolution-title{
    left:5%!important; right:5%!important;
    bottom:17.45%!important;
    z-index:16!important;
    padding:0!important;
    background:none!important;
    font-size:clamp(8px,.72vw,12px)!important;
    line-height:1.2!important;
  }

  .pex-cards--flow{
    display:grid!important;
    left:2.6%!important; right:2.6%!important;
    bottom:9.05%!important;
    height:7.15%!important; min-height:0!important;
    padding:.55%!important;
    gap:.65%!important;
    z-index:16!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    align-items:stretch!important;
  }
  .pex-cards--flow .pex-card{
    min-height:0!important;
    height:100%!important;
    padding:2.2% 4%!important;
    background:linear-gradient(180deg,rgba(2,25,31,.98),rgba(1,12,18,.99))!important;
    border:1px solid rgba(0,220,255,.34)!important;
    box-shadow:inset 0 0 20px rgba(0,255,170,.025),0 2px 10px rgba(0,0,0,.18)!important;
  }

  /* The old standalone HTML footer was part of the prototype shell and creates
     a second visual menu under the scene. Desktop uses the integrated scene only. */
  .pex-footer{display:none!important}
}


/* ===== SeteVias LIVE MASTER 1.6 — clock + Zero Cat ===== */
@media (min-width:1024px){
  /* O visor da foto é totalmente coberto: fica somente a hora real de São Paulo. */
  .pex-clock{
    left:91.05%!important; top:28.95%!important; width:8.65%!important; height:5.0%!important;
    background:radial-gradient(ellipse at center,#171006 0%,#0b0702 72%,#050301 100%)!important;
    border:1px solid rgba(137,91,24,.26)!important; border-radius:5px!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
    color:#ffc13a!important; font-family:'Lucida Console','Courier New',monospace!important;
    font-size:clamp(13px,1.36vw,23px)!important; font-weight:700!important; line-height:1!important;
    letter-spacing:.065em!important; text-shadow:0 0 3px #ff9c00,0 0 10px rgba(255,139,0,.82)!important;
    box-shadow:inset 0 0 16px #000,0 0 5px rgba(255,160,0,.12)!important;
    overflow:hidden!important; z-index:40!important;
  }
  .pex-clock-colon{margin:0 .05em!important}

  /* Gatinho Zero: discreto, preto, integrado ao rodapé; olhos seguem o mouse. */
  .pex-zero-cat{position:relative;width:92px!important;height:42px!important;margin:3px 0 5px 2px!important;overflow:visible!important;opacity:.88!important;gap:0!important}
  .pex-zero-cat .cat-face{position:absolute;left:14px;top:9px;width:43px;height:28px;border-radius:48% 48% 44% 44%;background:#02080b;border:1px solid rgba(42,255,130,.25);box-shadow:0 0 12px rgba(42,255,130,.08)}
  .pex-zero-cat .cat-ear{position:absolute;top:2px;width:17px;height:19px;background:#02080b;border:1px solid rgba(42,255,130,.20);transform:rotate(45deg);z-index:0}
  .pex-zero-cat .cat-ear-l{left:15px}.pex-zero-cat .cat-ear-r{left:42px}
  .pex-zero-cat .zero-eye{position:absolute;top:9px;width:12px!important;height:8px!important;border:0!important;box-shadow:none!important;background:transparent!important;display:grid!important;place-items:center!important}
  .pex-zero-cat .zero-eye:nth-child(1){left:7px}.pex-zero-cat .zero-eye:nth-child(2){right:7px}
  .pex-zero-cat .zero-eye i{width:4px!important;height:6px!important;background:#39ff82!important;box-shadow:0 0 7px #39ff82!important}
  .pex-zero-cat .cat-nose{position:absolute;left:20px;top:18px;width:3px;height:2px;border-radius:50%;background:rgba(42,255,130,.55)}
  .pex-zero-cat .cat-tail{position:absolute;left:55px;top:18px;width:26px;height:20px;border:3px solid #02080b;border-left:0;border-bottom:0;border-radius:0 20px 0 0;transform:rotate(-15deg);transform-origin:left center;animation:zeroTail 3.8s ease-in-out infinite}
  .pex-zero-cat b{position:absolute;left:67px;bottom:0;margin:0!important}
}
@keyframes zeroTail{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(7deg)}}
@media (prefers-reduced-motion:reduce){.pex-zero-cat .cat-tail{animation:none!important}}


/* ===== SeteVias LIVE MASTER 1.7 — composição igual à referência 02 ===== */
@media (min-width:1024px){
  /* Sidebar mais estreita, como no master visual aprovado. */
  .pex-app{grid-template-columns:clamp(230px,14.65vw,250px) minmax(0,1fr)!important}

  /* A referência 02 mostra a fotografia inteira ocupando TODO o workspace.
     A cena é deliberadamente adaptada ao retângulo disponível, sem crop lateral. */
  .pex-scene-viewport{align-items:stretch!important;justify-content:stretch!important;background:#01070c!important}
  .pex-scene-viewport::before{display:none!important}
  .pex-scene-canvas{
    width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
    aspect-ratio:auto!important;flex:1 1 auto!important;box-shadow:none!important
  }
  .pex-scene-bg{inset:0!important;background-size:100% 100%!important;background-position:center!important}

  /* Fluxo inferior com a mesma leitura cromática da referência aprovada. */
  .pex-scene-canvas::after{left:0!important;right:0!important}
  .pex-cards--flow{left:1.7%!important;right:1.7%!important;bottom:2.1%!important;height:6.5%!important;gap:.75%!important}
  .pex-evolution-title{bottom:9.25%!important}
  .pex-cards--flow .pex-card{border-width:1px!important;border-style:solid!important}
  .pex-cards--flow .pex-card:nth-child(1){border-color:#0b78ff!important;background:linear-gradient(180deg,rgba(3,34,62,.96),rgba(1,15,26,.99))!important}.pex-cards--flow .pex-card:nth-child(1) .pex-card-icon{color:#1c8cff!important}
  .pex-cards--flow .pex-card:nth-child(2){border-color:#20c956!important;background:linear-gradient(180deg,rgba(4,48,27,.96),rgba(1,20,13,.99))!important}.pex-cards--flow .pex-card:nth-child(2) .pex-card-icon{color:#28ef68!important}
  .pex-cards--flow .pex-card:nth-child(3){border-color:#d39a00!important;background:linear-gradient(180deg,rgba(58,43,4,.96),rgba(24,17,1,.99))!important}.pex-cards--flow .pex-card:nth-child(3) .pex-card-icon{color:#ffd21c!important}
  .pex-cards--flow .pex-card:nth-child(4){border-color:#c9222d!important;background:linear-gradient(180deg,rgba(57,8,14,.96),rgba(24,2,6,.99))!important}.pex-cards--flow .pex-card:nth-child(4) .pex-card-icon{color:#ff2838!important}
  .pex-cards--flow .pex-card:nth-child(5){border-color:#8e35d8!important;background:linear-gradient(180deg,rgba(43,10,63,.96),rgba(18,3,28,.99))!important}.pex-cards--flow .pex-card:nth-child(5) .pex-card-icon{color:#b64cff!important}

  /* Gatinho Zero com presença semelhante à referência 02. */
  .pex-zero-cat{width:118px!important;height:58px!important;margin:2px 0 6px 2px!important;opacity:.94!important}
  .pex-zero-cat .cat-face{left:18px!important;top:12px!important;width:50px!important;height:34px!important}
  .pex-zero-cat .cat-ear-l{left:20px!important}.pex-zero-cat .cat-ear-r{left:51px!important}
  .pex-zero-cat .cat-ear{top:4px!important;width:19px!important;height:21px!important}
  .pex-zero-cat .zero-eye{top:11px!important}
  .pex-zero-cat .cat-tail{left:66px!important;top:24px!important;width:31px!important;height:25px!important}
  .pex-zero-cat b{left:88px!important;bottom:5px!important}
}


/* ===== FINAL 1.8 — referência visual aprovada congelada ===== */
@media (min-width:1024px){
  /* A sidebar e o cenário permanecem componentes reais. O fundo é apenas a fotografia do ambiente. */
  .pex-sidebar{z-index:50!important}
  .pex-scene-canvas{overflow:hidden!important}
  /* Esconde integralmente a antiga faixa de três cards assada na fotografia. */
  .pex-scene-canvas::after{bottom:0!important;height:13.3%!important;left:0!important;right:0!important;background:linear-gradient(180deg,rgba(1,10,15,.985),#01080d 34%,#01080d 100%)!important;border-top:1px solid rgba(20,230,160,.20)!important}
  .pex-evolution-title{bottom:10.05%!important;z-index:18!important}
  .pex-cards--flow{bottom:2.2%!important;z-index:18!important}
  /* O relógio HTML cobre completamente o visor vazio e mantém apenas a hora real de São Paulo. */
  .pex-clock{z-index:45!important}
}


/* ============================================================
   LIVE MASTER 1.9 — CLEAN HOME
   Remove integralmente cards/faixa inferior.
   Mantém apenas o cenário e uma linha translúcida discreta.
   ============================================================ */
@media (min-width:901px){
  .pex-workspace{
    grid-template-rows:minmax(0,1fr)!important;
    overflow:hidden!important;
  }

  .pex-scene-viewport{
    background:#01070c!important;
    overflow:hidden!important;
  }

  .pex-scene-canvas{
    aspect-ratio:1296/810!important;
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    max-height:100%!important;
    overflow:hidden!important;
  }

  .pex-scene-bg{
    background-image:url('../assets/scenario/OFFICE-LIVE-CLEAN-HOME.webp?v=clean19')!important;
    background-size:100% 100%!important;
    background-position:center!important;
  }

  /* Desativa definitivamente as duas faixas antigas. */
  .pex-cards,
  .pex-cards--flow,
  .pex-evolution-title,
  .pex-footer{
    display:none!important;
  }

  /* O pseudo-elemento antigo escondia os cards com uma tarja opaca.
     Agora vira apenas uma linha de acabamento quase transparente. */
  .pex-scene-canvas::after{
    content:""!important;
    position:absolute!important;
    left:2.5%!important;
    right:2.5%!important;
    bottom:1.1%!important;
    height:1px!important;
    background:linear-gradient(90deg,
      transparent,
      rgba(0,255,174,.20) 15%,
      rgba(0,255,174,.48) 50%,
      rgba(0,255,174,.20) 85%,
      transparent)!important;
    border:0!important;
    opacity:.72!important;
    z-index:18!important;
    pointer-events:none!important;
  }

  .pex-clean-footer-line{
    position:absolute;
    left:7%;
    right:7%;
    bottom:1.1%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(32,255,177,.14),transparent);
    pointer-events:none;
    z-index:19;
  }

  /* Recalibração vertical porque o canvas agora termina antes da antiga faixa. */
  .pex-clock{
    top:35.3%!important;
  }

  .pex-tower-leds{
    top:52.6%!important;
  }
}