/* =====================================================================
   T-1337 | SALA V3: Sistemas e Audiovisual (carregado depois de style.css)
   Cada frente muda a sala (luz, medidores, texto, exemplo) pelo atributo
   data-frente no body. So cores da marca (e a mesma cor com transparencia).
   ===================================================================== */
[hidden]{display:none !important}
body{--f:var(--cobre);--luz-rgb:217,115,59}
body[data-frente="sistemas"]{--f:var(--nevoa);--luz-rgb:243,244,246}
body[data-frente="audiovisual"]{--f:var(--cobre);--luz-rgb:163,78,26}

/* a cor da frente nos poucos pontos de destaque */
.led,.topo__modn,.tele__t em,.trilho a[aria-current="true"] b{transition:color .5s,background-color .5s}
.led{background:var(--f);box-shadow:0 0 0 3px rgba(var(--luz-rgb),.22)}
.topo__modn{color:var(--f)}
.trilho a[aria-current="true"]{border-left-color:var(--f);background:linear-gradient(90deg,rgba(var(--luz-rgb),.16),transparent)}
.trilho a[aria-current="true"] b{color:var(--f)}
.trilho__prog i{background:var(--f)}
.topo__frente{margin-left:8px;padding-left:12px;border-left:1px solid var(--linha-forte);color:var(--f);white-space:nowrap;transition:color .5s}

/* ---------- luz da sala ---------- */
.luz{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.luz i{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;will-change:opacity}
.luz .l-geral{background:radial-gradient(60% 50% at 50% 38%,rgba(217,115,59,.09),transparent 70%)}
.luz .l-sistemas{background:radial-gradient(75% 60% at 28% -5%,rgba(243,244,246,.17),transparent 70%),linear-gradient(180deg,rgba(243,244,246,.04),transparent 45%)}
.luz .l-audiovisual{background:radial-gradient(45% 70% at 104% 46%,rgba(163,78,26,.55),transparent 72%),radial-gradient(34% 40% at -4% 100%,rgba(217,115,59,.12),transparent 70%)}
body[data-frente="geral"] .luz .l-geral,
body[data-frente="sistemas"] .luz .l-sistemas,
body[data-frente="audiovisual"] .luz .l-audiovisual{opacity:1}
/* a luz do audiovisual tem movimento: so opacidade, no compositor */
.luz .l-audiovisual::after{content:"";position:absolute;inset:0;opacity:0}
.luz .l-audiovisual::after{background:radial-gradient(40% 55% at 100% 46%,rgba(246,227,214,.18),transparent 70%);animation:luzPulsa 5.5s ease-in-out infinite}
@keyframes luzPulsa{0%,100%{opacity:.1}50%{opacity:1}}

/* ---------- abertura: frentes em atalho ---------- */
.chips{list-style:none;margin:clamp(16px,3vh,28px) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;background:transparent;border:1px solid var(--linha-forte);color:var(--nevoa);font:500 15px/1 var(--f-texto);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.chip:hover{border-color:var(--cobre);background:var(--painel)}
.chip:active{transform:translateY(1px)}
.mod--abertura .ab__selo{width:clamp(96px,19vh,190px)}
.ab .lead{max-width:50ch}

/* ---------- 02 a sala ---------- */
.mod--sala{padding-top:clamp(56px,9vh,96px);padding-bottom:clamp(56px,9vh,100px);min-height:calc(100vh - var(--topo));min-height:calc(100svh - var(--topo));display:flex;align-items:center}
.sala{width:100%;max-width:1280px;display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);column-gap:clamp(24px,3vw,48px);row-gap:clamp(18px,3vh,30px);align-items:start}
.sala__cab{grid-column:1/-1;max-width:760px}
.sala__cab .lead{margin-top:12px}
.mod--sala .cab h2{font-size:clamp(32px,3.6vw,52px)}

.parede{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
.tela{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;margin:0;padding:0;text-align:left;cursor:pointer;color:var(--nevoa);background:var(--noite);border:1px solid var(--linha);transition:border-color .4s;-webkit-tap-highlight-color:transparent}
.tela[data-f="sistemas"]{--tf:var(--nevoa)}
.tela[data-f="audiovisual"]{--tf:var(--cobre)}
.tela:hover{border-color:var(--linha-forte)}
.tela:focus-visible{outline:3px solid var(--cobre);outline-offset:3px;z-index:3}
.tela__tela{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--noite)}
.tela__tela::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(243,244,246,.06),transparent 30%,transparent 70%,rgba(14,26,43,.35))}
.tela__tela .dw{position:absolute;inset:0;width:100%;height:100%}
.tela__leg{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-height:44px;padding:9px 12px;border-top:1px solid var(--linha)}
.tela__leg b{font:600 16px/1.2 var(--f-titulo)}
.tela__leg i{font:400 12px/1.3 var(--f-mono);font-style:normal;color:var(--txt2)}
.tela[aria-selected="true"]{border-color:var(--tf);box-shadow:0 0 0 1px var(--tf),0 0 64px -12px rgba(var(--luz-rgb),.5)}
/* escolhida: a tela grande em cima e a outra em fileira embaixo */
.sala:not([data-frente="geral"]) .parede{grid-template-columns:repeat(2,minmax(0,1fr))}
.sala:not([data-frente="geral"]) .tela[aria-selected="true"]{grid-column:1/-1;grid-row:1}
.sala:not([data-frente="geral"]) .tela[aria-selected="false"]{grid-row:2;max-width:calc(50% - 6px)}
.sala:not([data-frente="geral"]) .tela[aria-selected="true"] .tela__leg b{font-size:18px}
.sala:not([data-frente="geral"]) .tela[aria-selected="false"] .tela__leg{padding:8px 10px}
.sala:not([data-frente="geral"]) .tela[aria-selected="false"] .tela__leg i{display:none}
.sala:not([data-frente="geral"]) .tela[aria-selected="false"]{opacity:.82}
.sala:not([data-frente="geral"]) .tela[aria-selected="false"]:hover{opacity:1}
/* as telas fora de foco ficam paradas (poupa o processador) */
.sala:not([data-frente="geral"]) .tela[aria-selected="false"] .dw *{animation-play-state:paused !important}
.sala.pausa .dw *{animation-play-state:paused !important}

