/* GUI de teste do Vision Pro (ver gui-visionpro.js). */
.gui-visionpro { position: absolute; z-index: 2; left: 0; right: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.gui-visionpro.ligada { opacity: 1; }

.gp-card { position: absolute; left: var(--card-x, auto); top: var(--card-y, 0); width: 268px; padding: 9px 12px 12px; border-radius: 14px; background: rgba(11, 12, 15, .88); border: 1px solid rgba(var(--salmon), .32); box-shadow: 0 20px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4); opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .45s ease, transform .7s var(--suave); }
.gui-visionpro[data-fase]:not([data-fase=""]) .gp-card { opacity: 1; transform: none; }

.gp-rotulo { display: flex; align-items: center; gap: 7px; margin: 1px 0 10px; color: var(--texto); font: 600 11px/1.2 var(--sans); white-space: nowrap; }
.gp-rotulo b { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: rgb(var(--salmon)); color: #1a0f0c; font-size: 9.5px; font-weight: 800; }

.gp-corpo { position: relative; height: 72px; }
.gp-perfis, .gp-obra { position: absolute; inset: 0; transition: opacity .35s ease; }
.gp-obra { display: flex; align-items: center; gap: 10px; opacity: 0; }
.gui-visionpro[data-fase="obra"] .gp-perfis { opacity: 0; }
.gui-visionpro[data-fase="obra"] .gp-obra { opacity: 1; }

/* os três perfis */
.gp-perfis { display: flex; justify-content: space-around; align-items: flex-start; }
.gp-hex { position: relative; display: grid; justify-items: center; transition: opacity .35s ease, filter .35s ease, transform .35s var(--suave); }
.gp-hex i, .gp-hex img { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.gp-hex i { display: block; width: 52px; height: 60px; padding: 1.5px; background: rgba(243, 239, 230, .22); transition: background .2s ease; }
.gp-hex img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gp-hex.foco i { background: rgba(var(--salmon), .9); }
.gui-visionpro.escolhido .gp-hex:not([data-n="1"]) { opacity: .32; filter: grayscale(.85); }
.gui-visionpro.escolhido .gp-hex[data-n="1"] { transform: scale(1.06); filter: drop-shadow(0 0 10px rgba(var(--salmon), .7)); }
.gui-visionpro.escolhido .gp-hex[data-n="1"] i { background: rgb(var(--salmon)); }
.gp-hex em { position: absolute; bottom: -7px; padding: 1px 6px; border-radius: 999px; background: rgb(var(--salmon)); color: #1a0f0c; font: 800 8px/1.35 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(3px); transition: opacity .3s ease, transform .3s ease; }
.gui-visionpro.escolhido .gp-hex em { opacity: 1; transform: none; }
.gui-visionpro.chegou .gp-hex[data-n="1"] i { animation: gpPulso .45s ease-out; }
@keyframes gpPulso { 40% { background: #fff; } }

/* a referência do cliente voando até o perfil */
.gp-ref-voo { position: absolute; left: 0; top: 0; width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid rgba(var(--salmon), .7); box-shadow: 0 10px 26px rgba(0, 0, 0, .6); }
.gui-visionpro:not(.voando) .gp-ref-voo { opacity: 0 !important; }

/* a obra */
.gp-ref-fixa { flex: none; width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid rgba(243, 239, 230, .18); transition: border-color .3s ease, box-shadow .3s ease; }
.gui-visionpro.entregue .gp-ref-fixa { border-color: rgb(var(--salmon)); box-shadow: 0 0 0 3px rgba(var(--salmon), .22); }
.gp-andamento { display: grid; flex: 1; gap: 6px; min-width: 0; }
.gp-andamento small { color: var(--apagado); font: 700 9px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.gp-barra { display: block; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(243, 239, 230, .12); }
.gp-barra i { display: block; height: 100%; background: rgb(var(--salmon)); transform: scaleX(0); transform-origin: left; }
.gp-etapa { color: var(--texto); font: 600 11.5px/1.25 var(--sans); white-space: nowrap; }
.gui-visionpro.entregue .gp-etapa::before { content: '\2713  '; color: rgb(var(--salmon)); }

/* os três passos do texto viram a barra de progresso do vídeo */
.programa[data-slug="visionpro"] .p-passos li { background: linear-gradient(rgb(var(--c)), rgb(var(--c))) no-repeat 0 0 / var(--gv, 0%) 2px; background-origin: border-box; transition: color .3s ease; }
.programa[data-slug="visionpro"] .p-passos li.gv-agora { color: var(--texto); }

@media (max-width: 760px) {
  .gp-card { width: 206px; padding: 7px 9px 9px; border-radius: 11px; }
  .gp-rotulo { gap: 5px; margin-bottom: 7px; font-size: 9.5px; }
  .gp-rotulo b { width: 13px; height: 13px; font-size: 8px; }
  .gp-corpo { height: 56px; }
  .gp-hex i { width: 40px; height: 46px; }
  .gp-hex em { bottom: -6px; font-size: 7px; }
  .gp-ref-voo, .gp-ref-fixa { width: 72px; }
  .gp-obra { gap: 8px; }
  .gp-andamento small { font-size: 7.5px; }
  .gp-etapa { font-size: 10px; }
}