/* plusreal-page.css — the gallery carousel on plusreal.html / plusreal_es.html.
   Pure CSS scroll-snap (native touch swipe), enhanced by plusreal-page.js for
   arrows, dots and keyboard. No carousel library. With JS off it degrades to a
   horizontally swipeable strip. */
.pr-carousel { position: relative; max-width: 960px; margin: 0 auto; }
.pr-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 14px; gap: 0;
}
.pr-track::-webkit-scrollbar { display: none; }
.pr-slide { flex: 0 0 100%; scroll-snap-align: center; display: block; }
.pr-slide img { display: block; width: 100%; height: auto; border-radius: 14px; }

.pr-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(15, 13, 20, .55); color: #fff; font: 400 28px/1 system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.pr-nav:hover { background: rgba(15, 13, 20, .8); }
.pr-nav:focus-visible { outline: 3px solid #ee076e; outline-offset: 2px; }
.pr-nav[disabled] { opacity: 0; pointer-events: none; }
.pr-prev { left: 10px; } .pr-next { right: 10px; }

.pr-dots { display: flex; gap: 9px; justify-content: center; margin-top: 18px; }
.pr-dot {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: #c7c7cf; cursor: pointer; transition: width .2s, background .2s;
}
.pr-dot[aria-current="true"] {
  width: 28px; border-radius: 5px;
  background: linear-gradient(101deg, #f81f01 0%, #ee076e 100%);
}
.pr-dot:focus-visible { outline: 3px solid #ee076e; outline-offset: 2px; }

@media (max-width: 600px) { .pr-nav { width: 40px; height: 40px; font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .pr-track { scroll-behavior: auto; } }