/* ============================================================
   Jet Park — Página de Espaços para Reserva
   Baseado no design system (tokens.css)
   ============================================================ */

:root{
  --blue:#0055AF; --blue-2:#2C51A7; --sky:#0097DB; --sky-deep:#0a3d7a;
  --gold:#EDAE33; --gold-2:#FEB100;
  --white:#fff; --ink:#26303a; --ink-2:#55606b; --muted:#8a949e;
  --bg:#eef4fb; --bg-soft:#f5f8fc; --line:#e2e8f1;
  --radius-pill:999px; --radius-card:18px; --radius-sm:10px;
  --shadow-card:0 6px 22px rgba(10,61,122,.10);
  --shadow-card-hover:0 16px 40px rgba(10,61,122,.20);
  --shadow-float:0 8px 24px rgba(0,0,0,.25);
  --container:1180px;
  --ff-head:"Montserrat",system-ui,sans-serif;
  --ff-body:"Montserrat",system-ui,sans-serif;
  --ff-fun:"Fredoka",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--ff-body); color:var(--ink);
  background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:0; background:none}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:40; background:var(--blue);
  box-shadow:0 2px 14px rgba(0,0,0,.18);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:46px; width:auto}
.header-nav{display:flex; align-items:center; gap:8px}
.header-link{display:inline-flex; align-items:center; min-height:44px; color:#cfe1f6; font-weight:600; font-size:.9rem; padding:8px 14px; border-radius:var(--radius-pill); transition:.2s}
.header-link:hover{color:#fff; background:rgba(255,255,255,.12)}
.btn-wa-head{background:#0B7A38; color:#fff !important; font-weight:700}
.btn-wa-head:hover{background:#096a30}

/* ---------------- Hero ---------------- */
.hero{position:relative; background:linear-gradient(160deg,var(--sky) 0%,var(--blue) 55%,var(--blue-2) 100%); color:#fff; overflow:hidden; padding:64px 0 90px}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.18),transparent 45%); pointer-events:none}
.hero-inner{position:relative; max-width:760px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); color:#fff; font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; padding:7px 16px; border-radius:var(--radius-pill); margin-bottom:22px}
.hero h1{font-family:var(--ff-fun); font-weight:700; font-size:clamp(2.4rem,5.5vw,4rem); line-height:1.02; margin:0 0 8px}
.hero h1 .accent{color:var(--gold-2)}
.hero p{font-size:clamp(1rem,1.6vw,1.2rem); color:#e6f0fb; max-width:560px; margin:0 0 28px}
.hero-stats{display:flex; flex-wrap:wrap; gap:14px}
.stat{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:12px 18px; min-width:120px}
.stat b{font-family:var(--ff-fun); display:block; font-size:1.7rem; line-height:1; color:#fff}
.stat span{font-size:.82rem; color:#cfe1f6}

/* onda divisória — assinatura do site */
.hero-wave{position:absolute; left:0; right:0; bottom:-1px; line-height:0}
.hero-wave svg{width:100%; height:70px; display:block}

/* ---------------- Filtros ---------------- */
.filters{position:sticky; top:68px; z-index:30; background:rgba(245,248,252,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding:14px 0}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; font-weight:600; font-size:.88rem; color:var(--blue); background:#fff; border:1.5px solid var(--line); padding:9px 16px; border-radius:var(--radius-pill); transition:.18s}
.chip:hover{border-color:var(--blue)}
.chip.active{background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 4px 12px rgba(0,85,175,.3)}
.chip .count{font-weight:700; margin-left:4px; color:var(--blue-2)}
.chip.active .count{color:#fff; opacity:.9}

/* Select de filtro (mobile) — escondido no desktop */
.filter-select{display:none}
.filter-select__label{display:block; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px}
#catSelect{
  appearance:none; -webkit-appearance:none; width:100%; min-height:50px;
  font-family:inherit; font-weight:700; font-size:1rem; color:var(--blue);
  background-color:#fff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230055AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230055AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat;
  background-position:left 16px center, right 16px center;
  border:1.5px solid var(--line); border-radius:16px; padding:13px 46px 13px 44px;
  box-shadow:var(--shadow-card); cursor:pointer;
}
#catSelect:focus-visible{outline:3px solid var(--gold-2); outline-offset:2px}

/* ---------------- Grid de espaços ---------------- */
.section-head{padding:38px 0 6px}
.section-head h2{font-family:var(--ff-fun); font-size:1.7rem; color:var(--blue); margin:0}
.section-head p{margin:4px 0 0; color:var(--ink-2)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:26px; padding:26px 0 60px}
/* reserva de espaço antes do JS preencher — evita layout shift (CLS) */
.grid:empty{min-height:140vh; display:block}
.chips:empty{min-height:42px; display:block}
.section-head:empty{min-height:74px}

.card{background:#fff; border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column; transition:transform .22s,box-shadow .22s}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-card-hover)}

.card-media{position:relative; aspect-ratio:4/3; overflow:hidden; cursor:pointer; background:#dce6f1}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.card:hover .card-media img{transform:scale(1.06)}
.card-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35))}

/* plaquinha numerada — assinatura inspirada na sinalização real do parque */
.plaque{position:absolute; top:14px; left:14px; z-index:2; background:#fff; border-radius:8px; padding:5px 11px 7px; box-shadow:0 4px 10px rgba(0,0,0,.25); text-align:center; line-height:1}
.plaque small{display:block; font-weight:700; font-size:.52rem; letter-spacing:.12em; color:var(--blue); text-transform:uppercase}
.plaque b{font-family:var(--ff-fun); font-size:1.5rem; color:var(--blue); display:block}
.plaque--word b{font-size:1.02rem; padding:0 2px}
.cat-tag{position:absolute; top:16px; right:14px; z-index:2; background:var(--gold); color:#10243d; font-weight:800; font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:var(--radius-pill)}
.photo-count{position:absolute; bottom:12px; right:12px; z-index:2; background:rgba(0,0,0,.55); color:#fff; font-size:.74rem; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill); display:flex; align-items:center; gap:5px}

.card-body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1}
.card-body h3{font-family:var(--ff-fun); font-size:1.22rem; color:var(--ink); margin:0 0 10px}
.badges{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:600; color:var(--blue-2); background:var(--bg-soft); border:1px solid var(--line); padding:5px 10px; border-radius:8px}
.badge svg{width:13px; height:13px}

.price-row{display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:6px}
.price{font-family:var(--ff-fun); font-size:1.55rem; color:var(--blue); font-weight:700}
.price small{font-size:.78rem; color:var(--muted); font-weight:600}

.card-actions{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; font-weight:700; font-size:.86rem; padding:11px 12px; border-radius:var(--radius-pill); transition:.18s; text-align:center}
.btn-ghost{background:var(--bg-soft); color:var(--blue); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue); background:#fff}
.btn-wa{background:#0B7A38; color:#fff}
.btn-wa:hover{background:#096a30; transform:translateY(-1px)}
.btn svg{width:15px; height:15px}

/* ---------------- Lightbox ---------------- */
.lightbox{position:fixed; inset:0; z-index:60; background:rgba(8,20,38,.94); display:none; flex-direction:column; opacity:0; transition:opacity .2s}
.lightbox.open{display:flex; opacity:1}
.lb-top{display:flex; align-items:center; justify-content:space-between; padding:16px 22px; color:#fff; gap:14px}
.lb-title{font-family:var(--ff-fun); font-size:1.3rem}
.lb-title span{display:block; font-family:var(--ff-body); font-size:.82rem; font-weight:600; color:#9db8d8}
.lb-close{color:#fff; font-size:1.6rem; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:.2s}
.lb-close:hover{background:rgba(255,255,255,.22)}
.lb-stage{flex:1; position:relative; display:flex; align-items:center; justify-content:center; padding:0 14px; min-height:0}
.lb-stage img{max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.5); transition:filter .25s ease}
.lb-stage img.lb-loading{filter:blur(14px)}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:1.6rem; display:flex; align-items:center; justify-content:center; transition:.2s}
.lb-nav:hover{background:rgba(255,255,255,.3)}
.lb-prev{left:18px} .lb-next{right:18px}
.lb-counter{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); color:#fff; font-size:.82rem; background:rgba(0,0,0,.4); padding:5px 14px; border-radius:var(--radius-pill)}
.lb-bottom{padding:14px 22px 22px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap}
.lb-thumbs{display:flex; gap:8px; overflow-x:auto; max-width:100%; padding:10px 22px; scrollbar-width:thin}
.lb-thumbs img{height:58px; width:78px; object-fit:cover; border-radius:7px; opacity:.5; cursor:pointer; border:2px solid transparent; transition:.18s; flex:0 0 auto}
.lb-thumbs img.active{opacity:1; border-color:var(--gold-2)}
.lb-price{color:#fff; font-weight:700} .lb-price b{font-family:var(--ff-fun); color:var(--gold-2); font-size:1.3rem}

/* ---------------- Rodapé ---------------- */
.site-footer{background:var(--blue); color:#cfe1f6; padding:48px 0 30px; margin-top:10px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
.site-footer img.flogo{height:60px; margin-bottom:14px}
.site-footer h4{color:#fff; font-family:var(--ff-fun); font-size:1.05rem; margin:0 0 14px}
.site-footer a:hover{color:#fff}
.footer-contact li{display:flex; gap:9px; margin-bottom:9px; font-size:.92rem; list-style:none}
.footer-contact{padding:0; margin:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15); margin-top:30px; padding-top:18px; font-size:.82rem; color:#cfe1f6; text-align:center}

/* WhatsApp flutuante */
.wa-float{position:fixed; right:22px; bottom:22px; z-index:50; width:60px; height:60px; border-radius:50%; background:#0B7A38; box-shadow:var(--shadow-float); display:flex; align-items:center; justify-content:center; transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px; height:32px; fill:#fff}

.empty{grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted)}

@media (max-width:720px){
  .chips{display:none}
  .filter-select{display:block}
  .header-link.hide-sm{display:none}
  .footer-grid{grid-template-columns:1fr; gap:24px}
  .card-actions{grid-template-columns:1fr 1fr}
  .hero{padding:46px 0 70px}
  .lb-thumbs{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}
:focus-visible{outline:3px solid var(--gold-2); outline-offset:2px; border-radius:6px}