:root {
  /* Unidade de escala: vale 1px em telas até 1920x1080 e cresce junto com
     a tela em monitores maiores (2K, 4K, ultrawide), para nada ficar miúdo.
     Todas as medidas do site são escritas como calc(N * var(--u)). */
  --u: max(1px, min(100vw / 1920, 100vh / 1080));
  --bg: #0b0b0c;
  --text: #ffffff;
  --accent: #55c5a9;
  --header-h: calc(95 * var(--u));
  --font-nav: "Wix Madefor Text", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: calc(16 * var(--u));
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: calc(2 * var(--u)) solid var(--accent);
  outline-offset: calc(4 * var(--u));
  border-radius: calc(4 * var(--u));
}

/* ---------- Cabeçalho ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(calc(16 * var(--u)), 4vw, calc(50 * var(--u)));
  padding: 0 calc(16 * var(--u));
  background: #1c1c1d url("../assets/img/bg-header.webp") center bottom / cover no-repeat;
}

.site-header .logo img {
  height: calc(62 * var(--u));
  width: auto;
}

.site-nav {
  display: flex;
}

.site-nav a {
  min-width: clamp(calc(80 * var(--u)), 9vw, calc(130 * var(--u)));
  padding: calc(10 * var(--u)) calc(8 * var(--u));
  text-align: center;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: calc(17 * var(--u));
  transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--accent);
}

/* ---------- Hero (janelas do editor) ---------- */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(calc(28 * var(--u)), 5vh, calc(52 * var(--u)));
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: clamp(calc(32 * var(--u)), 7vh, calc(80 * var(--u))) calc(16 * var(--u));
  /* no site original a imagem fica com 18% de opacidade sobre preto */
  background:
    linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82)),
    #000 url("../assets/img/bg-hero.webp") center top / cover no-repeat;
  overflow: hidden;
}

.hero-intro {
  max-width: calc(720 * var(--u));
  padding: 0 calc(16 * var(--u));
  text-align: center;
}

