/* ============================================================
   Galeria em slide — ficha da embarcação
   Reaproveita os tokens de css/style.css.
   ============================================================ */

.slider{ position:relative; margin-top:1.2rem; border-radius:4px; overflow:hidden; background:#000; outline:none; }
.slider-track{
  display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); will-change:transform;
}
.slider-slide{
  flex:0 0 100%; aspect-ratio:16/9; cursor:zoom-in;
}
.slider-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(11,27,38,.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; transition:background .2s ease, border-color .2s ease;
}
.slider-arrow:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); }
.slider-arrow svg{ width:20px; height:20px; }
.slider-arrow.prev{ left:1rem; }
.slider-arrow.next{ right:1rem; }

.slider-counter{
  position:absolute; top:1rem; right:1rem; z-index:2;
  padding:.4em 1em; border-radius:20px; font-size:.72rem; letter-spacing:.04em; font-weight:600;
  color:#fff; background:rgba(11,27,38,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

.slider-dots{
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; gap:.5rem; padding:.5em .8em; border-radius:20px;
  background:rgba(11,27,38,.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.slider-dot{
  width:7px; height:7px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.4); transition:background .2s ease, transform .2s ease;
}
.slider-dot.is-active{ background:#fff; transform:scale(1.3); }

@media (max-width:640px){
  .slider-slide{ aspect-ratio:4/5; background:#000; }
  .slider-slide img{ object-fit:contain; }
  .slider-arrow{ width:36px; height:36px; }
  .slider-dots{ gap:.4rem; }
}

/* ---------- lightbox ---------- */
html.gallery-locked{ overflow:hidden; }

.gallery-lightbox{
  position:fixed; inset:0; z-index:600;
  background:rgba(4,9,13,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.gallery-lightbox.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .35s ease, visibility 0s linear 0s;
}
.gallery-lb-stage{ max-width:92vw; max-height:88vh; }
.gallery-lb-img{ max-width:92vw; max-height:88vh; width:auto; height:auto; display:block; border-radius:2px; }

.gallery-lb-btn{
  position:absolute; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#fff; transition:background .2s ease, border-color .2s ease;
}
.gallery-lb-btn:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45); }
.gallery-lb-close{ top:clamp(1.2rem,3vw,2rem); right:clamp(1.2rem,3vw,2rem); width:42px; height:42px; }
.gallery-lb-close svg{ width:18px; height:18px; }
.gallery-lb-arrow{ top:50%; transform:translateY(-50%); width:48px; height:48px; }
.gallery-lb-arrow svg{ width:22px; height:22px; }
.gallery-lb-arrow.prev{ left:clamp(1rem,3vw,2rem); }
.gallery-lb-arrow.next{ right:clamp(1rem,3vw,2rem); }
.gallery-lb-counter{
  position:absolute; bottom:clamp(1.2rem,3vw,2rem); left:50%; transform:translateX(-50%);
  padding:.5em 1.2em; border-radius:20px; font-size:.78rem; font-weight:600; letter-spacing:.04em;
  color:#fff; background:rgba(255,255,255,.08); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
}

@media (max-width:640px){
  .gallery-lb-arrow{ width:40px; height:40px; }
  .gallery-lb-close{ width:38px; height:38px; }
}