:root{
  --bg:#0f1635;
  --bg2:#121b44;
  --card:#0b112b;
  --text:#f3f5ff;
  --muted:rgba(243,245,255,.78);
  --gold:#c9a23a;
  --gold2:#e5c86a;
  --line:rgba(255,255,255,.12);
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 600px at 10% 0%, rgba(201,162,58,.18), transparent 55%),
    radial-gradient(900px 600px at 95% 15%, rgba(229,200,106,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), #080d22 70%);
  line-height:1.45;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(1120px, 92vw); margin:0 auto}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(15,22,53,.62);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:12px;
}
.brand{
  display:flex; align-items:center; gap:12px; min-width:210px;
}
.brand img{width:44px; height:44px; border-radius:12px; box-shadow: 0 12px 30px rgba(0,0,0,.25)}
.brand .t1{font-weight:800; letter-spacing:.3px}
.brand .t2{font-size:12.5px; color:var(--muted)}
.menu{
  display:flex; align-items:center; gap:18px;
}
.menu a{
  font-weight:650;
  color:var(--muted);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
}
.menu a:hover{color:var(--text); border-color:rgba(201,162,58,.35); background:rgba(201,162,58,.08)}
.actions{display:flex; gap:10px; align-items:center}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid rgba(201,162,58,.35);
  background: rgba(201,162,58,.10);
  color:var(--text);
  font-weight:800;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.btn:hover{background: rgba(201,162,58,.16)}
.btn.primary{
  border-color: rgba(229,200,106,.55);
  background: linear-gradient(135deg, rgba(201,162,58,.25), rgba(229,200,106,.10));
}
.btn svg{width:18px;height:18px}

.hamburger{
  display:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:14px;
  padding:10px 12px;
}

.hero{
  padding:52px 0 18px;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:stretch;
}
.heroCard{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,17,43,.55);
}
.heroMedia{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.1) contrast(1.05);
  transform: scale(1.03);
}
.heroOverlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(8,13,34,.84), rgba(8,13,34,.55) 55%, rgba(8,13,34,.18));
}
.heroContent{
  position:relative;
  padding:34px 30px;
  min-height: 430px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  font-weight:900;
  color: rgba(229,200,106,.95);
  letter-spacing:.2px;
  text-transform:uppercase;
  font-size:12px;
}
.kicker .dot{width:9px;height:9px;border-radius:50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(201,162,58,.18)}
h1{
  margin:12px 0 10px;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height:1.05;
  letter-spacing:-.8px;
}
.lead{color:var(--muted); font-size: 16.5px; max-width: 62ch}
.heroBtns{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}

.statRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:18px;
}
.stat{
  padding:14px 14px;
  border-radius:18px;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.10);
}
.stat b{display:block; font-size:18px}
.stat span{display:block; font-size:12.5px; color:var(--muted); margin-top:3px}

.sideStack{
  display:grid; gap:14px;
}
.sideCard{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,17,43,.55);
  box-shadow: var(--shadow);
}
.sideCard .pad{padding:18px 18px}
.badge{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(201,162,58,.35);
  background: rgba(201,162,58,.10);
  color: rgba(229,200,106,.95);
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.2px;
}
.sideCard h3{margin:12px 0 8px; font-size:18px}
.sideCard p{margin:0; color:var(--muted)}
.sideCard .mini{
  display:flex; gap:12px; align-items:center; margin-top:14px
}
.mini img{width:58px;height:58px;border-radius:18px;background:#0b112b;border:1px solid rgba(255,255,255,.10); padding:8px}

.section{padding:42px 0}
.section h2{
  font-size: clamp(22px, 3vw, 32px);
  margin:0 0 12px;
  letter-spacing:-.4px;
}
.section p{color:var(--muted); margin:0 0 14px}

.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,17,43,.55);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .pad{padding:18px}
.card h3{margin:4px 0 6px}
.card ul{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.card li{margin:6px 0}

.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:10px;
}
.gitem{
  grid-column: span 4;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#0b112b;
  cursor:pointer;
  position:relative;
  min-height: 160px;
}
.gitem img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .35s ease;
}
.gitem:hover img{transform: scale(1.04)}
.gitem .tag{
  position:absolute; left:10px; top:10px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(8,13,34,.70);
  border:1px solid rgba(255,255,255,.16);
  font-size:12px;
  color: rgba(229,200,106,.95);
  font-weight:800;
}

.twoCol{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:stretch;
}

.embedBox{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,17,43,.55);
  box-shadow: var(--shadow);
}
.embedBox .head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.embedBox .head b{letter-spacing:.2px}
.embedBox .head a{color: rgba(229,200,106,.95); font-weight:900}
.embedBox iframe{width:100%; border:0; height: 520px; background:#0b112b}

.mapWrap iframe{height: 420px}

.form{
  display:grid; gap:10px;
}
.input{
  width:100%;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline:none;
}
textarea.input{min-height:120px; resize:vertical}
.input:focus{border-color: rgba(229,200,106,.55); box-shadow: 0 0 0 5px rgba(201,162,58,.16)}

.footer{
  padding:22px 0 46px;
  border-top:1px solid rgba(255,255,255,.10);
  color: var(--muted);
}
.footer .row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center}
.footer .miniLogo{display:flex; gap:10px; align-items:center}
.footer .miniLogo img{width:34px;height:34px;border-radius:12px; border:1px solid rgba(255,255,255,.10); background:#0b112b; padding:6px}
.small{font-size:12.5px}

.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:100;
  width:58px;height:58px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(37,211,102,.22);
  border:1px solid rgba(37,211,102,.45);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.whatsapp-float:hover{background: rgba(37,211,102,.30)}
.whatsapp-float svg{width:26px;height:26px}

.lightbox{
  position:fixed; inset:0; z-index:200;
  display:none;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,.72);
  padding:18px;
}
.lightbox.open{display:flex}
.lightbox .panel{
  width:min(1100px, 96vw);
  background: rgba(11,17,43,.85);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.lightbox .top{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.lightbox .top b{color: rgba(229,200,106,.95)}
.lightbox .x{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:var(--text);
  border-radius: 14px;
  padding:10px 12px;
  cursor:pointer;
}
.lightbox img{width:100%; height:auto; display:block; max-height: 78vh; object-fit:contain; background:#0b112b}

@media (max-width: 980px){
  .heroGrid{grid-template-columns: 1fr; }
  .heroContent{min-height: 420px}
  .grid3{grid-template-columns: 1fr}
  .twoCol{grid-template-columns: 1fr}
  .gallery{grid-template-columns: repeat(6, 1fr)}
  .gitem{grid-column: span 3}
  .menu{display:none}
  .hamburger{display:inline-flex}
  .actions{gap:8px}
}
@media (max-width: 560px){
  .statRow{grid-template-columns: 1fr}
  .gallery{grid-template-columns: repeat(4, 1fr)}
  .gitem{grid-column: span 4}
  .heroContent{padding:26px 18px}
}