:root { --night:#05070b; --panel:#0c1018; --white:#f5f7fb; --muted:#87909f; --violet:#8d6aff; --fire:#ff7920; }
* { box-sizing:border-box; }
html { background:var(--night); }
body { margin:0; overflow-x:hidden; background:radial-gradient(circle at 70% 5%,rgba(106,75,205,.18),transparent 25%),var(--night); color:var(--white); font-family:Inter,sans-serif; }
a { color:inherit; }
.icon-arrow { display:inline-block; width:1em; height:1em; margin-left:.18em; vertical-align:-.15em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible { outline:2px solid #b49cff; outline-offset:4px; }
.reserve-header { height:82px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 clamp(1rem,4vw,4rem); border-bottom:1px solid rgba(255,255,255,.1); }
.back-link,.ticket-link { font:700 .7rem/1 Rajdhani,sans-serif; letter-spacing:.16em; text-decoration:none; }
.ticket-link { justify-self:end; padding:.65rem .9rem; border:1px solid rgba(255,255,255,.45); }
.reserve-brand img { display:block; width:152px; height:auto; }
.reserve-intro { position:relative; min-height:540px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:5rem 1.2rem 3rem; overflow:hidden; text-align:center; background:linear-gradient(180deg,rgba(5,7,11,.28),#05070b),url('../images/hero-forest-desktop.webp') center 48%/cover; }
.reserve-intro::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 52%,transparent 0 18%,rgba(5,7,11,.62) 72%); pointer-events:none; }
.reserve-intro > * { position:relative; z-index:1; }
.reserve-intro > p:first-child,.map-toolbar p,.panel-index,.reservation-steps>p { margin:0 0 1rem; color:#aa93ff; font:700 .68rem/1 Rajdhani,sans-serif; letter-spacing:.34em; }
.reserve-intro h1 { margin:0; font:400 clamp(5rem,11vw,11rem)/.7 Bebas Neue,sans-serif; }
.reserve-intro h1 em { color:transparent; font-style:normal; -webkit-text-stroke:1px rgba(255,255,255,.55); }
.event-line { display:flex; align-items:center; gap:1rem; margin-top:2.3rem; font:600 clamp(1.3rem,2.8vw,2.7rem)/1 Bebas Neue,sans-serif; letter-spacing:.04em; }
.event-line i { width:1px; height:1em; background:rgba(255,255,255,.6); }
.intro-copy { max-width:560px; margin:1.4rem 0 0; color:rgba(255,255,255,.65); font-size:.86rem; line-height:1.7; }
.reservation-workspace { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(330px,.65fr); min-height:760px; border-block:1px solid rgba(255,255,255,.1); }
.map-column { padding:clamp(1rem,3vw,3rem); border-right:1px solid rgba(255,255,255,.1); }
.map-toolbar { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.map-toolbar p { margin-bottom:.5rem; }
.map-toolbar h2 { margin:0; font:400 clamp(2rem,4vw,4rem)/1 Bebas Neue,sans-serif; }
.view-switch { padding:.25rem; border:1px solid rgba(255,255,255,.13); background:#070a10; }
.view-switch button { padding:.65rem 1rem; border:0; background:transparent; color:rgba(255,255,255,.45); font:700 .65rem Rajdhani,sans-serif; letter-spacing:.12em; cursor:pointer; }
.view-switch button.active { background:rgba(255,255,255,.1); color:#fff; }
.venue-map { position:relative; min-height:600px; overflow:hidden; border:1px solid rgba(255,255,255,.12); outline:none; background:linear-gradient(rgba(11,15,23,.78),rgba(5,8,13,.94)),url('../images/hero-forest-desktop.webp') center/cover; }
.venue-map:focus-visible { box-shadow:0 0 0 2px var(--violet); }
.map-grid { position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:42px 42px; mask-image:radial-gradient(circle,#000,transparent 80%); }
.map-grid::after { content:''; position:absolute; left:50%; top:50%; width:60%; aspect-ratio:1.8; border:1px solid rgba(255,255,255,.22); border-radius:50%; transform:translate(-50%,-50%) rotate(-8deg); box-shadow:0 0 0 35px rgba(255,255,255,.025),0 0 0 72px rgba(255,255,255,.018); }
.map-light { position:absolute; width:42%; height:42%; border-radius:50%; filter:blur(80px); opacity:.23; }
.map-light-violet { left:-10%; bottom:-5%; background:var(--violet); }
.map-light-fire { right:-10%; top:10%; background:var(--fire); }
.map-pending { position:absolute; left:50%; top:50%; width:min(86%,520px); transform:translate(-50%,-50%); text-align:center; }
.pending-signal { display:block; width:12px; height:12px; margin:0 auto 2rem; border-radius:50%; background:#9c7dff; box-shadow:0 0 0 12px rgba(135,98,255,.09),0 0 40px 15px rgba(135,98,255,.48); animation:signal 2.8s ease-in-out infinite; }
.map-pending p { margin:0 0 .6rem; color:rgba(255,255,255,.45); font:700 .68rem Rajdhani,sans-serif; letter-spacing:.32em; }
.map-pending strong { display:block; font:400 clamp(3.2rem,7vw,7rem)/.9 Bebas Neue,sans-serif; letter-spacing:.025em; }
.map-pending small { display:block; max-width:390px; margin:1.2rem auto 0; color:rgba(255,255,255,.55); font-size:.75rem; line-height:1.7; }
.map-units { position:absolute; inset:0; }
.map-unit { position:absolute; width:48px; height:48px; transform:translate(-50%,-50%); border:1px solid currentColor; border-radius:50%; background:rgba(4,7,12,.82); color:#a4e9bc; font:700 .65rem Rajdhani,sans-serif; cursor:pointer; box-shadow:0 0 20px currentColor; }
.map-unit[data-status="held"] { color:#ffd27a; }
.map-unit[data-status="sold"],.map-unit[data-status="unavailable"] { color:#7c8490; box-shadow:none; }
.map-unit:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.legend { display:flex; flex-wrap:wrap; gap:1.2rem; padding-top:1.2rem; color:rgba(255,255,255,.62); font:600 .63rem Rajdhani,sans-serif; letter-spacing:.08em; }
.legend span { display:flex; align-items:center; gap:.5rem; }
.legend i { width:8px; height:8px; border-radius:50%; background:#a4e9bc; }
.legend .held { background:#ffd27a; }.legend .sold,.legend .unavailable { background:#6f7783; }
.unit-list { display:grid; gap:.6rem; min-height:600px; align-content:start; }
.unit-list button { display:grid; grid-template-columns:1fr auto; gap:.3rem; padding:1rem; border:1px solid rgba(255,255,255,.12); background:#0a0e16; color:#fff; text-align:left; cursor:pointer; }
.unit-list strong { font:700 1rem Rajdhani,sans-serif; }.unit-list span { color:rgba(255,255,255,.55); font-size:.72rem; }
.reserve-panel { display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:clamp(4rem,9vw,9rem) clamp(2rem,4vw,4.5rem) clamp(2rem,4vw,4.5rem); background:radial-gradient(circle at 100% 10%,rgba(255,112,22,.13),transparent 32%),var(--panel); }
.reserve-panel h2 { margin:0; font:400 clamp(3.2rem,5.7vw,6rem)/.83 Bebas Neue,sans-serif; }
.reserve-panel [data-unit-detail]>p { color:rgba(255,255,255,.58); font-size:.84rem; line-height:1.75; }
.unit-data { width:100%; margin:1.5rem 0 0; }
.unit-data div { display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; border-top:1px solid rgba(255,255,255,.1); }
.unit-data dt,.unit-data dd { margin:0; font:600 .68rem Rajdhani,sans-serif; letter-spacing:.11em; }
.unit-data dt { color:rgba(255,255,255,.42); }
.whatsapp-button { display:flex; justify-content:space-between; width:100%; margin-top:2rem; padding:1rem 1.2rem; border:1px solid rgba(141,106,255,.55); background:linear-gradient(110deg,rgba(106,69,212,.85),rgba(48,32,103,.75)); box-shadow:0 0 35px rgba(109,73,212,.18); font:700 .72rem Rajdhani,sans-serif; letter-spacing:.12em; text-decoration:none; }
.availability-note { margin:1rem 0 0; color:rgba(255,255,255,.37); font-size:.65rem; line-height:1.55; }
.reservation-steps { padding:clamp(4rem,8vw,8rem) clamp(1rem,6vw,6rem); }
.reservation-steps ol { display:grid; grid-template-columns:repeat(3,1fr); margin:2.5rem 0 0; padding:0; list-style:none; border-block:1px solid rgba(255,255,255,.11); }
.reservation-steps li { min-height:210px; display:flex; flex-direction:column; justify-content:center; padding:2rem; border-right:1px solid rgba(255,255,255,.11); }
.reservation-steps li:last-child { border:0; }
.reservation-steps li span { color:#a98dff; font:700 .65rem Rajdhani,sans-serif; }.reservation-steps li strong { margin:.8rem 0 .35rem; font:400 2.4rem Bebas Neue,sans-serif; }.reservation-steps li small { color:rgba(255,255,255,.48); }
footer { display:flex; justify-content:space-between; gap:1rem; padding:2rem clamp(1rem,4vw,4rem); border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.5); font:600 .65rem Rajdhani,sans-serif; letter-spacing:.12em; } footer a{text-decoration:none}
@keyframes signal { 50% { opacity:.55; transform:scale(.72); } }
@media (max-width:800px) {
  .reserve-header { grid-template-columns:1fr 1fr; height:72px; }.reserve-brand{display:none}.ticket-link{justify-self:end}
  .reserve-intro { min-height:510px; background-image:linear-gradient(180deg,rgba(5,7,11,.3),#05070b),url('../images/hero-forest-mobile.webp'); }
  .reservation-workspace { grid-template-columns:1fr; }.map-column{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:1rem}.venue-map{min-height:520px}.reserve-panel{min-height:560px}
  .reservation-steps ol { grid-template-columns:1fr; }.reservation-steps li{min-height:150px;border-right:0;border-bottom:1px solid rgba(255,255,255,.11)}
}
@media (prefers-reduced-motion:reduce) { *{animation:none!important;scroll-behavior:auto!important} }