/* ISG · vitrine do equipamento (painel solar e bateria), versão escura
   Seção isolada: remover este <link>, o <script> de vitrine.js e a <section id="equipamento"> desfaz tudo. */

.vitrine {
  --v-bg: #080b10;
  --v-ink: #eef2f8;
  --v-ink-2: #b4bdca;
  --v-ink-3: #7f8a99;
  --v-line: rgba(160, 185, 230, 0.16);
  --v-blue: #7ba3ff;
  --v-glass: rgba(12, 16, 23, 0.66);
  --ink: #eef2f8; --ink-2: #b4bdca; --ink-3: #7f8a99; --paper: #080b10;
  background: var(--v-bg);
  color: var(--v-ink);
  padding-block: clamp(56px, 7vw, 96px);
}
.vitrine .small { color: var(--v-ink-3); }

/* ---------- título ---------- */
.vitrine__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: clamp(20px, 2.6vw, 30px); }
.vitrine__head .lead { margin: 0; color: var(--v-ink-2); }

/* ---------- conjunto: barra + palco + cartão + lista ---------- */
.vitrine__view { position: relative; }

.vitrine__stage {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9; max-height: 80vh; width: 100%;
  border-radius: 10px;
  border: 1px solid var(--v-line);
  background:
    radial-gradient(55% 60% at 50% 58%, rgba(70, 105, 200, 0.22) 0%, rgba(70, 105, 200, 0) 70%),
    radial-gradient(120% 90% at 50% 0%, #121a28 0%, #0a0e15 55%, #06080c 100%);
}
.vitrine__stage::after {        /* vinheta: segura o olhar no centro */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.55);
  border-radius: inherit;
}
.vitrine__poster, .vitrine__canvas, .vitrine__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.vitrine__poster { object-fit: cover; }
.vitrine.is-3d .vitrine__poster { display: none; }
.vitrine__canvas { display: block; cursor: grab; touch-action: pan-y; }
.vitrine.is-dragging .vitrine__canvas { cursor: grabbing; }
.vitrine:not(.is-3d) .vitrine__canvas { visibility: hidden; }
.vitrine__lines { pointer-events: none; overflow: visible; z-index: 1; }

