/* Movimiento editorial: fotos con profundidad y entradas vinculadas al scroll.
   Solo transformaciones/opacity: no se anima el tamaño ni la posición del layout. */
html.lenis { scroll-behavior: auto; }
html[data-rp-motion="editorial"] [data-rp-depth] { --rp-depth-space: 48px; }

html[data-rp-motion="editorial"] [data-rp-depth-layer] {
  top: calc(-1 * var(--rp-depth-space));
  bottom: auto;
  height: calc(100% + var(--rp-depth-space) * 2);
  transform: translate3d(0, var(--rp-shift-y, 0px), 0) scale(var(--rp-depth-scale, 1));
}
html[data-rp-motion="editorial"] [data-rp-depth].rp-depth-visible [data-rp-depth-layer] {
  will-change: transform;
}

/* Comparación: conservar exactamente el desplazamiento suave, sin efectos. */
html.rp-js[data-rp-motion="parallax"] .rp-reveal {
  opacity: 1; transform: none; translate: none; transition: none;
  will-change: auto;
}

/* Respaldo para navegadores sin timelines: usa el observador ya existente. */
html.rp-js[data-rp-motion="editorial"] .rp-reveal {
  --rp-enter-distance: 36px;
  opacity: .12; translate: 0 var(--rp-enter-distance);
  transition: opacity .7s ease-out, translate .7s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
  transition-delay: 0s; will-change: auto;
}
html.rp-js[data-rp-motion="editorial"] .rp-reveal:not(.rp-srv-card),
html.rp-js[data-rp-motion="editorial"] .rp-srv-card:not(:hover):not(:active) { transform: none; }
html.rp-js[data-rp-motion="editorial"] .rp-reveal.is-visible { opacity: 1; translate: 0 0; }
html.rp-js[data-rp-motion="editorial"] .rp-srv-card:hover { transform: translateY(-7px); }
html.rp-js[data-rp-motion="editorial"] .rp-srv-card:active { transform: translateY(-2px) scale(.995); }

@supports (animation-timeline: view()) and (view-timeline-name: --rp-photo) {
  /* Recortar sin crear un scrollport intermedio que inmovilice los timelines. */
  html[data-rp-motion="editorial"] .rp { overflow-x: clip; }
  html[data-rp-motion="editorial"] .rp-respiro { overflow: clip; }
  html[data-rp-motion="editorial"] [data-rp-depth] { view-timeline: --rp-photo block; }
  html[data-rp-motion="editorial"] [data-rp-depth-layer] {
    animation: rp-photo-drift 1s linear both;
    animation-timeline: --rp-photo;
    animation-range: cover 0% cover 100%;
  }
  html.rp-js[data-rp-motion="editorial"] .rp-reveal {
    animation: rp-scroll-enter 1s linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
    transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
  }
  /* Un pequeño desfase de recorrido, no temporizadores ni rebotes. */
  html.rp-js[data-rp-motion="editorial"] .rp-srv-card.rp-d2 { animation-range-end: cover 38%; }
  html.rp-js[data-rp-motion="editorial"] .rp-srv-card.rp-d3 { animation-range-end: cover 41%; }
}
@keyframes rp-photo-drift {
  from { transform: translate3d(0, calc(-1 * var(--rp-depth-space)), 0) scale(1.065); }
  to { transform: translate3d(0, var(--rp-depth-space), 0) scale(1); }
}
@keyframes rp-scroll-enter {
  from { opacity: .12; translate: 0 var(--rp-enter-distance); }
  to { opacity: 1; translate: 0 0; }
}
/* Un enlace o campo enfocado siempre queda plenamente visible y estable. */
html.rp-js[data-rp-motion="editorial"] .rp-reveal:focus-within {
  animation: none !important; opacity: 1 !important; translate: none !important;
}

/* Postales del mapa: cada foto tiene su propio recorrido. La geometría del
   figure queda fija; solo se anima su superficie para evitar saltos de layout. */
