/* ============================================================
 * header-trending.css · v2 · 2026-05-09
 * EXACT mirror of beta header rules. Pro hidden per directive.
 * Uses .oc-X classes (markup must match).
 * ============================================================ */

.oc-header {
  background: linear-gradient(180deg, #0f1f3d 0%, #1b3a6b 50%, #2d5a9e 100%) !important;
  color: white !important;
  padding: 16px 28px 14px !important;
  position: relative !important;
  overflow: hidden !important;
}
.oc-header::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(245,158,11,0.10), transparent 45%);
  pointer-events: none;
}
.oc-header-brand {
  display: flex !important; align-items: center !important; gap: 16px !important;
  max-width: 1200px !important; margin: 0 auto !important;
  position: relative !important; z-index: 1 !important;
  flex-wrap: wrap;
}
.oc-logo-link {
  display: inline-flex !important; flex-shrink: 0 !important;
  transition: opacity .15s, transform .15s;
}
.oc-logo-link:hover { opacity: .9; transform: scale(1.02); }
.oc-logo {
  height: 54px !important; width: auto !important; display: block !important;
}
.oc-header-tagline p {
  margin: 0 !important;
  font-family: var(--font, "Inter", sans-serif) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.85) !important;
  max-width: 720px !important;
  opacity: 1 !important;
}
.oc-header-tagline strong { color: white !important; font-weight: 600 !important; }

.oc-nav {
  margin-top: 12px !important;
  max-width: 1200px !important;
  margin-left: auto !important; margin-right: auto !important;
  display: flex !important; align-items: center !important;
  gap: 22px !important;
  flex-wrap: wrap !important;
  position: relative !important; z-index: 1 !important;
  overflow: visible;
}
.oc-nav a {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  padding-bottom: 3px !important;
  border-bottom: 2px solid transparent !important;
  transition: color .15s, border-color .15s !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.oc-nav a:hover, .oc-nav a.activo {
  color: white !important;
  border-bottom-color: white !important;
}
.oc-nav-low {
  font-size: 13.5px !important;
  color: rgba(255,255,255,0.65) !important;
}
.oc-nav-low:hover { color: white !important; }
.oc-nav-low svg { color: currentColor !important; }
.oc-nav-badge {
  background: #fbbf24;
  color: #0f1f3d;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Pro DISABLED on oficioycircular.cl per directive 2026-05-09 (no launch yet) */
.oc-nav .nav-pro-highlight,
.oc-nav a.nav-pro-highlight,
.oc-nav a[href="/pro-v4"],
.oc-nav a[href="/pro-v2.html"],
.oc-nav a[href*="/pro"],
.oc-nav #nav-pro { display: none !important; }

/* ============ MOBILE ≤720px (mirror of beta) ============ */
@media (max-width: 720px) {
  .oc-header { padding: 14px 16px 12px !important; }
  .oc-header-brand { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .oc-header-tagline p { font-size: 12.5px !important; }
  .oc-nav {
    gap: 14px !important;
    font-size: 13px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }
  .oc-nav::-webkit-scrollbar { display: none; }
  .oc-nav a { white-space: nowrap !important; }
}

/* ============ MOBILE: hide tagline copy on prod (per user 2026-05-09) ============ */
@media (max-width: 720px) {
  header .header-brand-text,
  header .oc-header-tagline,
  header p.subtitulo { display: none !important; }
}