.hero-intro h1 {
  margin: 0 0 calc(10 * var(--u));
  font-weight: 900;
  font-size: clamp(calc(26 * var(--u)), 4vw, calc(40 * var(--u)));
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-intro p {
  margin: 0;
  font-family: var(--font-nav);
  font-size: clamp(calc(15 * var(--u)), 1.6vw, calc(18 * var(--u)));
  line-height: 1.6;
  opacity: 0.85;
}

.btn {
  display: inline-block;
  padding: calc(12 * var(--u)) calc(28 * var(--u));
  border-radius: calc(8 * var(--u));
  font-weight: 600;
  font-size: calc(16 * var(--u));
  color: #0b0b0c;
  background: var(--accent);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn:hover {
  transform: translateY(calc(-3 * var(--u)));
  filter: brightness(1.12);
}

/* Todas as janelas são posicionadas em % dentro do palco,
   então a composição inteira escala junto com a tela. */
.stage {
  position: relative;
  /* acompanha a largura da tela; o limite pela altura só garante que a
     composição inteira caiba numa tela (sem contar o texto acima dela) */
  width: min(70vw, calc((100svh - var(--header-h)) * 1.748));
  min-width: min(94vw, calc(560 * var(--u)));
  aspect-ratio: 848 / 485;
}

.win {
  position: absolute;
  height: auto;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg));
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.win img {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.win-timeline { left: 6.49%;  top: 16.5%;  width: 72.76%; }
.win-video01  { left: 27.95%; top: 0;      width: 33.61%; }
.win-video02  { left: 65.45%; top: 19.38%; width: 34.55%; }
.win-tools    { left: 0;      top: 25.57%; width: 13.44%; }
.win-image    { left: 14.98%; top: 77.94%; width: 11.56%; }
.win-studios  { left: 71.93%; top: 70.31%; width: 11.2%; }

/* Janelas de vídeo: feitas em HTML para os botões funcionarem de verdade.
   As medidas usam cqw (largura da própria janela) para escalar junto. */
.win-video .tilt {
  aspect-ratio: 446 / 375;
}

.vwin {
  container-type: inline-size;
  position: absolute;
  left: 1.1%;
  top: 0;
  width: 92.4%;
  aspect-ratio: 412 / 333;
  display: flex;
  flex-direction: column;
  background: #222;
  border: calc(1 * var(--u)) solid #303030;
  border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.vwin-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9cqw;
  height: 14cqw;
  padding: 2cqw 0 0 9.5cqw;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 3.3cqw;
  letter-spacing: 0.04em;
  color: #fff;
  user-select: none;
}

.vwin-bar svg {
  width: 4.4cqw;
  height: 4.4cqw;
  fill: currentColor;
}

/* Botão de som, no canto direito da barra */
.vwin-sound {
  display: grid;
  place-items: center;
  align-self: stretch;
  margin-left: auto;
  padding: 0 6cqw 0 4cqw;
  border: 0;
  background: none;
  color: #9a9a9a;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.vwin-sound svg {
  width: 6.4cqw;
  height: 6.4cqw;
}

.vwin-sound .on { display: none; }

.vwin.has-sound .vwin-sound { color: var(--accent); }
.vwin.has-sound .vwin-sound .on { display: inline; }
.vwin.has-sound .vwin-sound .off { display: none; }

.vwin-sound:active {
  transform: scale(0.85);
}

.vwin-sound:focus-visible {
  outline: calc(2 * var(--u)) solid var(--accent);
  outline-offset: calc(-2 * var(--u));
  border-radius: calc(4 * var(--u));
}

@media (hover: hover) {
  .vwin-sound:hover {
    color: #fff;
    transform: scale(1.15);
  }
}

.vwin video {
  flex: none;
  align-self: center;
  width: 91.3%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  pointer-events: none;
}

/* Barra de progresso (criada em js/main.js); clicar nela pula para o ponto */
.vwin-progress {
  flex: none;
  align-self: center;
  width: 91.3%;
  padding: 1.6cqw 0 0.4cqw;
  cursor: pointer;
}

.vwin-progress div {
  height: 1.1cqw;
  border-radius: 1cqw;
  background: #3c3c3c;
  overflow: hidden;
}

.vwin-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

.vwin-controls {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 0 7cqw;
}

.vwin-controls button {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #e4e4e4;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.vwin-controls svg {
  width: 6cqw;
  height: 6cqw;
  fill: currentColor;
}

.vwin-controls button:active {
  transform: scale(0.85);
}

.vwin-controls button:focus-visible {
  outline: calc(2 * var(--u)) solid var(--accent);
  outline-offset: calc(-2 * var(--u));
  border-radius: calc(4 * var(--u));
}

@media (hover: hover) {
  .vwin-controls button:hover {
    color: #fff;
    transform: scale(1.2);
  }
}

/* Botão do estado atual fica aceso */
.vwin.is-playing [data-action="play"],
.vwin.is-paused [data-action="pause"],
.vwin.is-stopped [data-action="stop"] {
  color: var(--accent);
}

/* Em tela cheia o vídeo mostra a imagem inteira */
.vwin video:fullscreen {
  object-fit: contain;
}

/* Flutuação contínua (camada .float) */
.float {
  animation: float-y var(--float-time, 8s) ease-in-out infinite;
}

.win-tools .float,
.win-studios .float { animation-name: float-x; }
.win-image .float   { animation-name: float-z; }

.win-timeline { --float-time: 7.1s; }
.win-video01  { --float-time: 10s; }
.win-video02  { --float-time: 10s; --enter-delay: 0.2s; }
.win-tools    { --float-time: 6.9s; }
.win-image    { --float-time: 6s; --enter-delay: 0.5s; }
.win-studios  { --float-time: 8s; --enter-delay: 0.35s; }

/* Entrada + reação ao clique (camada .tilt) */
.tilt {
  position: relative;
  transition: transform 0.3s ease-in-out;
  animation: wink-in 1.1s var(--enter-delay, 0s) cubic-bezier(0.86, 0, 0.07, 1) backwards;
}

.win-timeline .tilt { animation: none; }

.win-tools    { --t-scale: 0.95; }
.win-image    { --t-rot: -15deg; --t-scale: 1.1; }
.win-studios  { --t-rot: 15deg;  --t-scale: 1.1; }
.win-video01  { --t-rot: -5deg;  --t-scale: 1.05; }
.win-video02  { --t-rot: 5deg;   --t-scale: 1.05; }

@media (hover: hover) {
  .win:not(.is-toggled):hover .tilt {
    transform: scale(1.04);
  }
}

.win.is-toggled .tilt {
  transform: rotate(var(--t-rot, 0deg)) scale(var(--t-scale, 1));
}

/* Arrastar (só com mouse, ver js/main.js) */
.stage.can-drag .win { cursor: grab; }

/* A janela do projeto não é arrastável nem reage ao clique */
.stage .win-timeline { cursor: default; }
.stage .win-timeline:hover .tilt { transform: none; }

.stage .win.dragging {
  cursor: grabbing;
}

.win.dragging .float {
  animation-play-state: paused;
}

.win.dragging .tilt {
  transform: scale(1.06);
  filter: drop-shadow(0 calc(18 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.55));
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(calc(-10 * var(--u))); }
  75%      { transform: translateY(calc(10 * var(--u))); }
}

@keyframes float-x {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(calc(8 * var(--u))); }
  75%      { transform: translateX(calc(-8 * var(--u))); }
}

