#abertura { background: #000; }
#abertura-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#abertura .abertura-legenda, #abertura::after { display: none; }
#abertura #traco { display: block; z-index: 4; pointer-events: none; }
#abertura .pular, #abertura .som-alterna { color: #fff; text-shadow: 0 1px 5px #000; }
@media (max-width: 900px) {
  #abertura {
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #d3d5d7;
    background-image: linear-gradient(
      180deg,
      #dedede 0%,
      #d5d7d9 28%,
      #ced1d3 46%,
      #d9dcdf 66%,
      #e9ebed 100%
    );
  }
  /* O fundo prolonga a cena horizontal sem cortar o nome da marca. */
  #abertura-video {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 120%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    transform: translate(-50%, -50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #00000026 5%, #00000080 12%, #000000d9 20%, #000 28%, #000 72%, #000000d9 80%, #00000080 88%, #00000026 95%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #00000026 5%, #00000080 12%, #000000d9 20%, #000 28%, #000 72%, #000000d9 80%, #00000080 88%, #00000026 95%, transparent);
  }
  #abertura .abertura-controles {
    top: calc(env(safe-area-inset-top, 0px) + 1rem);
    left: max(1.25rem, env(safe-area-inset-left, 0px));
    right: max(1.25rem, env(safe-area-inset-right, 0px));
    justify-content: space-between;
    gap: .75rem;
    transform: none;
  }
  #abertura .pular, #abertura .som-alterna {
    min-height: 44px;
    color: #21192b;
    text-shadow: none;
    letter-spacing: .1em;
  }
  #abertura .som-rotulo { display: inline; }
  #abertura .entrar {
    top: calc(50% + 33.75vw + 1.25rem);
    bottom: auto;
    min-height: 48px;
  }
}
@media (max-width: 900px) and (min-aspect-ratio: 1 / 1) {
  #abertura-video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  #abertura .entrar {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
  }
}