/* ── ARCHITECTURAL PREMIUM THEME ── */
:root {
  /* Base Palette */
  --black: #0A0A0A;
  --white: #FFFFFF;
  --gold: #C5A059; /* Sophisticated Architectural Gold */
  --gold-dk: #A68045;
  --gold-lt: #DBC49E;
  --gold-glow: rgba(197, 160, 89, 0.3);

  --green-vivid: #1B4332; /* Deep Forest Green */
  --red-vivid: #7B1B1B; /* Deep Burgundy */
  --blue-vivid: #1A365D; /* Deep Navy */

  /* Legacy Map & Component Colors */
  --green: var(--gold); 
  --green-dk: var(--gold-dk);
  --green-mid: var(--gold);
  --green-lt: #FAF7F0;
  
  --ink: #0F0F0F;
  --ink-2: #1E1E1E;
  --ink-3: #2D2D2D;
  
  --paper: #FFFFFF;
  --cloud: #F2F4F7;
  --mist: #667085;
  --slate: #475467;
  --fog: #D0D5DD;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #C5A059 0%, #A68045 100%);
  --grad-gold: linear-gradient(135deg, #C5A059, #8C6F39);
  --grad-hero: linear-gradient(165deg, #050505 0%, #1A1A1A 100%);
}

/* ── BAR COLORS ── */
#adminBar { 
  background: linear-gradient(90deg, #6B0000 0%, #A00000 40%, #B22222 60%, #6B0000 100%) !important; 
  border-bottom: 2px solid #FF4444 !important; 
}
#topInfoBar { 
  background: linear-gradient(90deg, #001233 0%, #002766 40%, #003399 60%, #001233 100%) !important; 
  border-bottom: 2px solid #0066FF !important; 
  display: flex !important; /* Ensure visibility on desktop */
}
.navbar { 
  background: rgba(10, 10, 10, 0.98) !important; 
  border-bottom: 2px solid #FFD700 !important; 
}

/* ── CINEMATIC HERO EFFECTS ── */
.hero { position:relative; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition: filter 0.5s ease; }

.hero-3d-zoom {
  animation: kenBurns 20s ease-in-out infinite alternate;
  transform: scale(1.1);
}
@keyframes kenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.15) translate(-1%, -1%); }
}

.hero-video-bg {
  width:100%; height:100%; object-fit:cover;
  position:absolute; inset:0;
}

.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   HEADER SYSTEM — 3-layer stack (Admin + Info Bar + Navbar)
══════════════════════════════════════════════════════════ */

/* ── 1. ADMIN BAR ─────────────────────────────────────── */
#adminBar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 44px; z-index: 10000;
  background: linear-gradient(90deg, #6B0000 0%, #A00000 40%, #B22222 60%, #6B0000 100%);
  border-bottom: 2px solid #FF6666;
  align-items: center; padding: 0 20px; gap: 3px;
  overflow-x: auto; white-space: nowrap;
}
#adminBar::-webkit-scrollbar { height: 2px }
#adminBar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 2px }
.ab-brand {
  display: flex; align-items: center; gap: 7px;
  margin-right: 12px; flex-shrink: 0;
}
.ab-brand-icon {
  width: 24px; height: 24px; border-radius: 5px;
  background: #FFD700;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.ab-brand-text {
  font-size: .68rem; font-weight: 800; color: #FFD700;
  text-transform: uppercase; letter-spacing: .08em;
}
.ab-div { width: 1px; height: 16px; background: rgba(255, 255, 255, .25); margin: 0 8px; flex-shrink: 0 }
.ab-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 6px;
  font-size: .73rem; font-weight: 700; color: rgba(255, 220, 220, .85);
  text-decoration: none; transition: all .15s; flex-shrink: 0;
}
.ab-link:hover, .ab-link.active {
  background: rgba(255, 255, 255, .2); color: #FFD700;
}
.ab-link.active { background: rgba(255, 255, 255, .25); color: #FFD700 }
.ab-right {
  margin-left: auto; display: flex; align-items: center;
  gap: 8px; flex-shrink: 0;
}
.ab-view-site {
  font-size: .7rem; color: rgba(255, 255, 255, .55);
  padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px; text-decoration: none; transition: all .15s;
}
.ab-view-site:hover { color: #fff; border-color: rgba(255, 255, 255, .5) }
.ab-user { font-size: .7rem; color: rgba(255, 255, 255, .4) }

/* ── 2. TOP INFO BAR ──────────────────────────────────── */
#topInfoBar {
  position: fixed;
  left: 0; right: 0;
  top: var(--admin-h);
  height: var(--tib-h);
  z-index: 9999;
  background: linear-gradient(90deg, #001233 0%, #002766 40%, #003399 60%, #001233 100%);
  border-bottom: 2px solid #3399FF;
  display: flex; align-items: center;
  padding: 0 28px; gap: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  transition: all .25s ease;
  overflow: hidden;
}
.tib-left { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0 }
.tib-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0 }
.tib-dot { width: 5px; height: 5px; border-radius: 50%; background: #66BBFF;
  box-shadow: 0 0 6px #66BBFF; animation: tibp 2s ease-in-out infinite; flex-shrink: 0 }
@keyframes tibp { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .5; transform: scale(1.5) } }
.tib-item {
  display: flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, .5); font-size: .72rem; font-weight: 600;
  text-decoration: none; transition: color .15s; white-space: nowrap;
}
.tib-item:hover { color: rgba(255, 255, 255, .9) }
.tib-item svg { opacity: .5; flex-shrink: 0 }
.tib-item:hover svg { opacity: 1 }
.tib-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .1) }
.tib-wa {
  display: flex; align-items: center; gap: 5px;
  background: rgba(37, 211, 102, .14); border: 1px solid rgba(37, 211, 102, .25);
  border-radius: 20px; padding: 3px 10px 3px 7px;
  color: #25d366; font-weight: 700; font-size: .7rem; cursor: pointer;
  transition: all .15s;
}
.tib-wa:hover { background: rgba(37, 211, 102, .25) }
.tib-follow { font-size: .64rem; font-weight: 800; color: rgba(255, 255, 255, .22);
  letter-spacing: .1em; text-transform: uppercase; margin-right: 6px }
