/* Slotly · demo de reservas. Una sola columna tipo app; en pantallas anchas se centra
   como un móvil. Todo el movimiento es de opacidad y transformaciones. */
:root{
  --bg:#f6f7f9; --card:#fff; --card-2:#f1f3f6; --ink:#0b1220; --ink-2:#556074; --ink-3:#626c7c;
  --line:rgba(11,18,32,.08); --brand:#0ea5e9; --brand-2:#0369a1; --btn:#0369a1; --btn-ink:#fff; --brand-soft:rgba(14,165,233,.12);
  --navy:#0f172a; --ok:#15803d; --ok-soft:rgba(22,163,74,.12); --star:#f5a524; --danger:#e5484d;
  --shadow-1:0 1px 2px rgba(11,18,32,.06),0 4px 14px rgba(11,18,32,.06);
  --shadow-2:0 2px 6px rgba(11,18,32,.08),0 18px 40px rgba(11,18,32,.14);
  --glass:rgba(255,255,255,.78); --r-lg:26px; --r:18px; --r-sm:12px;
  --fh:'Plus Jakarta Sans',system-ui,sans-serif; --fb:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1); --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b1020; --card:#131b2d; --card-2:#1a2336; --ink:#eef2f8; --ink-2:#a3adc0; --ink-3:#7a8499;
  --line:rgba(238,242,248,.08); --brand-2:#38bdf8; --btn:#38bdf8; --btn-ink:#04121d; --ok:#4ade80; --brand-soft:rgba(14,165,233,.18); --navy:#eef2f8; --ok-soft:rgba(22,163,74,.2);
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25); --shadow-2:0 18px 40px rgba(0,0,0,.45); --glass:rgba(19,27,45,.8);
}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--fb);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
@media (min-width:560px){body{background:radial-gradient(900px 600px at 50% -10%,rgba(14,165,233,.14),transparent 60%),#e9edf2}}
@media (min-width:560px) and (prefers-color-scheme:dark){body{background:radial-gradient(900px 600px at 50% -10%,rgba(14,165,233,.18),transparent 60%),#070b16}}
button,input{font:inherit;color:inherit}button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
img{display:block;max-width:100%}

.app{position:relative;max-width:440px;min-height:100%;margin:0 auto;background:var(--bg);overflow-x:hidden}
@media (min-width:560px){.app{min-height:calc(100% - 48px);margin:24px auto;border-radius:36px;box-shadow:0 30px 90px rgba(11,18,32,.25);overflow:hidden;isolation:isolate}}
.view{padding-bottom:calc(96px + var(--safe-b));outline:none;animation:view-in .45s var(--ease) both}
@keyframes view-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.demo-note{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;font-size:11.5px;color:var(--ink-2);background:var(--card);border-bottom:1px solid var(--line)}
.demo-note__dot{width:6px;height:6px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}

/* cabecera de Explorar */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 20px 6px}
.top__hi{font-size:13px;color:var(--ink-2);font-weight:500}
.top__title{font:800 28px/1.1 var(--fh);letter-spacing:-.8px;margin-top:4px}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--fh);color:#fff;background:linear-gradient(135deg,#38bdf8,#0369a1);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--brand-soft)}
.search{margin:16px 20px 0;display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-radius:16px;background:var(--card);box-shadow:var(--shadow-1);color:var(--ink-3);font-size:15px}
.search input{flex:1;border:0;background:none;outline:none;height:100%;font-size:15px;color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.search:focus-within{box-shadow:0 0 0 2px var(--brand),var(--shadow-1)}

.chips{display:flex;gap:8px;padding:16px 20px 4px;overflow-x:auto;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:background .2s,color .2s,transform .2s var(--ease)}
.chip svg{width:17px;height:17px}
.chip.is-on{background:var(--navy);color:var(--bg);border-color:transparent}
.chip:active{transform:scale(.96)}

.sec{padding:26px 20px 0}
.sec__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.sec__title{font:800 20px var(--fh);letter-spacing:-.4px}
.sec__sub{font-size:13px;color:var(--ink-2);margin-top:3px}
.sec__link{font-size:13px;font-weight:600;color:var(--brand-2)}

/* carrusel destacado */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:2px 20px 8px;margin:0 -20px;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.feat{position:relative;flex:0 0 78%;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;scroll-snap-align:start;box-shadow:var(--shadow-2);color:#fff;transition:transform .35s var(--ease)}
.feat:active{transform:scale(.98)}
.feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(3,8,20,.82))}
.feat__top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;z-index:1}
.pill{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.92);color:#0b1220;font-size:12.5px;font-weight:700;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pill svg{width:14px;height:14px}.pill .star{color:var(--star);fill:var(--star);stroke:none}
.pill--dark{background:rgba(3,8,20,.45);color:#fff}
.feat__body{position:absolute;left:18px;right:18px;bottom:18px;z-index:1}
.feat__cat{font-size:12px;font-weight:600;opacity:.8;letter-spacing:.2px}
.feat__name{font:800 22px/1.15 var(--fh);letter-spacing:-.5px;margin:5px 0 10px}
.feat__row{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.feat__price b{font:800 20px var(--fh)}.feat__price span{opacity:.8}
.feat__go{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b1220}

/* lista */
.list{display:grid;gap:12px}
.row{display:flex;gap:14px;align-items:center;padding:10px;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-1);transition:transform .25s var(--ease)}
.row:active{transform:scale(.985)}
.row img{width:86px;height:86px;border-radius:14px;object-fit:cover}
.row__body{flex:1;min-width:0}
.row__cat{font-size:11.5px;font-weight:700;color:var(--brand-2);text-transform:uppercase;letter-spacing:.6px}
.row__name{font:700 15.5px/1.25 var(--fh);margin:4px 0 6px;letter-spacing:-.2px}
.row__meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2)}
.row__meta span{display:inline-flex;align-items:center;gap:4px}.row__meta svg{width:14px;height:14px}
.row__meta .star{color:var(--star);fill:var(--star);stroke:none}
.row__price{text-align:right;padding-right:6px}.row__price b{display:block;font:800 17px var(--fh)}.row__price span{font-size:11px;color:var(--ink-3)}

