
/* =========================================================
   OPOSIPLUS HEADER FINAL UNIFICADO
   Desktop centrado + móvil limpio
   ========================================================= */

.opxUnifiedHeader {
  position: sticky !important;
  top: 0 !important;
  z-index: 9995 !important;
  width: 100% !important;
  min-height: 78px !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(5,5,5,.96) !important;
  border-bottom: 1px solid rgba(245,197,24,.18) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.20) !important;
}

.opxUnifiedHeaderInner {
  width: min(1280px, calc(100% - 44px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 26px !important;
}

.opxUnifiedBrand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: max-content !important;
  color: #fff7df !important;
  text-decoration: none !important;
}

.opxUnifiedBrand img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: #000 !important;
}

.opxUnifiedBrand strong {
  display: block !important;
  color: #fff7df !important;
  font-weight: 1000 !important;
  letter-spacing: .15em !important;
  line-height: 1 !important;
  font-size: .98rem !important;
}

.opxUnifiedBrand em {
  display: block !important;
  margin-top: 3px !important;
  color: #f5c518 !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-size: .62rem !important;
  line-height: 1 !important;
}

.opxUnifiedNav {
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 1.5vw, 24px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}

.opxUnifiedNav a {
  color: rgba(255,247,223,.76) !important;
  text-decoration: none !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  font-size: .82rem !important;
  white-space: nowrap !important;
}

.opxUnifiedNav a:hover {
  color: #f5c518 !important;
}

.opxUnifiedActions {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: max-content !important;
}

.opxUnifiedBtn {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 17px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  font-size: .78rem !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

.opxUnifiedGold {
  color: #050505 !important;
  background: linear-gradient(135deg,#fff1a8 0%, #f5c518 45%, #d99a00 100%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 28px rgba(245,197,24,.16) !important;
}

.opxUnifiedGold * {
  color: #050505 !important;
  text-shadow: none !important;
}

.opxUnifiedDark {
  color: #fff7df !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(245,197,24,.28) !important;
}

/* Eliminar botones flotantes antiguos que estaban duplicando CTA */
.opx-download-fab,
.opx-global-download,
.opxSingleDownloadFloat,
#opxSingleDownloadFloat,
.opx-floating-download,
.opx-download-button,
.opx-sticky-download,
.download-floating,
.floating-download,
.brand-download-float {
  display: none !important;
}

/* Móvil: el menú real lo lleva el drawer hamburguesa.
   Header: logo + descargar/entrar compacto. */
@media (max-width: 920px) {
  .opxUnifiedHeader {
    min-height: 72px !important;
  }

  .opxUnifiedHeaderInner {
    width: calc(100% - 24px) !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 10px !important;
  }

  .opxUnifiedBrand {
    margin-left: 52px !important; /* deja sitio a hamburguesa */
    min-width: 0 !important;
    gap: 9px !important;
  }

  .opxUnifiedBrand img {
    width: 38px !important;
    height: 38px !important;
  }

  .opxUnifiedBrand strong {
    max-width: 118px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .9rem !important;
    letter-spacing: .12em !important;
  }

  .opxUnifiedBrand em {
    display: none !important;
  }

  .opxUnifiedNav {
    display: none !important;
  }

  .opxUnifiedActions {
    gap: 8px !important;
    min-width: 0 !important;
  }

  .opxUnifiedBtn {
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size: .68rem !important;
    letter-spacing: .04em !important;
  }

  .opxUnifiedRegister {
    display: none !important;
  }

  .opxUnifiedDark {
    display: none !important;
  }
}

@media (max-width: 410px) {
  .opxUnifiedBrand strong {
    max-width: 104px !important;
  }

  .opxUnifiedBtn {
    padding: 0 10px !important;
    font-size: .64rem !important;
  }
}

/* =========================================================
   FIX HEADER · quitar descarga izquierda y respirar nav
   ========================================================= */

.opxUnifiedHeader .opxUnifiedActions {
  gap: 12px !important;
}

.opxUnifiedHeader .opxUnifiedNav {
  padding-inline: 12px !important;
}

.opxUnifiedHeader .opxUnifiedActions .opxUnifiedGold {
  display: none !important;
}

@media (max-width: 920px) {
  .opxUnifiedHeader .opxUnifiedActions .opxUnifiedGold {
    display: inline-flex !important;
  }
}

/* =========================================================
   FIX HEADER FINAL · quitar descargar fantasma arriba derecha
   ========================================================= */

/* En escritorio el header NO lleva descargar app.
   Descargar queda en landing, CTA estratégico o botón flotante inferior. */
@media (min-width: 921px) {
  .opxUnifiedHeader .opxUnifiedActions a[href*="descargar"],
  .opxUnifiedHeader .opxUnifiedActions .opxUnifiedGold,
  .opxUnifiedHeader a.opx-header-download,
  .opxUnifiedHeader .opx-header-download {
    display: none !important;
  }

  .opxUnifiedHeaderInner {
    width: min(1280px, calc(100% - 64px)) !important;
    grid-template-columns: auto 1fr auto !important;
  }

  .opxUnifiedActions {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
}

/* En móvil sí dejamos descargar, pero compacto y bien redondeado */
@media (max-width: 920px) {
  .opxUnifiedHeader .opxUnifiedActions a[href*="descargar"],
  .opxUnifiedHeader .opxUnifiedActions .opxUnifiedGold {
    display: inline-flex !important;
    border-radius: 999px !important;
    color: #050505 !important;
    background: linear-gradient(135deg,#fff1a8 0%,#f5c518 45%,#d99a00 100%) !important;
    text-shadow: none !important;
  }
}