.rp-postcard { position: absolute; inset: 0; border-radius: inherit; }
#un-respiro { scroll-margin-top: 80px; }
html[data-rp-motion="editorial"] .rp-respiro { padding-bottom: clamp(80px,7vw,100px); }
html.rp-js[data-rp-motion="editorial"] .rp-respiro-campo.rp-reveal {
  animation: none; opacity: 1; translate: none; transform: none; transition: none;
}
html[data-rp-motion="editorial"] [data-rp-postcard] {
  --rp-card-in-x: -76px; --rp-card-in-y: 98px; --rp-card-in-turn: -9deg;
  --rp-card-out-x: 12px; --rp-card-out-y: -40px; --rp-card-out-turn: 2deg;
  --rp-card-start-scale: .86;
  box-shadow: none;
}
html[data-rp-motion="editorial"] [data-rp-postcard]:nth-child(2) {
  --rp-card-in-x: 82px; --rp-card-in-y: 122px; --rp-card-in-turn: 10deg;
  --rp-card-out-x: -14px; --rp-card-out-y: -58px; --rp-card-out-turn: -2deg;
}
html[data-rp-motion="editorial"] [data-rp-postcard]:nth-child(3) {
  --rp-card-in-x: -48px; --rp-card-in-y: 76px; --rp-card-in-turn: -7deg;
  --rp-card-out-x: 8px; --rp-card-out-y: -28px; --rp-card-out-turn: 1deg;
}
html[data-rp-motion="editorial"] [data-rp-postcard]:nth-child(4) {
  --rp-card-in-x: 54px; --rp-card-in-y: 105px; --rp-card-in-turn: 8deg;
  --rp-card-out-x: -10px; --rp-card-out-y: -46px; --rp-card-out-turn: -1deg;
}
html[data-rp-motion="editorial"] [data-rp-postcard]:nth-child(5) {
  --rp-card-in-x: 8px; --rp-card-in-y: 132px; --rp-card-in-turn: -6deg;
  --rp-card-out-x: 0px; --rp-card-out-y: -66px; --rp-card-out-turn: 3deg;
}
html[data-rp-motion="editorial"] .rp-postcard {
  transform-origin: 50% 12%;
  box-shadow: 0 18px 44px rgba(24,33,26,.22);
  transition: scale .3s cubic-bezier(.22,.61,.36,1);
}
/* La foto del balneario se cruza por delante: mantener legible este título. */
html[data-rp-motion="editorial"] [data-rp-postcard]:nth-child(2) figcaption { top: 12px; bottom: auto; }
@supports (animation-timeline: view()) and (view-timeline-name: --rp-photo) {
  html[data-rp-motion="editorial"] [data-rp-postcard] { view-timeline: --rp-postcard block; }
  html[data-rp-motion="editorial"] .rp-postcard {
    animation: rp-postcard-place 1s linear both;
    animation-timeline: --rp-postcard;
    animation-range: cover 0% cover 100%;
  }
  html[data-rp-motion="editorial"] .rp-postcard .rp-pin {
    animation: rp-pin-place 1s linear both;
    animation-timeline: --rp-postcard;
    animation-range: cover 0% cover 100%;
  }
}
@keyframes rp-postcard-place {
  0% {
    transform: translate3d(var(--rp-card-in-x), var(--rp-card-in-y), 0) rotate(var(--rp-card-in-turn)) scale(var(--rp-card-start-scale));
    opacity: .25;
  }
  38% { opacity: 1; }
  55% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  100% {
    transform: translate3d(var(--rp-card-out-x), var(--rp-card-out-y), 0) rotate(var(--rp-card-out-turn)) scale(1.025);
    opacity: 1;
  }
}
@keyframes rp-pin-place {
  0%, 16% { transform: translateY(-18px) scale(1.35); opacity: 0; }
  48%, 100% { transform: translateY(0) scale(1); opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  html[data-rp-motion="editorial"] [data-rp-postcard]:hover { z-index: 6; }
  html[data-rp-motion="editorial"] [data-rp-postcard]:hover .rp-postcard { scale: 1.045; }
}
@media (max-width: 700px), (pointer: coarse) {
  html[data-rp-motion="editorial"] [data-rp-postcard]:nth-child(n) {
    --rp-card-in-x: -10px; --rp-card-in-y: 38px; --rp-card-in-turn: -4deg;
    --rp-card-out-x: 0px; --rp-card-out-y: -12px; --rp-card-out-turn: 1deg;
    --rp-card-start-scale: .95;
  }
  html[data-rp-motion="editorial"] [data-rp-postcard]:nth-child(even) {
    --rp-card-in-x: 10px; --rp-card-in-y: 48px; --rp-card-in-turn: 4deg;
    --rp-card-out-y: -18px; --rp-card-out-turn: -1deg;
  }
}
@media (max-width: 640px) {
  /* Cada superficie absoluta sigue dentro de su propia casilla del mosaico. */
  .rp-respiro-campo [data-rp-postcard]:nth-child(n) { position: relative; inset: auto; width: auto; }
  .rp-respiro-campo [data-rp-postcard]:nth-child(5) { width: 70%; }
}

/* Comparador de revisión; JS solo lo crea en localhost. */
.rp-motion-preview {
  position: fixed; left: 16px; bottom: 16px; z-index: 45;
  max-width: calc(100vw - 100px); color: #24211b; background: #fbf8f1;
  border: 1px solid #d9d0c2; border-radius: 14px;
  box-shadow: 0 4px 20px #18211a1f;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.rp-motion-preview summary { padding: 11px 14px; cursor: pointer; font-weight: 600; }
.rp-motion-options { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px 10px; }
.rp-motion-options button {
  min-height: 44px; padding: 8px 11px; border: 1px solid #d9d0c2;
  border-radius: 9px; color: #3c5a43; background: transparent;
  cursor: pointer; font: inherit;
}
.rp-motion-options button[aria-pressed="true"] { background: #3c5a43; color: #fff; border-color: #3c5a43; }
.rp-motion-preview :focus-visible { outline: 2px solid #3c5a43; outline-offset: 3px; }
.rp-motion-note { max-width: 285px; margin: 0; padding: 0 14px 12px; color: #6e665a; }
.rp-motion-note[hidden] { display: none; }
.rp-motion-try {
  display: block; min-height: 44px; margin: 0 14px 12px; padding: 8px 12px;
  border: 1px solid #3c5a43; border-radius: 9px; color: #3c5a43;
  background: transparent; font: inherit; cursor: pointer;
}
.rp-motion-try[hidden] { display: none; }

@media (max-width: 700px), (pointer: coarse) {
  html[data-rp-motion="editorial"] [data-rp-depth] { --rp-depth-space: 20px; }
  html.rp-js[data-rp-motion="editorial"] .rp-reveal { --rp-enter-distance: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-rp-motion]:not([data-rp-motion-preview-override="true"]) .rp-postcard,
  html[data-rp-motion]:not([data-rp-motion-preview-override="true"]) .rp-postcard .rp-pin {
    animation: none !important; transform: none !important; scale: none !important;
    opacity: 1 !important; transition: none !important;
  }
  html[data-rp-motion]:not([data-rp-motion-preview-override="true"]) [data-rp-depth-layer] {
    top: 0; bottom: 0; height: 100%; transform: none !important; animation: none !important; will-change: auto !important;
  }
  html.rp-js[data-rp-motion]:not([data-rp-motion-preview-override="true"]) .rp-reveal {
    opacity: 1 !important; transform: none !important; translate: none !important; animation: none !important;
    transition: none !important; will-change: auto !important;
  }
  html[data-rp-motion] .rp-hero-slide { transition: none; }
}
@media print { .rp-motion-preview { display: none; } }