/* Home only: real app capture fitted in a separate device frame. */
.life-phone {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 3.8% 2.1% 3.2%;
  border: 2px solid #747978;
  border-radius: 12% / 5.6%;
  background: linear-gradient(120deg, #555b59, #111514 22%, #252a28 80%, #686e6b);
  box-shadow: 0 22px 48px -16px #0009, inset 0 0 0 2px #141816;
  isolation: isolate;
}
.life-phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 860 / 1676; /* 11/11: print novo, do card "Seu dia em movimento" */
  object-fit: cover;
  border-radius: 9.5% / 4.4%;
  background: #12171a;
}
.life-phone::before {
  content: "";
  position: absolute;
  top: 1.2%;
  left: 44%;
  width: 12%;
  height: .45%;
  border-radius: 10px;
  background: #080b09;
}
.life-phone--footer { transform: rotate(-5deg); }
.life-phone--footer ~ .cta-image.background { display: none; }
@media (min-width: 992px) {
  .div-block-4:has(.life-phone--footer) {
    width: 22%;
    right: 12%;
    bottom: 5%;
  }
}
@media (max-width: 479px) {
  .life-phone { border-width: 1px; }
  .life-phone--footer { transform: rotate(-3deg); }
}

/* 12/11: navegação real em vídeo por cima do print (o print continua como base e como reserva). */
.life-phone-video {
  position: absolute;
  left: 2.1%; top: 0;
  margin: 3.8% 0 0; /* o mesmo recuo do print (porcentagem da largura) */
  width: calc(100% - 4.2%);
  height: auto;
  aspect-ratio: 860 / 1676;
  object-fit: cover;
  border-radius: 9.5% / 4.4%;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  background: #12171a;
}
.life-phone-video.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .life-phone-video { display: none; } }