/* Hero refinement: produto principal inteiro, sem recorte oval. */
.stage {
  isolation: isolate;
  overflow: hidden;
}

.stage::before {
  content: "";
  position: absolute;
  inset: 8% 7% 9% 8%;
  border: 1px solid rgba(155, 205, 226, .2);
  border-radius: 48% 48% 18% 18% / 26% 26% 12% 12%;
  background: radial-gradient(circle at 56% 35%, rgba(24, 122, 162, .32), transparent 47%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .18);
  transform: perspective(900px) rotateY(-4deg);
  z-index: -1;
}

.stage .clay {
  left: 36%;
  top: 9%;
  width: 292px;
  height: 520px;
  padding: 10px;
  border-radius: 28px;
  overflow: visible;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(15,54,74,.42));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 38px 65px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.22);
  transform: perspective(950px) rotateY(-6deg) translateZ(30px);
  z-index: 7;
}

.stage .clay::before {
  content: "";
  position: absolute;
  inset: 23px -18px -22px 30px;
  border-radius: 30px;
  border: 1px solid rgba(255, 81, 98, .3);
  transform: translateZ(-20px);
  z-index: -1;
}

.stage .clay img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 20px;
  clip-path: none;
  filter: saturate(.98) contrast(1.03);
}

.stage .clay > span {
  position: absolute;
  left: 24px;
  top: 25px;
  padding: 8px 11px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 30, 47, .78);
  backdrop-filter: blur(7px);
  font: 700 10px/1 var(--sans);
  letter-spacing: .13em;
  z-index: 2;
}

.stage .clay > b {
  position: absolute;
  right: -50px;
  bottom: 36px;
  padding: 14px 18px;
  color: #fff;
  background: #ff5262;
  border-radius: 14px;
  box-shadow: 0 16px 28px rgba(0,0,0,.28);
  font: 800 11px/1.18 var(--sans);
  letter-spacing: .11em;
  text-align: left;
  transform: rotate(3deg);
}

.stage .book { width: 158px; height: 270px; }
.stage .book-red { left: 12%; top: 17%; transform: rotate(-8deg) translateZ(-20px); z-index: 2; }
.stage .book-blue { right: 2%; top: 18%; transform: rotate(7deg) translateZ(-25px); z-index: 2; }
.stage .book-light { right: 13%; bottom: -5%; transform: rotate(5deg); z-index: 4; }
.stage .float-tag.tag-two { right: 5%; top: 7%; }
.stage .float-tag.tag-one { left: 8%; bottom: 8%; }

@media (max-width: 1100px) {
  .stage .clay { left: 31%; width: 270px; height: 480px; }
  .stage .book-blue { right: -3%; }
}

@media (max-width: 760px) {
  .stage { min-height: 570px; }
  .stage::before { inset: 7% 3% 8%; }
  .stage .clay { left: 50%; top: 8%; width: min(66vw, 280px); height: 455px; transform: translateX(-50%) perspective(950px) rotateY(-4deg); }
  .stage .clay > b { right: -20px; bottom: 26px; }
  .stage .book { width: 118px; height: 210px; opacity: .78; }
  .stage .book-red { left: -1%; top: 24%; }
  .stage .book-blue { right: -2%; top: 28%; }
  .stage .book-light { right: 2%; bottom: -2%; }
  .stage .float-tag { display: none; }
}