:root{
  --nav-h: 110px;
}

@media (max-width: 991px){
  :root{ --nav-h: 90px; }
}

@media (max-width: 575px){
  :root{ --nav-h: 78px; }
}

/* ===== HEADER ===== */
.header__area,
.header__area.pos-abs{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 1000000 !important;
  background: #0c1014;
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  border-top: 8px solid #0a2e52;
  border-left: 8px solid #0a2e52;
  border-right: 8px solid #0a2e52;
}

.header__inner{
  height: 100%;
  display: flex;
  align-items: center;
}

.header__inner,
.header__others,
.header__offcanvas{
  overflow: visible !important;
}

.main-menu > ul > li > a{
  color: #fff !important;
}

.main-menu > ul > li > a:hover{
  color: #c59d5f !important;
}

body{
  padding-top: var(--nav-h);
}

/* ===== OFFCANVAS GENERAL ===== */
.offcanvas__area{
  position: fixed !important;
  top: var(--nav-h) !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(420px, 100%) !important;
  height: calc(100vh - var(--nav-h)) !important;
  z-index: 999000 !important;
}

.offcanvas__inner{
  height: 100% !important;
  overflow-y: auto !important;
}

.offcanvas__overlay,
.body-overlay,
.offcanvas-overlay{
  position: fixed !important;
  top: var(--nav-h) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 998500 !important;
}

/* ===== TOP DEL MENÚ MOBILE ===== */
.offcanvas__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#offcanvas_close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* evita que el logo empuje el close */
.offcanvas__top img{
  max-width: 180px;
  height: auto;
}