@keyframes float-z {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.04); }
  75%      { transform: scale(0.96); }
}

@keyframes wink-in {
  from { opacity: 0; transform: scaleY(0); }
}

/* ---------- Página Estudos ---------- */

.estudos {
  flex: 1;
  overflow: hidden;
  min-height: calc(100svh - var(--header-h));
  padding: calc(15 * var(--u)) calc(16 * var(--u)) calc(80 * var(--u));
  /* no site original a imagem fica com 18% de opacidade sobre preto */
  background:
    linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82)),
    #000 url("../assets/img/bg-hero.webp") center top / cover no-repeat;
}

.estudos h1 {
  margin: 0 0 calc(40 * var(--u));
  text-align: center;
  font-weight: 900;
  font-size: clamp(calc(26 * var(--u)), 4vw, calc(35 * var(--u)));
  line-height: 1.4;
}

.estudos-vazio {
  text-align: center;
  font-family: var(--font-nav);
  opacity: 0.7;
}

/* ---------- Página Programas ---------- */

.programas-intro {
  max-width: calc(620 * var(--u));
  margin: calc(-24 * var(--u)) auto calc(44 * var(--u));
  text-align: center;
  font-family: var(--font-nav);
  line-height: 1.6;
  opacity: 0.8;
}

.programas h2 {
  max-width: calc(1000 * var(--u));
  margin: calc(56 * var(--u)) auto calc(20 * var(--u));
  font-weight: 600;
  font-size: calc(20 * var(--u));
  color: var(--accent);
  text-transform: uppercase;
}

.programas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(300 * var(--u))), 1fr));
  gap: calc(28 * var(--u));
  max-width: calc(1000 * var(--u));
  margin: 0 auto;
}

/* Card no estilo das janelas do editor */
.programa-card {
  display: flex;
  flex-direction: column;
  background: #222;
  border-radius: calc(10 * var(--u));
  overflow: hidden;
  box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, 0.55);
  transition: transform 0.3s ease-in-out;
}

@media (hover: hover) {
  .programa-card:hover {
    transform: translateY(calc(-6 * var(--u))) rotate(-0.6deg);
  }

  .programa-card:nth-child(even):hover {
    transform: translateY(calc(-6 * var(--u))) rotate(0.6deg);
  }
}

.programa-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  background: #2b2b2b;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: calc(13 * var(--u));
  letter-spacing: 0.04em;
}

.programa-bar .dots {
  display: flex;
  gap: calc(7 * var(--u));
}

.programa-bar .dots i {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  background: #4bc44b;
}

.programa-bar .dots i:nth-child(2) { background: #f0b429; }
.programa-bar .dots i:nth-child(3) { background: #e5484d; }

.programa-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: calc(14 * var(--u));
  padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u));
}

.programa-head {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
}

.programa-icone {
  flex: none;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  object-fit: contain;
}

.programa-head h3 {
  margin: 0;
  font-weight: 600;
  font-size: calc(22 * var(--u));
  line-height: 1.2;
}

.programa-head small {
  display: block;
  margin-top: calc(4 * var(--u));
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: calc(13 * var(--u));
  opacity: 0.65;
}

.programa-body p {
  margin: 0;
  font-family: var(--font-nav);
  font-size: calc(15 * var(--u));
  line-height: 1.6;
  opacity: 0.85;
}

.programa-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.programa-tags li {
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border-radius: calc(4 * var(--u));
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: calc(12 * var(--u));
  color: #111;
  background: #e0954a;
}

