/* Reserva — hereda el sistema de styles.css (papel, latón, oliva, arcos) */

.bk__wrap{ padding-block:clamp(30px,5vw,62px) clamp(60px,8vw,110px) }
.bk__back{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
}
.bk__back:hover{ color:var(--brass) }

.bk__title{
  text-align:center; font-size:clamp(2.6rem,6.4vw,4.4rem);
  margin:10px 0 clamp(26px,4vw,44px); line-height:1;
}

/* pasos */
.bk__steps{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(10px,2.6vw,38px);
  list-style:none; margin:0 0 clamp(28px,4vw,48px); padding:0;
}
.bk__steps li{
  display:flex; align-items:center; gap:9px;
  font-size:.64rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-faint); transition:color .4s var(--ease);
}
.bk__steps span{
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(44,37,32,.18); font-size:.66rem;
  font-variant-numeric:tabular-nums;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.bk__steps li.is-on{ color:var(--ink) }
.bk__steps li.is-on span{ background:var(--brass); border-color:var(--brass); color:#FFF8EC }
.bk__steps li.is-done span{ border-color:var(--brass); color:var(--brass) }

.bk__panel{ animation:bkin .5s var(--ease) both }
@keyframes bkin{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.bk__lead{ text-align:center; color:var(--ink-soft); max-width:56ch; margin:0 auto 26px }
.bk__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.bk__note{ text-align:center; color:var(--ink-faint); font-size:.82rem; margin:18px 0 0 }
.bk__err{
  color:#96402F; background:rgba(150,64,47,.08); border:1px solid rgba(150,64,47,.22);
  border-radius:10px; padding:10px 14px; font-size:.86rem; margin:4px 0 0;
}

/* servicios */
.bk__services{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(12px,1.8vw,18px);
}
.bk__svc{
  text-align:left; cursor:pointer; position:relative;
  background:rgba(255,255,255,.5); border:1px solid rgba(44,37,32,.12);
  border-radius:16px; padding:20px 22px;
  font-family:var(--sans); color:var(--ink);
  transition:border-color .32s var(--ease), transform .32s var(--ease), box-shadow .32s var(--ease);
}
.bk__svc:hover{ border-color:var(--brass); transform:translateY(-2px); box-shadow:0 18px 34px -24px rgba(44,37,32,.5) }
.bk__svc[aria-pressed="true"]{ border-color:var(--brass); background:rgba(215,179,122,.16) }
.bk__svc b{ display:block; font-weight:400; font-size:1.1rem; line-height:1.3 }
.bk__svc .price{
  display:flex; align-items:baseline; gap:10px; margin-top:10px;
  font-variant-numeric:tabular-nums;
}
.bk__svc .price i{ font-style:normal; font-size:1.32rem; color:var(--brass) }
.bk__svc .price s{ text-decoration:none; color:var(--ink-faint); font-size:.78rem }
.bk__svc .dep{
  margin-top:12px; padding-top:10px; border-top:1px solid rgba(44,37,32,.1);
  font-size:.76rem; color:var(--ink-soft);
}
.bk__svc .dep b{ display:inline; font-weight:500; color:var(--ink) }

/* días y horas */
.bk__days{ display:flex; gap:10px; overflow-x:auto; padding-bottom:10px; margin-bottom:22px }
.bk__day{
  flex:0 0 auto; cursor:pointer; min-width:78px;
  border:1px solid rgba(44,37,32,.12); background:rgba(255,255,255,.5);
  border-radius:14px; padding:12px 10px; text-align:center;
  font-family:var(--sans); color:var(--ink);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.bk__day span{ display:block; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint) }
.bk__day b{ display:block; font-size:1.3rem; font-weight:300; font-variant-numeric:tabular-nums; margin-top:3px }
.bk__day:hover{ border-color:var(--brass) }
.bk__day[aria-pressed="true"]{ background:var(--olive-solid); border-color:var(--olive-solid); color:#F3EEE3 }
.bk__day[aria-pressed="true"] span{ color:rgba(243,238,227,.6) }
.bk__day[disabled]{ opacity:.34; cursor:not-allowed }

.bk__slots{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.bk__slot{
  cursor:pointer; border:1px solid rgba(44,37,32,.14); background:rgba(255,255,255,.55);
  border-radius:999px; padding:11px 20px;
  font-family:var(--sans); font-size:.84rem; color:var(--ink);
  font-variant-numeric:tabular-nums;
  transition:background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}
.bk__slot:hover{ border-color:var(--brass); color:var(--brass) }
.bk__slot[aria-pressed="true"]{ background:var(--brass); border-color:var(--brass); color:#FFF8EC }

/* formulario */
.bk__form{ max-width:560px; margin-inline:auto; display:grid; gap:16px }
.bk__form label{ display:grid; gap:6px }
.bk__form label > span{
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);
}
.bk__form input, .bk__form textarea{
  font-family:var(--sans); font-size:1rem; font-weight:300; color:var(--ink);
  background:rgba(255,255,255,.65); border:1px solid rgba(44,37,32,.16);
  border-radius:12px; padding:13px 15px; width:100%;
  transition:border-color .28s var(--ease), background .28s var(--ease);
}
.bk__form input:focus, .bk__form textarea:focus{ outline:none; border-color:var(--brass); background:#fff }
.bk__check{
  display:flex !important; gap:12px; align-items:flex-start;
  background:var(--paper-2); border:1px solid rgba(44,37,32,.1);
  border-radius:14px; padding:16px 18px;
  font-size:.82rem; line-height:1.55; color:var(--ink-soft);
}
.bk__check input{ width:20px; height:20px; margin-top:2px; flex:0 0 auto; accent-color:var(--brass) }
.bk__form label.bk__check > span, .bk__check > span{
  text-transform:none; letter-spacing:normal; font-size:.8rem;
  color:var(--ink-soft); line-height:1.62; font-weight:300;
}
.bk__form .btn{ justify-self:center; margin-top:6px }

/* resumen y pago */
.bk__summary{
  max-width:520px; margin:0 auto 24px;
  background:var(--paper-2); border:1px solid rgba(44,37,32,.1);
  border-radius:16px; padding:20px 24px;
}
.bk__summary dl{ display:grid; grid-template-columns:1fr auto; gap:9px 16px; margin:0 }
.bk__summary dt{ color:var(--ink-soft); font-size:.86rem }
.bk__summary dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums }
.bk__summary .big{ font-size:1.24rem; color:var(--brass) }
.bk__summary hr{ grid-column:1/-1; border:0; height:1px; background:rgba(44,37,32,.12); margin:4px 0 }
#payment-element{ max-width:520px; margin:0 auto }
#pay-btn{ display:flex; margin:22px auto 0; min-width:240px }
.bk__fine{
  max-width:520px; margin:16px auto 0; text-align:center;
  font-size:.76rem; color:var(--ink-faint); line-height:1.6;
}

/* confirmación */
.bk__done{ text-align:center }
.bk__bigscript{ font-size:clamp(3rem,8vw,5rem); margin:0 0 10px; line-height:1 }
.bk__ticket{
  max-width:440px; margin:0 auto 18px;
  background:var(--olive-solid); color:#F1ECE0;
  border-radius:18px; padding:26px 28px; text-align:left;
}
.bk__ticket dl{ display:grid; grid-template-columns:1fr auto; gap:10px 16px; margin:0 }
.bk__ticket dt{ color:rgba(241,236,224,.6); font-size:.8rem }
.bk__ticket dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums }
.bk__ticket .big{ color:var(--brass-lite); font-size:1.2rem }

@media (max-width:640px){
  .bk__steps li b{ display:none }
  .bk__steps{ gap:14px }
  .bk__services{ grid-template-columns:1fr }
}

/* ============ RESERVA DENTRO DE LA WEB (overlay) ============ */

.bkov{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(10px,3vw,40px);
  background:rgba(30,25,20,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transition:opacity .34s var(--ease);
}
.bkov[hidden]{ display:none }
.bkov.is-open{ opacity:1 }

.bkov__sheet{
  position:relative;
  width:min(980px,100%);
  margin:auto;
  background:var(--paper);
  border:1px solid rgba(215,179,122,.45);
  border-radius:clamp(18px,2.4vw,26px);
  padding:clamp(26px,4vw,52px) clamp(18px,4vw,52px) clamp(34px,5vw,56px);
  box-shadow:0 50px 110px -50px rgba(30,24,18,.8);
  transform:translateY(18px) scale(.99);
  transition:transform .42s var(--ease);
}
.bkov.is-open .bkov__sheet{ transform:none }
/* grano y calidez, como el resto de la web */
.bkov__sheet::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(90% 55% at 78% -6%, rgba(215,179,122,.22), transparent 60%);
}
.bkov__sheet > *{ position:relative }

.bkov__close{
  position:absolute; top:14px; right:16px; z-index:2;
  appearance:none; background:rgba(255,255,255,.6); border:1px solid rgba(44,37,32,.12);
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--ink-soft);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.bkov__close:hover{ background:var(--brass); color:#FFF8EC; transform:rotate(90deg) }

.bkov .bk__title{ margin:8px 0 clamp(22px,3vw,34px) }
.bkov .bk__panel{ min-height:180px }

.bk__back-step{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); padding:0 0 16px; display:block;
  transition:color .25s var(--ease);
}
.bk__back-step:hover{ color:var(--brass) }

body.bkov-open{ overflow:hidden }

@media (max-width:640px){
  .bkov{ padding:0 }
  .bkov__sheet{ border-radius:0; min-height:100dvh; border:0; padding-top:60px }
  .bkov__close{ top:10px; right:10px }
}