/* Controlador mobile independente da classe is-visible usada pelo bundle original. */
@media (max-width: 820px) {
  html.vip-mobile-motion-v1231 [data-vip-mobile-reveal="true"] {
    opacity: 0 !important;
    translate: none !important;
    transform: translate3d(0, 30px, 0) scale(.985) !important;
    transition:
      opacity .76s cubic-bezier(.2, .72, .2, 1) var(--vip-mobile-delay, 0ms),
      transform .76s cubic-bezier(.2, .72, .2, 1) var(--vip-mobile-delay, 0ms) !important;
    will-change: opacity, transform;
  }

  html.vip-mobile-motion-v1231 [data-vip-mobile-reveal="true"].vip-mobile-visible {
    opacity: 1 !important;
    translate: none !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  html.vip-mobile-motion-v1231 .v3-hero-photo[data-vip-mobile-reveal="true"] {
    transform: translate3d(0, 30px, 0) scale(.985) rotate(-3deg) !important;
  }

  html.vip-mobile-motion-v1231 .v3-hero-photo[data-vip-mobile-reveal="true"].vip-mobile-visible {
    transform: translate3d(0, 0, 0) scale(1) rotate(-3deg) !important;
  }

  /* Mantém a troca cinematográfica do hero ativa também em aparelhos
     configurados para reduzir movimento. A classe tem especificidade maior
     que a regra legada do HeroKitRotation-V10.css. */
  html.vip-mobile-motion-v1231 .v3-kit-rotation-stage.is-transitioning .v3-kit-rotation-layer.is-current {
    animation: v3-kit-current-out 1.08s cubic-bezier(.22, .72, .22, 1) both !important;
  }

  html.vip-mobile-motion-v1231 .v3-kit-rotation-stage.is-transitioning .v3-kit-rotation-layer.is-next {
    animation: v3-kit-next-reveal 1.08s cubic-bezier(.2, .78, .2, 1) both !important;
  }

  html.vip-mobile-motion-v1231 .v3-kit-rotation-stage.is-transitioning .v3-kit-rotation-glow {
    animation: v3-kit-glow 1.08s ease-out both !important;
  }

  html.vip-mobile-motion-v1231 .v3-kit-rotation-stage.is-transitioning .v3-kit-rotation-sweep {
    animation: v3-kit-light-sweep 1.08s cubic-bezier(.2, .7, .25, 1) both !important;
  }
}

@media (max-width: 720px) {
  .v3-hero-photo .v3-photo-tag {
    right: -20px;
    bottom: 18px !important;
    min-width: 132px;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 11px 14px;
    text-align: left;
  }

  .v3-hero-photo .v3-photo-tag strong {
    font-size: 15px;
    line-height: 1.05;
  }

  .v3-hero-photo .v3-photo-tag small {
    font-size: 9px;
    line-height: 1.2;
  }
}