.sala__lado{display:flex;flex-direction:column;gap:18px;min-width:0}
.info{border:1px solid var(--linha);background:rgba(14,26,43,.78);padding:clamp(18px,2vw,26px)}
.info:focus{outline:none}
.info__k{font-size:12px;color:var(--f);margin-bottom:10px;transition:color .5s}
.info h3{font-size:clamp(26px,2.6vw,36px);margin-bottom:12px}
.info__p{color:var(--txt2);font-size:17px;max-width:46ch}
.info__l{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.info__l li{position:relative;padding-left:22px;font-size:16px;line-height:1.45}
.info__l li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:2px;background:var(--f);transition:background-color .5s}
.info__b:not([hidden]){animation:infoEntra .5s cubic-bezier(.2,.8,.2,1)}
@keyframes infoEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.info__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.info__acoes .btn{height:auto;padding:12px 22px;line-height:1.25;text-align:center}


/* ---------- desenhos das telas (SVG proprio) ---------- */
.dw{display:block}
.dw text{font-family:var(--f-mono);font-size:10px;fill:rgba(243,244,246,.72);letter-spacing:.02em}
.dw .d-tv{font-size:24px;font-weight:500;fill:var(--nevoa)}
.dw .d-tv--m{font-size:14px}
.dw .d-t2{fill:rgba(243,244,246,.62)}
.dw .d-ta{fill:var(--tf)}
.d-bg{fill:var(--noite)}
.d-pn{fill:rgba(243,244,246,.05);stroke:rgba(243,244,246,.12)}
.d-pn2{fill:rgba(243,244,246,.1);stroke:rgba(243,244,246,.14)}
.d-pn3{fill:rgba(243,244,246,.2);stroke:none}
.d-n2{fill:rgba(243,244,246,.5)}
.d-ln{stroke:rgba(243,244,246,.2);fill:none}
.d-lf{stroke:rgba(243,244,246,.34);fill:none}
.d-pn.d-lf,.d-pn2.d-lf{fill:rgba(243,244,246,.05)}
.d-a{stroke:var(--tf);fill:none}
.d-af{fill:var(--tf);stroke:none}
.d-af2{fill:var(--tf);opacity:.3;stroke:none}

