/* Reserva dinámica */
.bk { padding-top: clamp(120px, 14vw, 170px); padding-bottom: 120px; }
.bk__title { margin: 0; font: 900 clamp(64px, 11vw, 170px)/.82 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.bk__title .serif { color: var(--rose); font-size: .86em; }
.bk__lede { color: var(--muted); max-width: 56ch; margin: 22px 0 0; font-size: 18px; }
.bk__promo { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; color: var(--muted); }
.bk__promo b { color: var(--paper); font-weight: 500; }
.bk__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 4vw, 64px); margin-top: clamp(44px, 6vw, 80px); align-items: start; }

/* Pasos */
.step { border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__head { display: flex; align-items: baseline; gap: 18px; padding: 26px 0; cursor: default; }
.step.is-done .step__head { cursor: pointer; }
.step__n { font: 400 14px var(--sans); color: var(--dim); letter-spacing: .1em; min-width: 26px; }
.step.is-open .step__n, .step.is-done .step__n { color: var(--rose); }
.step__head h2 { margin: 0; font: 800 clamp(28px, 3.2vw, 44px)/1 var(--display); text-transform: uppercase; color: var(--dim); transition: color .4s; }
.step.is-open h2, .step.is-done h2 { color: var(--paper); }
.step__val { margin-left: auto; font: 400 20px var(--serif); color: var(--cream); text-align: right; }
.step__body { display: none; }
.step.is-open .step__body { display: block; padding-bottom: 34px; animation: stepIn .7s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.step__next { margin-top: 28px; }

.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kind { position: relative; text-align: left; padding: 26px 24px 24px; border-radius: var(--radius); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 6px;
  transition: border-color .3s, background .3s, transform .4s var(--ease); min-height: 150px; }
.kind:hover { border-color: var(--cream); transform: translateY(-2px); }
.kind.is-on { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.kind:disabled { opacity: .35; pointer-events: none; }
.kind__t { font: 900 46px/.9 var(--display); text-transform: uppercase; }
.kind__d { font-size: 14px; color: var(--muted); max-width: 26ch; }
.kind.is-on .kind__d { color: rgba(13,12,11,.65); }
.kind svg { position: absolute; top: 22px; right: 22px; width: 30px; height: 30px; opacity: .6; }

.days { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; scroll-snap-type: x proximity; }
.day { flex: none; width: 92px; scroll-snap-align: start; border-radius: 16px; border: 1px solid var(--line-2); padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color .3s, background .3s, color .3s, transform .4s var(--ease); position: relative; }
.day:hover { border-color: var(--cream); }
.day span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.day b { font: 900 38px/1 var(--display); }
.day small { font-size: 12px; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.day i { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--ink-4); overflow: hidden; }
.day i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--load, 0)); background: var(--ok); }
.day i.hot::after { background: var(--warn); }
.day.is-on { background: var(--rose); border-color: var(--rose); color: var(--ink); }
.day.is-on span, .day.is-on small { color: var(--ink); }
.day.is-closed { opacity: .3; pointer-events: none; }
.day .badge { position: absolute; top: -8px; right: -4px; background: var(--cream); color: var(--ink); font: 600 9px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 4px 6px; border-radius: 999px; }
.day--sk { height: 108px; background: linear-gradient(90deg, var(--ink-2), var(--ink-3), var(--ink-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-color: transparent; }
@keyframes shimmer { to { background-position: -200% 0; } }

.evlist { display: grid; gap: 12px; }
.evc { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 12px; border-radius: var(--radius); border: 1px solid var(--line-2); text-align: left; transition: border-color .3s, background .3s; }
.evc:hover { border-color: var(--cream); }
.evc.is-on { border-color: var(--rose); background: rgba(220,154,158,.08); }
.evc img { width: 96px; height: 110px; object-fit: cover; border-radius: 12px; }
.evc h3 { margin: 0; font: 800 28px/1 var(--display); text-transform: uppercase; }
.evc p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.evc__p { text-align: right; padding-right: 8px; }
.evc__p b { display: block; font: 400 28px var(--serif); color: var(--cream); }
.evc__p small { color: var(--muted); font-size: 12px; }
.evc.is-soldout { opacity: .4; pointer-events: none; }

.pax { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pax__l { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pax__ctl { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; }
.pax__ctl button { width: 52px; height: 52px; font-size: 24px; color: var(--cream); border-radius: 50%; transition: background .3s; }
.pax__ctl button:hover { background: var(--ink-3); }
.pax__ctl output { min-width: 54px; text-align: center; font: 900 36px/1 var(--display); }
.pax__price { font: 400 24px var(--serif); color: var(--cream); }
.sublabel { margin: 30px 0 12px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.zones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.zone { text-align: left; padding: 18px; border-radius: 16px; border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; transition: border-color .3s, background .3s, color .3s; }
.zone:hover { border-color: var(--cream); }
.zone b { font: 800 24px/1 var(--display); text-transform: uppercase; }
.zone span { font-size: 13px; color: var(--muted); }
.zone em { font-style: normal; font-size: 12px; color: var(--ok); margin-top: 6px; }
.zone em.low { color: var(--warn); }
.zone.is-on { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.zone.is-on span, .zone.is-on em { color: rgba(13,12,11,.7); }
.zone:disabled { opacity: .32; pointer-events: none; }
.zone__note { grid-column: 1 / -1; font-size: 13px; color: var(--warn); margin: 2px 0 0; }
.times { display: flex; flex-wrap: wrap; gap: 8px; }
.time { padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 15px; font-variant-numeric: tabular-nums; transition: all .3s; }
.time:hover { border-color: var(--cream); }
.time.is-on { background: var(--rose); color: var(--ink); border-color: var(--rose); }
.time:disabled { opacity: .28; pointer-events: none; text-decoration: line-through; }
.hint { color: var(--dim); font-size: 14px; margin: 0; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field > span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field small { text-transform: none; letter-spacing: 0; color: var(--dim); margin-left: 6px; }
.field input, .field select, .field textarea { background: var(--ink-2); border: 1px solid var(--line-2); color: var(--paper); border-radius: 14px; padding: 15px 16px; font: 400 16px var(--sans);
  transition: border-color .3s; width: 100%; -webkit-appearance: none; appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a49c86' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cream); outline: none; }
.field.has-err input { border-color: var(--bad); }
.field em { font-style: normal; font-size: 13px; color: var(--bad); min-height: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { color: var(--bad); min-height: 1em; margin: 18px 0 0; }
.bk__submit { margin-top: 10px; width: 100%; justify-content: center; }
.bk__submit.is-loading { pointer-events: none; opacity: .7; }
.bk__submit.is-loading::after { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fine { color: var(--dim); font-size: 13px; margin: 16px 0 0; }

/* Resumen tipo boleto */
.ticket { position: sticky; top: 100px; background: var(--paper); color: var(--ink); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.ticket__top { background: var(--rose); padding: 26px 28px; }
.ticket__top img { width: 150px; }
.ticket__rows { margin: 0; padding: 18px 28px 10px; }
.ticket__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed rgba(13,12,11,.18); }
.ticket__rows dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(13,12,11,.55); }
.ticket__rows dd { margin: 0; font-weight: 500; text-align: right; }
.ticket__rows dd.pop { animation: pop .5s var(--ease); }
@keyframes pop { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ticket__cut { position: relative; height: 26px; }
.ticket__cut::before { content: ''; position: absolute; left: 18px; right: 18px; top: 50%; border-top: 2px dashed rgba(13,12,11,.2); }
.ticket__cut::after { content: ''; position: absolute; inset: 0 -14px; background: radial-gradient(circle at 0 50%, var(--ink) 13px, transparent 14px), radial-gradient(circle at 100% 50%, var(--ink) 13px, transparent 14px); }
.ticket__night { padding: 6px 28px 26px; min-height: 90px; }
.ticket__night p { margin: 0; color: rgba(13,12,11,.6); font-size: 14px; }
.ticket__night b { display: block; font: 900 34px/1 var(--display); text-transform: uppercase; }
.ticket__night span { font: 400 20px var(--serif); color: var(--plum); }

/* Éxito */
.done { display: grid; place-items: center; padding: 20px 0 40px; }
.done__ticket { width: min(460px, 100%); background: var(--paper); color: var(--ink); border-radius: 28px; padding: 34px 28px 30px; text-align: center; box-shadow: 0 40px 100px -30px rgba(220,154,158,.35); }
.done__name { margin: 0 0 18px; font: 900 clamp(40px, 8vw, 58px)/.9 var(--display); text-transform: uppercase; }
.done__qr { display: inline-block; padding: 12px; background: #fff; border-radius: 18px; border: 1px solid rgba(13,12,11,.08); }
.done__qr img { width: 230px; height: 230px; image-rendering: pixelated; }
.done__folio { margin: 12px 0 18px; font: 600 16px var(--sans); letter-spacing: .24em; }
.done__rows { margin: 0 0 22px; text-align: left; }
.done__rows div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed rgba(13,12,11,.18); }
.done__rows dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(13,12,11,.55); }
.done__rows dd { margin: 0; font-weight: 500; }
.done__actions { display: grid; gap: 10px; }
.done__actions .btn { justify-content: center; }
.btn--ghost-ink { border-color: rgba(13,12,11,.25); color: var(--ink); }
.wallet { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #000; color: #fff; border-radius: 12px; padding: 10px 18px; text-align: left; }
.wallet svg { width: 26px; height: 26px; }
.wallet span { display: flex; flex-direction: column; font: 500 18px/1.1 -apple-system, var(--sans); }
.wallet small { font-size: 11px; font-weight: 400; }
.wallet[hidden] { display: none; }
.done__mail { font-size: 13px; color: rgba(13,12,11,.6); margin: 18px 0 0; }

@media (max-width: 1024px) {
  .bk__grid { grid-template-columns: 1fr; }
  .ticket { position: relative; top: 0; order: -1; display: none; }
}
@media (max-width: 640px) {
  .kinds { grid-template-columns: 1fr; }
  .kind { min-height: 0; }
  .kind__t { font-size: 38px; }
  .zones { grid-template-columns: 1fr 1fr; }
  .zone { padding: 14px; }
  .zone b { font-size: 20px; }
  .fields { grid-template-columns: 1fr; }
  .step__val { font-size: 15px; max-width: 45%; }
  .evc { grid-template-columns: 72px 1fr; }
  .evc img { width: 72px; height: 86px; }
  .evc__p { grid-column: 2; text-align: left; padding: 0; }
  .day { width: 80px; }
  .day b { font-size: 32px; }
}

/* Pase */
.pass { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 28px 16px 60px;
  background: radial-gradient(ellipse at 50% 0%, rgba(220,154,158,.22), transparent 60%), var(--ink); }
.pass__back img { width: 120px; }
.pass__ticket { position: relative; }
.pass__status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.pass__status span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pass__status--ok { background: #e3efe0; color: #2f6a35; }
.pass__status--in { background: var(--rose); color: var(--ink); }
.pass__status--bad { background: #f6dcd8; color: #9b2c1f; }
.pass__svg { width: 240px; height: 240px; }
.pass__svg svg { width: 100%; height: 100%; display: block; }
.pass__svg svg .dark, .pass__svg svg path { fill: #0d0c0b; }