/* ---------- barra de controles, de vidro, por cima do palco ---------- */
.vitrine__bar {
  position: absolute; top: 16px; left: 16px; right: 16px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.vitrine__bar > * { pointer-events: auto; }
.vitrine__tabs, .vitrine__open {
  background: var(--v-glass); border: 1px solid var(--v-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.vitrine__tabs { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; }
.vitrine__tabs [role="tab"] {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  min-height: 40px; padding: 0 18px; border-radius: 999px;
  font-size: 0.92rem; font-weight: 500; color: var(--v-ink-2);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.vitrine__tabs [role="tab"]:hover { color: var(--v-ink); }
.vitrine__tabs [role="tab"][aria-selected="true"] { background: var(--v-ink); color: #0b0f15; }
.vitrine__open {
  min-height: 48px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  font-size: 0.92rem; font-weight: 500; color: var(--v-ink);
  display: inline-flex; align-items: center; gap: 10px;
}
.vitrine__open::before {       /* ícone de camadas */
  content: ""; width: 14px; height: 10px;
  border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
  opacity: .85;
}
.vitrine__open:hover { border-color: rgba(123, 163, 255, 0.5); }
.vitrine__open[aria-pressed="true"] { background: var(--v-blue); color: #08101f; border-color: var(--v-blue); }
.vitrine__tabs [role="tab"]:focus-visible, .vitrine__open:focus-visible { outline: 3px solid var(--v-blue); outline-offset: 2px; }
.vitrine:not(.is-3d) .vitrine__open { display: none; }

/* ---------- pinos ---------- */
.vitrine__pins, .vitrine__tags { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.vitrine:not(.is-3d) .vitrine__pins, .vitrine:not(.is-3d) .vitrine__tags, .vitrine:not(.is-3d) .vitrine__lines { display: none; }
.vitrine__pin {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  display: grid; place-items: center;
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer; pointer-events: auto;
  transition: opacity .3s var(--ease);
}
.vitrine__pin::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--v-blue); background: rgba(8, 11, 16, 0.55);
  box-shadow: inset 0 0 0 3.5px rgba(8, 11, 16, 0.55), inset 0 0 0 8px #fff;
  transition: transform .25s var(--ease);
}
.vitrine__pin::after {          /* pulso só até a primeira interação */
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--v-blue); opacity: 0;
  animation: vitrine-ping 2.6s var(--ease) infinite;
}
.vitrine.is-touched .vitrine__pin::after { animation: none; }
@keyframes vitrine-ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.vitrine__pin:hover::before { transform: scale(1.18); }
.vitrine__pin.is-active::before { background: var(--v-blue); box-shadow: inset 0 0 0 3.5px var(--v-blue), inset 0 0 0 8px #fff; }
.vitrine__pin-name {
  position: absolute; left: 32px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; padding: 6px 10px; border-radius: 6px;
  background: var(--v-glass); border: 1px solid var(--v-line); color: var(--v-ink); font-size: 0.82rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
}
.vitrine__pin:hover .vitrine__pin-name { opacity: 1; }
.vitrine__pin.is-away { opacity: 0; pointer-events: none; }
.vitrine.is-focused .vitrine__pin:not(.is-active) { opacity: 0; pointer-events: none; }

/* ---------- linhas de chamada e etiquetas das camadas ---------- */
.vitrine__callout, .vitrine__leader { fill: none; stroke: var(--v-blue); stroke-width: 1; }
.vitrine__dot, .vitrine__leader-dot { fill: var(--v-blue); }
.vitrine__callout, .vitrine__dot { opacity: 0; transition: opacity .3s var(--ease); }
.vitrine.has-callout .vitrine__callout, .vitrine.has-callout .vitrine__dot { opacity: 1; }
.vitrine__leader, .vitrine__leader-dot, .vitrine__tag { opacity: var(--tags, 0); transition: opacity .35s var(--ease); }
/* pontas dos cabos do inversor: etiqueta sem caixa pesada */
.vitrine__tag--ends { background: rgba(8, 11, 16, 0.55); border-color: rgba(123, 163, 255, 0.55); font-weight: 500; }
.vitrine__tag {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  padding: 4px 9px; border-radius: 5px;
  background: var(--v-glass); border: 1px solid rgba(123, 163, 255, 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 0.8rem; color: var(--v-ink);
}

.vitrine__hint {
  white-space: nowrap;
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem; color: var(--v-ink-3); pointer-events: none; transition: opacity .4s var(--ease);
}
.vitrine__hint::before, .vitrine__hint::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.vitrine__hint.is-gone, .vitrine.is-focused .vitrine__hint { opacity: 0; }
.vitrine:not(.is-3d) .vitrine__hint { display: none; }

/* ---------- cartão da peça: à direita, dentro do palco ---------- */
.vitrine__detail {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%); z-index: 4;
  width: min(320px, 34%);
  padding: 18px 20px 14px; border-radius: 10px;
  background: var(--v-glass); border: 1px solid rgba(123, 163, 255, 0.32);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.vitrine.is-open .vitrine__detail { top: auto; bottom: 24px; transform: none; }
.vitrine__detail h3 { font-size: 1.12rem; color: var(--v-ink); }
.vitrine__detail p { margin-top: 6px; font-size: 0.94rem; line-height: 1.55; color: var(--v-ink-2); }
.vitrine__back {
  margin-top: 10px; min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 0.9rem; font-weight: 500; color: var(--v-blue); text-decoration: underline; text-underline-offset: 3px;
}
.vitrine__back:focus-visible { outline: 3px solid var(--v-blue); outline-offset: 3px; }
.vitrine__detail[hidden] { display: none; }

/* ---------- lista de peças: fileira de botões embaixo, por cima do palco ---------- */
.vitrine__list {
  position: absolute; left: 16px; bottom: 16px; z-index: 5; max-width: 60%;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.vitrine__list button {
  appearance: none; cursor: pointer; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--v-glass); border: 1px solid var(--v-line); color: var(--v-ink-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 0.88rem; transition: border-color .2s var(--ease), color .2s var(--ease);
}
.vitrine__list button:hover { color: var(--v-ink); border-color: rgba(123, 163, 255, 0.45); }
.vitrine__list button[aria-pressed="true"] { color: #fff; border-color: var(--v-blue); background: rgba(123, 163, 255, 0.2); }
.vitrine__list button:focus-visible { outline: 3px solid var(--v-blue); outline-offset: 2px; }
.vitrine.is-js .vitrine__text { display: none; }
.vitrine.is-focused .vitrine__hint { display: none; }

.vitrine__note { margin-top: 18px; max-width: 70ch; }

/* ---------- sem JavaScript: imagem + lista legível ---------- */
html:not(.js) .vitrine__bar, html:not(.js) .vitrine__detail { display: none; }
html:not(.js) .vitrine__list, html:not(.js) .vitrine__list[hidden] { position: static; max-width: none; display: block; margin-top: 16px; }
html:not(.js) .vitrine__list button { background: none; border: 0; padding: 0; min-height: 0; color: var(--v-ink); font-weight: 500; }
html:not(.js) .vitrine__list li { margin-bottom: 12px; }
.vitrine__text { margin-top: 4px; font-size: 0.95rem; color: var(--v-ink-2); max-width: 60ch; }

/* ---------- celular: controles e textos saem de cima da imagem ---------- */
@media (max-width: 760px) {
  .vitrine__bar { position: static; margin-bottom: 10px; flex-wrap: wrap; }
  .vitrine__tabs [role="tab"] { min-height: 38px; }
  .vitrine__tabs [role="tab"] { padding: 0 14px; }
  .vitrine__open { padding: 0 16px; }
  .vitrine__stage { aspect-ratio: 4 / 5; max-height: 74vh; }
  .vitrine__detail, .vitrine.is-open .vitrine__detail { position: static; transform: none; width: auto; margin-top: 10px; }
  .vitrine__list { position: static; max-width: none; margin-top: 12px; }
  .vitrine__pin-name { display: none; }
  .vitrine__tag { font-size: 0.72rem; padding: 3px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .vitrine__pin::after { animation: none; }
  .vitrine * { transition-duration: 0s !important; }
}

/* "Sistema completo": sem "ver por dentro"; os botões levam para a aba de cada equipamento */
.vitrine[data-obj="sistema"] .vitrine__open { display: none; }
.vitrine[data-obj="sistema"] .vitrine__list button::after { content: none; }
.vitrine[data-obj="sistema"] .vitrine__tag--ends { font-weight: 600; }
@media (max-width: 760px) { .vitrine__tabs { flex-wrap: wrap; border-radius: 18px; } .vitrine__tabs [role="tab"] { padding: 0 12px; font-size: .86rem; } }