.foot{padding:30px 20px 10px;text-align:center;font-size:12px;color:var(--ink-3)}
.foot a{text-decoration:underline;text-underline-offset:3px}

/* ficha */
.hero{position:relative;height:340px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;transform-origin:center;animation:hero-in 1.2s var(--ease) both}
@keyframes hero-in{from{transform:scale(1.08)}to{transform:none}}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,8,20,.35),transparent 30%,transparent 70%,rgba(3,8,20,.25))}
.hero__bar{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;z-index:2}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--glass);color:var(--ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-1);transition:transform .2s var(--ease)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.is-fav svg{fill:var(--danger);stroke:var(--danger)}
.detail{position:relative;margin-top:-28px;border-radius:28px 28px 0 0;background:var(--bg);padding:24px 20px 0;z-index:1}
.detail__cat{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:var(--brand-soft);color:var(--brand-2);font-size:12px;font-weight:700}
.detail__cat svg{width:15px;height:15px}
.detail h1{font:800 26px/1.15 var(--fh);letter-spacing:-.7px;margin:12px 0 10px}
.rating{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2)}
.rating b{color:var(--ink)}.rating .star{color:var(--star);fill:var(--star);stroke:none;width:17px;height:17px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 4px}
.fact{padding:12px 10px;border-radius:var(--r-sm);background:var(--card);box-shadow:var(--shadow-1);text-align:center}
.fact svg{width:19px;height:19px;color:var(--brand-2);margin:0 auto 6px}
.fact b{display:block;font:700 13px var(--fh)}.fact span{font-size:11.5px;color:var(--ink-3)}
.block{padding-top:24px}
.block h2{font:800 17px var(--fh);letter-spacing:-.3px;margin-bottom:10px}
.block p{font-size:15px;line-height:1.65;color:var(--ink-2)}
.incl{display:grid;gap:10px}
.incl li{list-style:none;display:flex;gap:10px;align-items:center;font-size:14.5px}
.incl li i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.incl li i svg{width:14px;height:14px;stroke-width:2.4}
.incl .yes i{background:var(--ok-soft);color:var(--ok)}
.incl .no{color:var(--ink-3)}.incl .no i{background:var(--card-2);color:var(--ink-3)}
.info{border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-1);overflow:hidden}
.info div{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-top:1px solid var(--line)}
.info div:first-child{border-top:0}
.info svg{color:var(--ink-3);margin-top:1px}
.info small{display:block;font-size:12px;color:var(--ink-3)}.info b{font-size:14.5px;font-weight:600}
.book-bar{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:440px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px calc(14px + var(--safe-b));background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--line);z-index:30}
@media (min-width:560px){.book-bar{bottom:24px;border-radius:0 0 36px 36px}}
.book-bar__price b{font:800 22px var(--fh)}.book-bar__price span{font-size:13px;color:var(--ink-2)}
.book-bar__price small{display:block;font-size:12px;color:var(--ok);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 26px;border-radius:16px;background:var(--btn);color:var(--btn-ink);font:700 15.5px var(--fh);box-shadow:0 8px 22px rgba(3,105,161,.3);transition:transform .2s var(--ease),opacity .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;box-shadow:none;cursor:default}
.btn--block{width:100%}
.btn--ghost{background:var(--card);color:var(--ink);box-shadow:var(--shadow-1)}

