/* ===== Spa Gratitud · Slider "Vea nuestros espacios" ===== */
:root{
  --sage-deep:#8FAD7C; --sage-mid:#B7BF83; --sage-light:#D6DBB0;
  --cream:#F1EBDF; --cream-pale:#EDEECF; --cream-warm:#E6D7C4;
  --espresso:#54341A; --slate:#55534E; --gold:#C9A227; --gold-light:#E8C766;
  --ink:#3A392F; --max:1120px;
}

/* ---------- SECCIÓN GALERÍA ---------- */
.espacios{background:var(--cream-pale); padding:84px 0;}
.espacios .section-head{text-align:center;}
.espacios .section-head h2{color:var(--espresso);}
.espacios .section-head p{color:var(--slate);}
.esp-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  max-width:980px; margin:38px auto 0;
}
.esp-thumb{
  position:relative; aspect-ratio:3/4; border:0; padding:0; border-radius:16px;
  overflow:hidden; cursor:pointer; background:var(--cream-warm);
  box-shadow:0 12px 26px -18px rgba(84,52,26,.4);
}
.esp-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .55s ease;}
.esp-thumb:hover img, .esp-thumb:focus-visible img{transform:scale(1.06);}
.esp-thumb .ov{position:absolute; inset:0; background:linear-gradient(to top, rgba(84,52,26,.6), transparent 58%);}
.esp-thumb .cap{
  position:absolute; left:12px; bottom:10px; right:12px;
  color:var(--cream); font-family:'Fraunces',serif; font-size:.92rem; line-height:1.2;
}
.esp-cta{text-align:center; margin-top:36px;}

/* ---------- MODAL SLIDER ---------- */
.esp-modal{
  position:fixed; inset:0; z-index:10000; display:none;
  align-items:center; justify-content:center; padding:18px;
}
.esp-modal.open{display:flex;}
.esp-backdrop{position:absolute; inset:0; background:rgba(26,16,7,.93); backdrop-filter:blur(5px);}
.esp-dialog{
  position:relative; z-index:1; width:min(960px,96vw);
  height:min(92vh,980px); display:flex; flex-direction:column; gap:14px;
}
.esp-close{
  position:absolute; top:8px; right:8px; z-index:6; width:46px; height:46px;
  border-radius:50%; border:0; background:rgba(241,235,223,.16); color:var(--cream);
  font-size:1.7rem; line-height:1; cursor:pointer; transition:background .2s;
}
.esp-close:hover{background:rgba(241,235,223,.32);}
.esp-stage{
  position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:18px; background:#160d05;
}
.esp-track{position:relative; width:100%; height:100%;}
.esp-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease; display:flex; flex-direction:column; align-items:center; padding:6px; gap:16px;}
.esp-slide.active{opacity:1; visibility:visible;}
.esp-slide img{flex:1 1 0; min-height:0; width:100%; height:100%; object-fit:contain; display:block; border-radius:12px;}
.esp-cap{
  flex:0 0 auto; text-align:center; color:var(--cream);
  font-family:'Fraunces',serif; font-size:1.12rem; line-height:1.25; padding:0 12px;
}
.esp-cap small{display:block; margin-top:3px; font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.05em; color:#cabfae; text-transform:uppercase;}
.esp-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:48px; height:48px; border-radius:50%; border:0;
  background:rgba(241,235,223,.16); color:var(--cream); font-size:1.9rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.esp-nav:hover{background:rgba(241,235,223,.34);}
.esp-nav.prev{left:12px;}
.esp-nav.next{right:12px;}
.esp-footer{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 4px;}
.esp-dots{display:flex; gap:8px; flex-wrap:wrap;}
.esp-dot{width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(241,235,223,.35); cursor:pointer; transition:all .25s;}
.esp-dot.active{background:var(--gold-light); width:24px; border-radius:5px;}
.esp-counter{font-size:.85rem; font-weight:700; color:#cabfae; font-family:'Manrope',sans-serif;}

@media (max-width:900px){ .esp-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:620px){
  .espacios{padding:64px 0;}
  .esp-grid{grid-template-columns:repeat(2,1fr); gap:10px; margin-top:28px;}
  .esp-dialog{width:96vw; height:88vh;}
  .esp-nav{width:42px; height:42px; font-size:1.6rem;}
  .esp-nav.prev{left:6px;} .esp-nav.next{right:6px;}
  .esp-cap{font-size:1rem; padding:18px 16px 14px;}
}