/* sistemas */
.d-bar{fill:var(--tf);opacity:.4;transform-box:fill-box;transform-origin:50% 100%;animation:dBarra 4.8s ease-in-out infinite;animation-delay:calc(var(--i) * -.42s)}
.d-bar--f{opacity:.85}
@keyframes dBarra{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.62)}}
.d-traco{fill:none;stroke:var(--tf);stroke-width:2;stroke-linejoin:round;stroke-dasharray:520;animation:dTraco 7s ease-in-out infinite}
@keyframes dTraco{0%{stroke-dashoffset:520}35%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:-520}}
.d-rosca{fill:none;stroke:var(--tf);stroke-width:14;stroke-dasharray:130 84;animation:dRosca 6s ease-in-out infinite}
@keyframes dRosca{0%,100%{stroke-dasharray:104 110}50%{stroke-dasharray:158 56}}

/* cena do drone (dentro do monitor da ilha de edicao) */
.d-terreno{animation:dDeriva 16s ease-in-out infinite alternate}
@keyframes dDeriva{from{transform:translate(0,0)}to{transform:translate(-38px,-22px)}}
.d-lote{fill:rgba(243,244,246,.045);stroke:rgba(243,244,246,.2);stroke-width:1}
.d-via{fill:none;stroke:var(--tf);stroke-width:9;opacity:.2}
.d-telhado{fill:var(--tf);opacity:.26;stroke:var(--tf);stroke-opacity:.6}
.d-arv{fill:rgba(243,244,246,.16)}
.d-drone{animation:dDroneVoa 5s ease-in-out infinite alternate}
@keyframes dDroneVoa{from{transform:translate(262px,62px)}to{transform:translate(246px,70px)}}
/* as duas cenas do monitor se alternam (so opacidade) */
.d-cena--a{animation:dCenaA 16s ease-in-out infinite}
.d-cena--b{opacity:0;animation:dCenaB 16s ease-in-out infinite}
@keyframes dCenaA{0%,38%{opacity:1}46%,92%{opacity:0}100%{opacity:1}}
@keyframes dCenaB{0%,38%{opacity:0}46%,92%{opacity:1}100%{opacity:0}}

/* audiovisual */
.d-ceu{fill:var(--tf);opacity:.1}
.d-sol{fill:var(--tf);opacity:.9;animation:dSol 9s ease-in-out infinite alternate}
@keyframes dSol{from{transform:translateY(8px)}to{transform:translateY(-6px)}}
.d-nuvem{fill:rgba(243,244,246,.2);animation:dNuvem 12s ease-in-out infinite alternate}
.d-nuvem--b{animation-duration:15s;animation-direction:alternate-reverse}
@keyframes dNuvem{from{transform:translateX(-30px)}to{transform:translateX(40px)}}
.d-mont{fill:rgba(243,244,246,.14)}
.d-mont2{fill:rgba(243,244,246,.26)}
.d-onda{fill:none;stroke:var(--tf);stroke-width:1.6;stroke-linejoin:round;animation:dOnda var(--t,2.6s) linear infinite}
.d-onda--b{stroke:rgba(243,244,246,.55);stroke-width:1.2}
@keyframes dOnda{to{transform:translateX(calc(var(--p) * -1px))}}
.d-onda-n{fill:none;stroke:rgba(243,244,246,.7);stroke-width:1}
.d-vu0{fill:rgba(243,244,246,.1)}
.d-vu{fill:var(--tf);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.6);animation:dVu .9s ease-in-out infinite alternate}
.d-vu--r{animation-duration:1.15s;animation-delay:-.4s}
@keyframes dVu{0%{transform:scaleY(.25)}35%{transform:scaleY(.8)}60%{transform:scaleY(.45)}100%{transform:scaleY(.95)}}
.d-reg{fill:none;stroke:rgba(243,244,246,.4);stroke-width:8;stroke-dasharray:1 9}
.d-regM{fill:none;stroke:rgba(243,244,246,.7);stroke-width:14;stroke-dasharray:1 49}
.d-pista{fill:rgba(243,244,246,.04)}
.d-clipA{fill:var(--tf);fill-opacity:.32;stroke:var(--tf);stroke-opacity:.7}
.d-clipB{fill:rgba(243,244,246,.2);stroke:rgba(243,244,246,.5)}
.d-clipA2{fill:var(--tf);fill-opacity:.16;stroke:var(--tf);stroke-opacity:.5}
.d-clipB2{fill:rgba(243,244,246,.1);stroke:rgba(243,244,246,.35)}
.d-play{transform:translateX(320px);animation:dPlay 12s linear infinite}
@keyframes dPlay{from{transform:translateX(52px)}to{transform:translateX(612px)}}