.tib-social {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .4); border: 1px solid rgba(255, 255, 255, .1);
  transition: all .15s; font-size: .72rem; text-decoration: none;
}
.tib-social:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .3) }

/* ── 3. NAVBAR ────────────────────────────────────────── */
.navbar {
  position: fixed !important;
  left: 0; right: 0; 
  top: calc(var(--admin-h) + var(--tib-h)) !important;
  height: var(--nav-h);
  z-index: 9997 !important;
  transition: all .25s ease !important;
}

/* ── BODY SPACER ──────────────────────────────────────── */
#headerSpacer { 
  height: var(--header-h);
  display: block;
  width: 100%;
}

/* ── WHATSAPP WIDGET ──────────────────────────────────── */
.wa-widget { position: fixed; bottom: 28px; right: 28px; z-index: 9998;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px }
.wa-bubble { width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(145deg, #1db954, #25d366);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 28px rgba(37, 211, 102, .45), 0 2px 8px rgba(0, 0, 0, .15);
  border: 3px solid rgba(255, 255, 255, .2); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s }
.wa-bubble:hover { transform: scale(1.1) rotate(-5deg); box-shadow: 0 10px 38px rgba(37, 211, 102, .6) }
.wa-notif { position: absolute; top: -3px; right: -3px; width: 18px; height: 18px;
  border-radius: 50%; background: #B30000; color: #fff; font-size: .58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
  animation: tibp 2s ease-in-out infinite }
.wa-panel { width: 320px; background: #fff; border-radius: 20px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, .2); overflow: hidden;
  animation: wpin .3s cubic-bezier(.34, 1.56, .64, 1) }
@keyframes wpin { from { transform: scale(.85) translateY(20px); opacity: 0 } }
.wa-panel-head { background: linear-gradient(135deg, #075e54, #128c7e); padding: 16px 18px 20px; position: relative; overflow: hidden }
.wa-panel-head::before { content: ''; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255, 255, 255, .05) }
.wa-head-av { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border: 2px solid rgba(255, 255, 255, .25); flex-shrink: 0 }
.wa-head-name { font-size: .88rem; font-weight: 800; color: #fff }
.wa-head-stat { font-size: .7rem; color: rgba(255, 255, 255, .65); display: flex; align-items: center; gap: 4px; margin-top: 2px }
.wa-head-close { position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: .85rem; border: none; transition: background .15s }
.wa-head-close:hover { background: rgba(255, 255, 255, .25) }
.wa-body { background: #e5ddd5; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 100px }
.wa-msg-in { background: #fff; border-radius: 0 12px 12px 12px; padding: 10px 13px; font-size: .82rem; color: #111; line-height: 1.55; max-width: 90%; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); position: relative }
.wa-msg-in::before { content: ''; position: absolute; top: 0; left: -7px; border: 7px solid transparent; border-right-color: #fff; border-top-color: #fff }
.wa-msg-out { background: #dcf8c6; border-radius: 12px 0 12px 12px; padding: 10px 13px; font-size: .82rem; color: #111; line-height: 1.55; max-width: 90%; align-self: flex-end; box-shadow: 0 1px 3px rgba(0, 0, 0, .08) }
.wa-msg-time { font-size: .63rem; color: #aaa; text-align: right; margin-top: 3px }
.wa-footer { padding: 10px 12px; background: #f0f0f0; border-top: 1px solid #ddd; display: flex; align-items: flex-end; gap: 8px }
.wa-input { flex: 1; border: none; outline: none; background: #fff; border-radius: 20px; padding: 9px 14px; font-size: .82rem; font-family: 'Plus Jakarta Sans', sans-serif; resize: none; max-height: 90px; min-height: 38px; line-height: 1.4; box-shadow: 0 1px 4px rgba(0, 0, 0, .07) }
.wa-send { width: 38px; height: 38px; border-radius: 50%; background: #25d366; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .2s }
.wa-send:hover { background: #1db954; transform: scale(1.1) }
.wa-powered { text-align: center; font-size: .63rem; color: #aaa; padding: 5px 0 2px }
.wa-powered a { color: #25d366; font-weight: 700 }

@media(max-width:600px) {
  #topInfoBar { display: none }
  .navbar { top: var(--admin-h) !important; height: var(--nav-h) !important; }
}

/* ── ADMIN NAV BUTTON ──────────────────────────────────── */
.btn-admin-nav {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 16px; height: 36px; border-radius: 20px;
  background: var(--green, #006400); color: #fff;
  font-size: .78rem; font-weight: 800; text-decoration: none;
  border: none; transition: all .2s; flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(0, 100, 0, .4);
}
.btn-admin-nav:hover { background: #1a7a1a; transform: translateY(-1px); }
/* ── ADMIN NAV BUTTON ──────────────────────────────────── */
.btn-admin-nav {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 16px; height: 36px; border-radius: 20px;
  background: var(--green, #006400); color: #fff;
  font-size: .78rem; font-weight: 800; text-decoration: none;
  border: none; transition: all .2s; flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(0, 100, 0, .4);
}
.btn-admin-nav:hover { background: #1a7a1a; transform: translateY(-1px); }
/* ── LANGUAGE SWITCHER ─────────────────────────────────── */
.lang-switcher {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 20px; padding: 3px; margin-right: 4px;
}
.lang-btn {
  padding: 4px 10px; border-radius: 16px; font-size: .7rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  color: rgba(255, 255, 255, .55); background: transparent; border: none;
  text-decoration: none; transition: all .15s; font-family: inherit;
}
.lang-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.lang-btn.active { background: var(--green, #006400); color: #fff; }
/* Flag emoji for lang buttons */
.lang-flag { font-size: .85rem; }

/* ── MOBILE NAV ────────────────────────────────────────── */
.nav-toggle { display: none; }
.mobile-only { display: none !important; }

@media (max-width: 1024px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }

  .navbar { background: rgba(8, 15, 10, .98) !important; backdrop-filter: blur(24px) !important; border-bottom: 1px solid rgba(255, 255, 255, .1) !important; }
  .nav-wrap { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; height: auto !important; padding: 10px 18px !important; gap: 0 !important; }
  .nav-logo { flex: 1 !important; margin-right: 0 !important; background: transparent !important; }
  .nav-right { flex: 1 !important; order: 2 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; margin-left: 0 !important; }
  .nav-toggle { display: flex !important; flex-direction: column; justify-content: center; gap: 4px; width: 32px; height: 32px; cursor: pointer; z-index: 9999 !important; }
  .nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }
  .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 4px); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -4px); }

  .nav-menu { display: none !important; }
  .nav-menu.open {
    display: flex !important; flex-direction: column !important;
    position: fixed !important; top: 64px !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: #080C0A !important; padding: 24px !important; z-index: 9998 !important; overflow-y: auto !important;
  }
  .nav-menu.open .nav-link { font-size: 1.15rem !important; padding: 18px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .05) !important; width: 100% !important; display: flex; justify-content: space-between; }

  .nav-search-form.mobile-show { 
    display: flex !important; order: 3 !important; flex: 0 0 100% !important; 
    margin: 14px 0 4px !important; padding: 0 !important; position: relative !important; 
  }
  .nav-search-form.mobile-show input { width: 100% !important; height: 44px !important; background: rgba(255, 255, 255, .08) !important; border-radius: 22px !important; padding-left: 18px !important; }
}