.programa-tags li:nth-child(4n + 2) { background: #e0524d; color: #fff; }
.programa-tags li:nth-child(4n + 3) { background: #a54ddb; color: #fff; }
.programa-tags li:nth-child(4n + 4) { background: #46d95a; }

.programa-link {
  margin-top: auto;
  padding-top: calc(6 * var(--u));
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: calc(14 * var(--u));
  color: var(--accent);
}

.programa-link:hover {
  text-decoration: underline;
}

/* ---------- Página Contato ---------- */

/* Botão "Pedir orçamento": ao clicar, abre o painel com as formas de contato */
.orcamento {
  text-align: center;
  /* ao chegar por #orcamento, o botão não fica escondido atrás do cabeçalho */
  scroll-margin-top: calc(var(--header-h) + 24 * var(--u));
}

.orcamento summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: calc(18 * var(--u));
  padding: calc(14 * var(--u)) calc(34 * var(--u));
}

.orcamento summary::-webkit-details-marker {
  display: none;
}

.orcamento summary:focus-visible {
  outline: calc(2 * var(--u)) solid #fff;
  outline-offset: calc(4 * var(--u));
}

.orcamento-painel {
  width: fit-content;
  max-width: 100%;
  margin: calc(24 * var(--u)) auto 0;
  padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #1b1b1c;
  box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, 0.55);
  animation: painel-in 0.3s ease-out;
}

.orcamento-painel p {
  margin: 0 0 calc(18 * var(--u));
  font-family: var(--font-nav);
  opacity: 0.8;
}

@keyframes painel-in {
  from { opacity: 0; transform: translateY(calc(-10 * var(--u))); }
}

.contato-email {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: calc(16 * var(--u)) calc(28 * var(--u));
  border: calc(2 * var(--u)) solid var(--accent);
  border-radius: calc(10 * var(--u));
  font-weight: 600;
  font-size: clamp(calc(16 * var(--u)), 4.6vw, calc(24 * var(--u)));
  overflow-wrap: anywhere;
  text-align: center;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.contato-email:hover {
  background: var(--accent);
  color: #0b0b0c;
  transform: translateY(calc(-3 * var(--u)));
}

.contato-redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(14 * var(--u));
  margin-top: calc(20 * var(--u));
}

.contato-rede {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  border-radius: calc(8 * var(--u));
  font-weight: 600;
  font-size: calc(16 * var(--u));
  background: #222;
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.45);
  transition: color 0.2s ease, transform 0.2s ease;
}

.contato-rede svg {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}

.contato-rede:hover {
  color: var(--accent);
  transform: translateY(calc(-3 * var(--u)));
}

.contato .programas-grid {
  max-width: calc(760 * var(--u));
}

.integrante-avatar {
  flex: none;
  width: calc(88 * var(--u));
  height: calc(88 * var(--u));
  border-radius: 50%;
  object-fit: cover;
  border: calc(2 * var(--u)) solid var(--accent);
}

.programa-body .integrante-programa {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

.integrante-programa img {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  object-fit: contain;
}

/* ---------- Rodapé / contato ---------- */

.site-footer {
  padding: calc(30 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u));
  text-align: center;
  font-weight: 600;
  background: #0d0d0e url("../assets/img/bg-footer.webp") center / cover no-repeat;
}

.site-footer h2 {
  margin: 0 0 calc(41 * var(--u));
  font-weight: 600;
  font-size: clamp(calc(34 * var(--u)), 6vw, calc(50 * var(--u)));
  line-height: 1.48;
}

.site-footer .label {
  margin: 0 0 calc(16 * var(--u));
  color: var(--accent);
  font-size: calc(20 * var(--u));
}

.site-footer .email {
  margin: 0 0 calc(49 * var(--u));
  line-height: 1.7;
  font-size: clamp(calc(16 * var(--u)), 4.4vw, calc(20 * var(--u)));
  overflow-wrap: anywhere;
}

.site-footer .email a:hover {
  color: var(--accent);
}

.site-footer .copyright {
  margin: 0;
  font-size: calc(13 * var(--u));
}

/* ---------- Telas pequenas ---------- */