/* ---------- 03 trabalhos (escondida ate haver material) ---------- */
.mod--trabalhos{padding-top:clamp(72px,12vh,120px);padding-bottom:clamp(72px,12vh,120px)}
.trab__grade{margin-top:clamp(28px,5vh,52px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1280px}
.trab{border:1px solid var(--linha);background:var(--painel);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.trab h3{font-size:22px}
.slot{margin:0;position:relative;aspect-ratio:16/10;border:1px dashed var(--linha-forte);display:grid;place-items:center;color:var(--txt2);background:rgba(14,26,43,.5)}
.slot__ico{width:64px;height:40px;color:var(--cobre);opacity:.8}
.slot figcaption{position:absolute;left:10px;right:10px;bottom:8px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 8px;font:400 11px/1.3 var(--f-mono)}
.slot figcaption span{white-space:nowrap}
.slot figcaption em{font-style:normal;color:var(--cobre)}
.trab__nota{margin-top:20px;max-width:60ch;color:var(--txt2);font-size:15px}

/* ---------- telas largas e baixas ---------- */
@media (min-width:1700px){
  .sala,.trab__grade{max-width:1400px}
}
@media (min-width:1280px) and (max-width:1599px){
  .sala{grid-template-columns:minmax(0,1.9fr) minmax(290px,1fr)}
}
@media (min-width:900px) and (max-height:820px){
  .mod--sala{padding-top:36px;padding-bottom:40px}
  .sala{row-gap:14px}
  .mod--sala .cab h2{font-size:clamp(30px,3vw,42px)}
  .sala__cab .lead{font-size:16px;margin-top:8px}
  .info{padding:18px 20px}
  .info h3{font-size:26px;margin-bottom:8px}
  .info__p{font-size:16px}
  .info__l{margin-top:12px;gap:8px}
  .info__l li{font-size:15px}
  .info__acoes{margin-top:16px}
}

/* ---------- celular e telas menores ---------- */
@media (max-width:1079px){
  .sala{grid-template-columns:minmax(0,1fr)}
  .sala__lado{display:grid;grid-template-columns:minmax(0,1fr)}
}
@media (min-width:700px) and (max-width:1079px){
  .sala__lado{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
}
@media (max-width:899px){
  .topo__frente{display:none}
  .mod--sala{display:block;padding-top:64px;padding-bottom:56px;min-height:0}
  .mod--sala .cab h2{font-size:clamp(30px,9vw,40px)}
  .parede{gap:10px}
  .tela__leg{padding:8px 10px;min-height:44px}
  .tela__leg b{font-size:15px}
  .tela__leg i{display:none}
  .sala:not([data-frente="geral"]) .tela[aria-selected="true"] .tela__leg i{display:inline}
  .info{padding:18px}
  .info__acoes .btn{width:100%}
  .chips{gap:8px}
  .chip{flex:1 1 calc(50% - 8px);min-width:0}
  .ab__acoes{margin-top:18px}
}
@media (max-width:560px){
  .trab__grade{grid-template-columns:minmax(0,1fr)}
  .sala:not([data-frente="geral"]) .tela[aria-selected="false"] .tela__leg b{font-size:13px}
}

/* ---------- movimento reduzido: troca direta, desenhos parados e completos ---------- */
@media (prefers-reduced-motion:reduce){
  .luz i{transition:none}
  .luz .l-audiovisual::after{display:none}
  .info__b:not([hidden]){animation:none}
  .d-traco{stroke-dasharray:none}
  .d-cena--a{animation:none;opacity:0}
  .d-cena--b{animation:none;opacity:1}
  .d-drone{animation:none}
  .d-play{transform:translateX(320px)}
}

/* T-1350: aviso de cookies e links do rodape ficam em css/cookies.css */
/* T-1350: alvos de toque de 44 px nos links de contato */
.term__mail{display:inline-flex;align-items:center;min-height:44px}