/* Demostración del hero · fase ChatGPT: foco sobre la respuesta, anillos en las tres anotaciones,
   clic en la anotación rosa y tarjeta de la observación (con profundidad). */
.spot {
  position: absolute;
  left: 9.5%;
  top: 46%;
  width: 51%;
  height: 27%;
  border-radius: 14px;
  border: 2px solid #6f95ff;
  box-shadow: 0 0 28px rgba(111, 149, 255, 0.55);
  opacity: 0;
  animation: spot var(--loop) infinite;
}

.ping { position: absolute; width: 3.2%; aspect-ratio: 1; margin: -1.6% 0 0 -1.6%; opacity: 0; animation: pingshow var(--loop) infinite; }
.ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); animation: ring 1.5s ease-out infinite; }
.ping--pink   { --c: #e0568a; left: 77.7%; top: 53.2%; }
.ping--yellow { --c: #f1b72c; left: 90%; top: 52%; }
.ping--blue   { --c: #3b8fc4; left: 93%; top: 52%; }
.ping--yellow::after { animation-delay: 0.25s; }
.ping--blue::after { animation-delay: 0.5s; }

.cursor {
  position: absolute;
  left: 86%;
  top: 60%;
  width: 1.9%;
  aspect-ratio: 12 / 19;
  margin: -0.4% 0 0 -0.3%;
  opacity: 0;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
  animation: cursor var(--loop) infinite;
}
.cursor svg { display: block; width: 100%; height: 100%; }
.click {
  position: absolute;
  left: 77.7%;
  top: 53.2%;
  width: 3.6%;
  aspect-ratio: 1;
  margin: -1.8% 0 0 -1.8%;
  border-radius: 50%;
  background: rgba(224, 86, 138, 0.35);
  border: 2px solid #e0568a;
  opacity: 0;
  animation: click var(--loop) infinite;
}

/* Tarjeta de la observación: sobresale del marco, con sombra y relieve */
.popup {
  position: absolute;
  right: 2%;
  bottom: -24%;
  width: 36%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 50px -12px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: translate3d(0, 40px, 70px) scale(0.9);
  animation: popup var(--loop) infinite;
}
.popup img { display: block; width: 100%; height: auto; }