/* ===== Animated amenities plan — "Vuelo de cámara" (chosen by Noelia 2026-10-13).
   Shared by the home (#amenities) and the kiosk (/presentacion). The camera flies to
   each numbered amenity, opens its label and moves on; after the 12th it pulls back
   to the whole plan and starts again. Tapping a number opens it and holds the tour.
   Behaviour in js/amenities-plan.js. Positions are % of the 2000x1414 render, numbered
   as in the brochure (2026-10-13 sheet). Colours fall back to the brand values where the
   page has no --color-* tokens (the kiosk). ===== */
.aplan {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 2000 / 1414;  /* the render's own proportion: never letterboxed */
  overflow: hidden;
  border-radius: 0; /* square corners, like the location map (Noelia, 2026-10-13) */
  background: rgba(0, 0, 0, .15);
  --aplan-mk: var(--color-verde-mar, #485956);
  --aplan-lb: var(--color-neutro-claro, #DBD5CD);
}
@supports not (aspect-ratio: 1 / 1) { .aplan { height: 0; padding-top: 70.7%; } }
.aplan-cam {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  transform-origin: 0 0;
  transition: transform 1.8s cubic-bezier(.65, 0, .25, 1);
}
.aplan-cam img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aplan-dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: rgba(20, 28, 26, 0); transition: background .8s ease; }
.aplan.is-focus .aplan-dim { background: rgba(20, 28, 26, .22); }

/* Numbered markers */
.aplan-mk {
  position: absolute; z-index: 2;
  width: clamp(1.25rem, 2.3vw, 2.1rem); height: clamp(1.25rem, 2.3vw, 2.1rem);
  transform: translate(-50%, -50%) scale(.4); opacity: 0;
  border: 0; border-radius: 4px; padding: 0; cursor: pointer;
  background: var(--aplan-mk); color: #fff;
  font-family: inherit; font-weight: 600; font-size: clamp(.58rem, 1.1vw, .82rem); line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, background .3s ease, color .3s ease;
}
.aplan-mk.is-in { opacity: 1; transform: translate(-50%, -50%) scale(var(--ms, 1)); }
.aplan-mk.is-on { background: var(--aplan-lb); color: var(--aplan-mk); z-index: 4; }
.aplan-mk.is-on::after { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; border-radius: 7px; border: 1.5px solid var(--aplan-lb); animation: aplan-ring 1.6s ease-out infinite; }
.aplan-mk:focus-visible { outline: 2px solid var(--aplan-lb); outline-offset: 3px; }
@keyframes aplan-ring { from { opacity: .9; transform: scale(.85); } to { opacity: 0; transform: scale(1.6); } }

/* Labels: open to the right of the marker (to the left near the right edge) */
.aplan-lb {
  position: absolute; z-index: 5; pointer-events: none;
  max-width: min(17em, 42%);
  text-align: left; white-space: normal;
  padding: .55em .8em; border-radius: 6px;
  background: var(--aplan-lb); color: var(--aplan-mk);
  font-family: inherit; font-weight: 600; font-size: clamp(.64rem, 1.2vw, .9rem); line-height: 1.25; letter-spacing: 0; text-transform: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transform: translateY(-50%) scale(var(--inv, 1)); transform-origin: left center;
  clip-path: inset(0 100% 0 0); opacity: 0;
  transition: clip-path .6s cubic-bezier(.65, 0, .25, 1), opacity .3s ease;
}
.aplan-lb.is-left { transform-origin: right center; clip-path: inset(0 0 0 100%); }
.aplan-lb.is-on { clip-path: inset(0 0 0 0); opacity: 1; }
.aplan-lb b { display: block; font-size: .78em; letter-spacing: .14em; margin-bottom: 2px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .aplan-cam, .aplan-mk, .aplan-lb, .aplan-dim { transition: none !important; }
  .aplan-mk.is-on::after { animation: none; }
}