@media (max-width: 640px) {
  :root {
    --header-h: calc(68 * var(--u));
  }

  .site-header {
    gap: calc(10 * var(--u));
    padding: 0 calc(10 * var(--u));
  }

  .site-header .logo img {
    height: calc(40 * var(--u));
  }

  .site-nav a {
    min-width: 0;
    padding: calc(10 * var(--u)) calc(8 * var(--u));
    font-size: calc(14 * var(--u));
  }

  .programas-intro {
    margin-top: calc(-16 * var(--u));
  }
}

/* Celular: com quatro links, o menu desce para baixo do logo */
@media (max-width: 480px) {
  .site-header {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-h);
    gap: 0 calc(10 * var(--u));
    padding: calc(6 * var(--u)) calc(8 * var(--u));
  }

  .site-nav a {
    padding: calc(6 * var(--u)) calc(8 * var(--u));
  }
}

/* Celular e tablet em pé: janelas empilhadas */
@media (max-width: 640px), (orientation: portrait) and (max-width: 1024px) {
  .hero {
    min-height: 0;
    padding: calc(40 * var(--u)) 0 calc(64 * var(--u));
  }

  /* No celular as janelas empilham na vertical, maiores,
     alternando os lados e levemente inclinadas. */
  .stage {
    width: min(92vw, calc(520 * var(--u)));
    min-width: 0;
    aspect-ratio: 100 / 190;
  }

  .win-video01  { left: 0;   top: 0;      width: 80%; --rot: -3deg; }
  .win-tools    { left: 0;   top: 39%;    width: 20%; --rot: 2deg; }
  .win-timeline { left: 8%;  top: 31.6%;  width: 92%; --rot: 0deg; }
  .win-video02  { left: 20%; top: 52.6%;  width: 80%; --rot: 3deg; }
  .win-image    { left: 2%;  top: 66%;    width: 19%; --rot: -6deg; }
  .win-studios  { left: 74%; top: 84%;    width: 19%; --rot: 5deg; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .float,
  .tilt {
    animation: none;
  }
}

/* ---------- Estudos: mesmo palco de janelas flutuantes da página inicial ---------- */

.stage.stage-estudos {
  width: min(88vw, calc(1800 * var(--u)));
  min-width: 0;
  aspect-ratio: 1768 / 695;
  margin: 0 auto;
}

.stage-estudos + .stage-estudos {
  margin-top: clamp(calc(70 * var(--u)), 9vw, calc(150 * var(--u)));
}

.stage-estudos .win-tools    { left: 0;     top: 8.3%;  width: 10.1%; }
.stage-estudos .win-timeline { left: 20.1%; top: 12.7%; width: 63.1%; }
.stage-estudos .win-video01  { left: 14%;   top: 37.8%; width: 29%; }
.stage-estudos .win-video02  { left: 50.1%; top: 3%;    width: 29%; }
.stage-estudos .win-image    { left: 89.3%; top: 0;     width: 10.7%; }
.stage-estudos .win-studios  { left: 90.5%; top: 53.2%; width: 8.3%; }

/* Segunda composição: espelhada */
.stage-estudos-alt .win-video01 { left: 21%; top: 3%; }
.stage-estudos-alt .win-video02 { left: 57%; top: 37.8%; }

.stage-estudos .vwin video {
  object-fit: contain;
}

@media (max-width: 640px), (orientation: portrait) and (max-width: 1024px) {
  .stage.stage-estudos {
    width: min(92vw, calc(520 * var(--u)));
    aspect-ratio: 100 / 190;
  }

  .stage.stage-estudos-alt {
    aspect-ratio: 100 / 165;
  }

  .stage-estudos + .stage-estudos {
    margin-top: calc(40 * var(--u));
  }

  .stage-estudos .win-video01  { left: 0;   top: 0;      width: 80%; }
  .stage-estudos .win-tools    { left: 0;   top: 39%;    width: 20%; }
  .stage-estudos .win-timeline { left: 8%;  top: 31.6%;  width: 92%; }
  .stage-estudos .win-video02  { left: 20%; top: 52.6%;  width: 80%; }
  .stage-estudos .win-image    { left: 2%;  top: 66%;    width: 19%; }
  .stage-estudos .win-studios  { left: 74%; top: 84%;    width: 19%; }

  .stage-estudos-alt .win-timeline { top: 36.4%; }
  .stage-estudos-alt .win-video02  { top: 60.5%; }
}