/* The garden's visitors on the paintings: small, resting on their spot, a thumb-sized target even when tiny. */
.visitante { z-index: 1; display: flex; align-items: flex-end; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none;
  touch-action: manipulation; cursor: pointer; }
.visitante.ancorado { transform: translate(-50%, -100%); }
.visitante-corpo { display: block; width: 100%; transform-origin: 50% 100%; }
.visitante img { display: block; width: 100%; height: auto !important; transform-origin: 50% 90%; filter: drop-shadow(0 2px 2px rgb(92 60 38 / .28)); }
.visitante:focus-visible { outline: 2px dotted var(--hibisco); outline-offset: 2px; border-radius: 8px; }
/* in the air: no contact shadow on the ground, a softer one under them */
.visitante[data-visitante="beija-flor"] img, .visitante[data-visitante="abelha"] img, .visitante[data-visitante="libelula"] img { filter: drop-shadow(0 8px 4px rgb(92 60 38 / .14)); }
/* on the ground or a ledge: a soft contact shadow under the feet, like every painted thing on that counter */
.visitante:not(.no-ar)::before { content: ''; position: absolute; z-index: -1; left: 15%; right: 15%; bottom: -2px; height: 9%; min-height: 4px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(107 79 79 / .3), rgb(107 79 79 / 0)); pointer-events: none; }
/* its name for a moment after a tap */
.visitante-nome { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: rgb(255 252 244 / .92); color: var(--hibisco); font: 500 17px/1.2 var(--f-mao); box-shadow: 0 2px 6px rgb(122 90 67 / .2); pointer-events: none;
  animation: nome-sobe 1600ms ease-out both; }
@keyframes nome-sobe { 0% { opacity: 0; translate: 0 6px; } 15%, 75% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .visitante-nome { animation: nome-fade 1600ms both !important; } @keyframes nome-fade { 0%, 100% { opacity: 0; } 15%, 75% { opacity: 1; } } }