*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#11110f;--panel:#1c1b18;--gold:#c5a46d;--text:#f4efe6;--muted:#aaa397}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,sans-serif}
a{color:inherit;text-decoration:none}
header{padding:22px 4%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #39352d}
.logo{font-size:22px;font-weight:700;letter-spacing:2px;color:var(--gold)}
nav{display:flex;gap:24px;flex-wrap:wrap}
nav a:hover,.gold{color:var(--gold)}
.hero{text-align:center;padding:65px 20px 45px}
.hero h1{font-size:clamp(30px,5vw,54px);margin:12px 0;color:var(--gold)}
.hero p,.intro{color:var(--muted);line-height:1.7}
.section{padding:35px 4%;max-width:1800px;margin:auto}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}
.section-head h2{font-size:28px;margin:0;color:var(--gold)}
.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.card{min-width:0;background:var(--panel);border:1px solid #39352d;border-radius:10px;overflow:hidden;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--gold)}
.card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#292720}
.card h3{font-size:15px;padding:0 12px;margin:13px 0 15px}
.vitrin .section-head h2{color:#c5a46d}
.vip .section-head h2{color:#d5b8e8}
.mega .section-head h2{color:#8ec5c2}
.detail{max-width:1100px;margin:50px auto;padding:25px}
.detail img{width:100%;max-height:650px;object-fit:cover;border-radius:12px}
footer{text-align:center;padding:35px 15px;color:var(--muted);border-top:1px solid #39352d}
@media(max-width:1100px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){header{align-items:flex-start;gap:15px;flex-direction:column}nav{gap:14px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.section{padding:25px 14px}.section-head h2{font-size:23px}}
.detail-gallery{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin:20px 0}
.detail-main-image{width:100%;height:300px;object-fit:cover;border-radius:9px}
.detail-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.detail-thumbs img{width:100%;height:145px;object-fit:cover;border-radius:8px}
.detail-info{background:var(--panel);padding:22px;border:1px solid #39352d;border-radius:10px;margin:20px 0}
.detail-contact{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.detail-contact a{padding:12px 20px;border:1px solid var(--gold);border-radius:7px;color:var(--gold)}
.detail-stats{display:flex;gap:25px;flex-wrap:wrap;color:var(--muted);margin-top:20px}
@media(max-width:700px){.detail-gallery{grid-template-columns:1fr}.detail-main-image{height:230px}.detail-thumbs img{height:105px}}

.card{display:block;color:inherit;text-decoration:none;}

/* DETAIL PAGE - GALLERY */
.detail{
  max-width:1240px;
  margin:35px auto;
  padding:28px;
}
.detail h1{
  color:var(--gold);
  font-size:clamp(27px,4vw,42px);
  margin:18px 0 24px;
}
.detail-gallery{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(260px,1fr);
  gap:12px;
  margin:25px 0 32px;
  align-items:stretch;
}
.detail-main-image{
  display:block;
  width:100%;
  height:100%;
  min-height:420px;
  max-height:520px;
  aspect-ratio:16/10;
  object-fit:cover;
  background:#292720;
  border:1px solid #39352d;
  border-radius:12px;
}
.detail-thumbs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:12px;
}
.detail-thumbs img{
  display:block;
  width:100%;
  height:100%;
  min-height:150px;
  object-fit:cover;
  background:#292720;
  border:1px solid #39352d;
  border-radius:10px;
}
.detail-info{
  padding:26px;
  margin:22px 0;
  background:linear-gradient(145deg,#201e19,#171613);
  border:1px solid #39352d;
  border-radius:12px;
}
.detail-info h2{
  color:var(--gold);
  margin:0 0 18px;
  font-size:21px;
}
.detail-info .intro{
  font-size:15px;
}
@media(max-width:800px){
  .detail{margin:18px auto;padding:18px}
  .detail-gallery{grid-template-columns:1fr}
  .detail-main-image{min-height:260px;height:auto;aspect-ratio:16/10}
  .detail-thumbs img{min-height:110px;aspect-ratio:4/3}
}
@media(max-width:480px){
  .detail{padding:12px}
  .detail-thumbs{gap:8px}
  .detail-thumbs img{min-height:90px}
  .detail-info{padding:18px}
}

/* COMPACT HERO SLIDER */
.hero-slider{
  position:relative;
  height:230px;
  margin:24px 4% 10px;
  overflow:hidden;
  border:1px solid #51432d;
  border-radius:12px;
  background:#191713;
}
.hero-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:25px 7%;
  opacity:0;
  visibility:hidden;
  transition:opacity .6s ease;
  background:linear-gradient(90deg,rgba(12,11,9,.96),rgba(12,11,9,.58),rgba(12,11,9,.2));
}
.hero-slide.active{opacity:1;visibility:visible}
.hero-slide:nth-child(1){background:linear-gradient(90deg,rgba(12,11,9,.95),rgba(12,11,9,.45)),url('/assets/images/slider-spa-1.jpg') center/cover}
.hero-slide:nth-child(2){background:linear-gradient(90deg,rgba(12,11,9,.95),rgba(12,11,9,.45)),url('/assets/images/slider-spa-2.jpg') center/cover}
.hero-slide:nth-child(3){background:linear-gradient(90deg,rgba(12,11,9,.95),rgba(12,11,9,.45)),url('/assets/images/slider-spa-3.jpg') center/cover}
.hero-copy{max-width:650px}
.hero-copy span{color:var(--gold);font-size:12px;letter-spacing:2px}
.hero-copy h1{font-size:clamp(22px,3vw,34px);color:#fff;margin:10px 0}
.hero-copy p{color:#ddd;margin:0 0 15px}
.hero-copy a{display:inline-block;padding:9px 17px;border:1px solid var(--gold);border-radius:5px;color:var(--gold)}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:#111b;color:var(--gold);border:1px solid #8b7047;border-radius:50%;width:36px;height:36px;font-size:25px;cursor:pointer}
.hero-arrow.prev{left:12px}
.hero-arrow.next{right:12px}
.hero-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.hero-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#aaa;cursor:pointer}
.hero-dots button.active{background:var(--gold);width:22px;border-radius:5px}
@media(max-width:700px){
  .hero-slider{height:175px;margin:15px 14px 5px}
  .hero-slide{padding:18px 40px}
  .hero-copy h1{font-size:21px}
  .hero-copy p{font-size:13px}
}