.vf-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #05070b;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  isolation: isolate;
}

.vf-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --------------------------------------------------------- legenda */
.vf-legend {
  position: absolute;
  left: 3.2%;
  top: 6%;
  max-width: 40%;
  padding: 14px 18px 16px;
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(
    140deg,
    rgba(12, 16, 24, 0.82),
    rgba(12, 16, 24, 0.42)
  );
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}

.vf-legend.is-light {
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.86),
    rgba(255, 255, 255, 0.5)
  );
  border-color: rgba(0, 0, 0, 0.1);
  color: #10141c;
}

.vf-over {
  font-size: clamp(8px, 0.72vw, 12px);
  letter-spacing: 0.22em;
  font-weight: 700;
  opacity: 0.72;
}

.vf-title {
  margin: 6px 0 2px;
  font-size: clamp(14px, 1.5vw, 27px);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.vf-sub {
  font-size: clamp(9px, 0.82vw, 15px);
  opacity: 0.7;
  line-height: 1.3;
}

/* ----------------------------------------------------------- trilho */
.vf-rail {
  position: absolute;
  left: 3.2%;
  right: 3.2%;
  bottom: 3.4%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px, 0.8vw, 14px);
}

.vf-stage {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vf-bar {
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.vf-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #7aa2ff, #cfe0ff);
}

.vf-stage-label {
  font-size: clamp(7px, 0.62vw, 11px);
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.3s ease;
}

.vf-stage.is-active .vf-stage-label {
  color: rgba(255, 255, 255, 0.95);
}

.vf-frame.is-light .vf-stage-label {
  color: rgba(10, 14, 22, 0.45);
}
.vf-frame.is-light .vf-stage.is-active .vf-stage-label {
  color: rgba(10, 14, 22, 0.95);
}
.vf-frame.is-light .vf-bar {
  background: rgba(10, 14, 22, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .vf-legend,
  .vf-fill {
    transition: none;
  }
}

/* ============================================ VERSÃO VERTICAL (9:16) */
.vf-frame.is-portrait {
  aspect-ratio: 9 / 16;
  border-radius: 0;
}

/* legenda vai para o topo, ocupando a faixa livre acima do filme */
.vf-frame.is-portrait .vf-legend {
  left: 5%;
  right: 5%;
  top: 3.2%;
  max-width: none;
  text-align: left;
  padding: 16px 18px 18px;
  border-radius: 0;
}

.vf-frame.is-portrait .vf-over {
  font-size: clamp(9px, 2.2vw, 15px);
}
.vf-frame.is-portrait .vf-title {
  font-size: clamp(19px, 5.2vw, 40px);
}
.vf-frame.is-portrait .vf-sub {
  font-size: clamp(12px, 3vw, 22px);
}

/* trilho de etapas em duas linhas para caber na largura estreita */
.vf-frame.is-portrait .vf-rail {
  left: 5%;
  right: 5%;
  bottom: 3.6%;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 2vw, 16px);
}
.vf-frame.is-portrait .vf-stage-label {
  font-size: clamp(8px, 1.9vw, 13px);
}