/* tab bar */
.tabbar{position:fixed;left:50%;bottom:calc(12px + var(--safe-b));transform:translateX(-50%);width:calc(100% - 32px);max-width:408px;height:66px;display:grid;grid-template-columns:repeat(3,1fr);padding:6px;border-radius:22px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:var(--shadow-2);border:1px solid var(--line);z-index:20;transition:transform .35s var(--ease),opacity .25s}
@media (min-width:560px){.tabbar{bottom:40px}}
.tabbar.is-hidden{transform:translate(-50%,120%);opacity:0;pointer-events:none}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:16px;font-size:11px;font-weight:600;color:var(--ink-3);transition:color .2s,background .25s}
.tabbar a.is-on{color:var(--brand-2);background:var(--brand-soft)}
.tabbar svg{width:22px;height:22px}
.tabbar__badge{position:absolute;top:6px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font:700 10.5px/18px var(--fb);text-align:center}

/* hoja de reserva */
.sheet{position:fixed;inset:0;z-index:50;pointer-events:none}
.sheet__scrim{position:absolute;inset:0;background:rgba(3,8,20,.45);opacity:0;transition:opacity .3s}
.sheet__panel{position:absolute;left:50%;bottom:0;width:100%;max-width:440px;max-height:92%;overflow-y:auto;transform:translate(-50%,100%);border-radius:28px 28px 0 0;background:var(--bg);padding:10px 20px calc(20px + var(--safe-b));transition:transform .45s var(--ease);overscroll-behavior:contain}
.sheet.is-open{pointer-events:auto}.sheet.is-open .sheet__scrim{opacity:1}.sheet.is-open .sheet__panel{transform:translate(-50%,0)}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 14px;background:rgba(127,138,160,.35)}
.sheet h2{font:800 21px var(--fh);letter-spacing:-.4px}
.sheet__sub{font-size:13.5px;color:var(--ink-2);margin-top:4px}
.label{display:flex;justify-content:space-between;align-items:baseline;font:700 14px var(--fh);margin:22px 0 10px}
.label small{font:500 12px var(--fb);color:var(--ink-3)}
.days{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:2px 20px 6px;scrollbar-width:none}.days::-webkit-scrollbar{display:none}
.day{flex:0 0 64px;height:82px;border-radius:16px;background:var(--card);border:1.5px solid transparent;box-shadow:var(--shadow-1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .2s var(--ease),border-color .2s,background .2s}
.day small{font-size:11.5px;color:var(--ink-3);text-transform:capitalize}.day b{font:800 20px var(--fh)}
.day i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--ok)}.day i.low{color:#b45309}.day i.none{color:var(--ink-3)}
.day.is-on{border-color:var(--brand);background:var(--brand-soft)}
.day:disabled{opacity:.5;cursor:default}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{height:60px;border-radius:14px;background:var(--card);border:1.5px solid transparent;box-shadow:var(--shadow-1);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.slot b{font:700 15px var(--fh)}.slot small{font-size:11px;color:var(--ok);font-weight:600}.slot small.low{color:#b45309}
.slot.is-on{border-color:var(--brand);background:var(--brand-soft)}
.slot:disabled{box-shadow:none;background:var(--card-2);cursor:default}.slot:disabled b{color:var(--ink-3);text-decoration:line-through}.slot:disabled small{color:var(--ink-3)}
.stepper{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 12px 16px;border-radius:16px;background:var(--card);box-shadow:var(--shadow-1)}
.stepper p{font-size:14.5px;font-weight:600}.stepper p small{display:block;font-size:12px;color:var(--ink-3);font-weight:500}
.stepper__ctl{display:flex;align-items:center;gap:14px}
.stepper__ctl button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--card-2);transition:transform .15s}
.stepper__ctl button:active{transform:scale(.9)}.stepper__ctl button:disabled{opacity:.35}
.stepper__ctl b{min-width:18px;text-align:center;font:800 17px var(--fh)}
.fields{display:grid;gap:10px}
.field{display:block;padding:10px 16px;border-radius:14px;background:var(--card);box-shadow:var(--shadow-1);border:1.5px solid transparent;transition:border-color .2s}
.field:focus-within{border-color:var(--brand)}
.field span{display:block;font-size:11.5px;color:var(--ink-3);font-weight:600}
.field input{width:100%;border:0;outline:none;background:none;font-size:15.5px;padding-top:3px}
.summary{margin-top:20px;padding:16px;border-radius:16px;background:var(--card-2);display:grid;gap:8px;font-size:14px}
.summary div{display:flex;justify-content:space-between;color:var(--ink-2)}
.summary .total{padding-top:10px;border-top:1px dashed rgba(127,138,160,.35);color:var(--ink);font-weight:700}
.summary .total b{font:800 22px var(--fh)}
.num{display:inline-block;animation:num .35s var(--ease)}
@keyframes num{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.fine{font-size:12px;color:var(--ink-3);line-height:1.5;margin:12px 2px 16px}

/* confirmación */
.done{text-align:center;padding:14px 4px 4px}
.done__check{width:84px;height:84px;margin:6px auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;box-shadow:0 0 0 10px var(--ok-soft);animation:pop .6s var(--ease) both}
.done__check svg{width:40px;height:40px;stroke-width:2.6}.done__check svg path{stroke-dasharray:22;stroke-dashoffset:22;animation:draw .5s .35s var(--ease) forwards}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
.done h2{font-size:24px}
.done p{font-size:14.5px;color:var(--ink-2);margin:8px 0 20px;line-height:1.5}

/* billetes */
.ticket{position:relative;border-radius:22px;background:var(--card);box-shadow:var(--shadow-2);overflow:hidden;animation:view-in .5s var(--ease) both}
.ticket__img{position:relative;height:120px}
.ticket__img img{width:100%;height:100%;object-fit:cover}
.ticket__img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(3,8,20,.7))}
.ticket__img h3{position:absolute;left:16px;right:16px;bottom:12px;z-index:1;color:#fff;font:800 17px/1.2 var(--fh)}
.ticket__body{display:grid;grid-template-columns:1fr auto;gap:14px;padding:16px;align-items:center}
.ticket__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.ticket__grid small{display:block;font-size:11px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.ticket__grid b{font:700 14px var(--fh)}
.ticket__qr{width:86px;height:86px;padding:6px;border-radius:12px;background:#fff;stroke:none}
.ticket__cut{position:relative;height:0;border-top:2px dashed rgba(127,138,160,.3);margin:0 16px}
.ticket__cut::before,.ticket__cut::after{content:'';position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--bg)}
.ticket__cut::before{left:-27px}.ticket__cut::after{right:-27px}
.ticket__code{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 14px;font-size:12.5px;color:var(--ink-2)}
.ticket__code b{font:800 15px var(--fh);letter-spacing:1.5px;color:var(--ink)}
.status{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-size:11.5px;font-weight:700}
.empty{text-align:center;padding:60px 24px}
.empty__art{width:96px;height:96px;margin:0 auto 18px;border-radius:30px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-2)}
.empty__art svg{width:42px;height:42px}
.empty h2{font:800 20px var(--fh)}.empty p{font-size:14.5px;color:var(--ink-2);margin:8px 0 22px;line-height:1.5}
.page-title{padding:24px 20px 4px;font:800 28px var(--fh);letter-spacing:-.8px}
.credits{display:grid;gap:10px}
.credits li{list-style:none;padding:14px 16px;border-radius:14px;background:var(--card);box-shadow:var(--shadow-1);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.credits b{color:var(--ink)}
.toast{position:fixed;left:50%;top:18px;transform:translate(-50%,-140%);padding:12px 18px;border-radius:14px;background:var(--navy);color:var(--bg);font-size:13.5px;font-weight:600;box-shadow:var(--shadow-2);z-index:60;transition:transform .4s var(--ease)}
.toast.is-on{transform:translate(-50%,0)}
.no-results{padding:40px 10px;text-align:center;color:var(--ink-2);font-size:14.5px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ticket__code b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:2px}