/*
 * op-nav.css — Outsourcing Processing · Navbar Custom
 * Cargado via functions.php del child theme
 * CSS completamente scoped bajo .op-nav-root — no afecta a Divi
 */

/* ── Variables scoped (no contaminan :root de Divi) ── */
.op-nav-root {
  --op-navy:       #0e1028;
  --op-navy-glass: rgba(10,12,30,0.94);
  --op-red:        #b00c12;
  --op-red-h:      #d11018;
  --op-red-glow:   rgba(176,12,18,0.35);
  --op-off:        rgba(255,255,255,0.70);
  --op-muted:      rgba(255,255,255,0.38);
  --op-border:     rgba(255,255,255,0.08);
  --op-border-lit: rgba(255,255,255,0.14);
  --op-nav-h:      68px;
  --op-ease-out:   cubic-bezier(0.22,1,0.36,1);
  font-family: 'Montserrat', sans-serif;
  color: #fff;
}

/* Reset scoped — solo dentro del nav, no aplasta a Divi */
.op-nav-root *,
.op-nav-root *::before,
.op-nav-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
.op-nav-root ul, .op-nav-root ol { list-style: none; }

/* ══ NAVBAR ══════════════════════════════════════════════════ */
.op-nav-root .op-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10100;
  height: var(--op-nav-h);
  background: var(--op-navy-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--op-border);
  display: flex;
  align-items: center;
  padding: 0 48px;
  transition: border-color 0.4s, background 0.4s;
  isolation: isolate;
}
.op-nav-root .op-nav.is-open { border-bottom-color: transparent; }
.op-nav-root .op-nav__inner {
  width: 100%; max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center;
}

/* ── Logo ── */
.op-nav-root .op-logo {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; flex-shrink: 0; margin-right: auto; outline: none;
}
.op-nav-root .op-logo__mark {
  width: 34px; height: 34px;
  background: var(--op-red); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 16px var(--op-red-glow); transition: box-shadow 0.3s;
}
.op-nav-root .op-logo__mark::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(140deg,rgba(255,255,255,0.20) 0%,transparent 55%);
}
.op-nav-root .op-logo__mark svg {
  width: 18px; height: 18px; fill: none; stroke: #fff;
  stroke-width: 1.8; stroke-linecap: round; position: relative; z-index: 1;
}
.op-nav-root .op-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.op-nav-root .op-logo__text strong { font-size: 0.88rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.op-nav-root .op-logo__text span { font-size: 0.58rem; font-weight: 500; color: var(--op-muted); letter-spacing: 0.14em; text-transform: uppercase; }

/* ── Nav list ── */
.op-nav-root .op-nav__list { display: flex; align-items: center; gap: 2px; padding: 0; margin: 0; }
.op-nav-root .op-nav__item { display: flex; align-items: center; list-style: none; position: static; }
.op-nav-root .op-nav__btn {
  display: flex; align-items: center; gap: 4px;
  padding: 0.4rem 0.9rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.73rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--op-off); text-decoration: none;
  border-radius: 6px; border: none; background: none; cursor: pointer;
  transition: color 0.2s, background 0.2s; white-space: nowrap; outline: none; position: relative;
}
.op-nav-root .op-nav__btn::after {
  content: ''; position: absolute; bottom: -1px; left: 50%; right: 50%;
  height: 1.5px; background: var(--op-red);
  transition: left 0.3s var(--op-ease-out), right 0.3s var(--op-ease-out);
}
.op-nav-root .op-nav__btn:hover,
.op-nav-root .op-nav__btn.is-active { color: #fff; }
.op-nav-root .op-nav__btn.is-active::after { left: 12px; right: 12px; }
.op-nav-root .op-nav__btn svg { width: 11px; height: 11px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: 0.5; transition: transform 0.3s var(--op-ease-out), opacity 0.2s; }
.op-nav-root .op-nav__btn.is-active svg { transform: rotate(180deg); opacity: 1; }

/* ── CTA ── */
.op-nav-root .op-nav__cta {
  margin-left: 28px; flex-shrink: 0;
  padding: 0.46rem 1.3rem;
  background: var(--op-red); color: #fff; border-radius: 6px;
  font-size: 0.73rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 20px var(--op-red-glow);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s; white-space: nowrap; outline: none;
}
.op-nav-root .op-nav__cta:hover { background: var(--op-red-h); box-shadow: 0 0 32px rgba(176,12,18,0.55); transform: translateY(-1px); }

/* ── Hamburger ── */
.op-nav-root .op-hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; border: none; background: none; cursor: pointer;
  border-radius: 6px; transition: background 0.2s; outline: none; flex-shrink: 0; margin-left: 16px;
}
.op-nav-root .op-hamburger:hover { background: rgba(255,255,255,0.06); }
.op-nav-root .op-hamburger span {
  display: block; width: 22px; height: 1.5px; background: #fff; border-radius: 2px;
  transition: transform 0.3s var(--op-ease-out), opacity 0.3s; transform-origin: center;
}
.op-nav-root .op-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.op-nav-root .op-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.op-nav-root .op-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ══ OVERLAY ══════════════════════════════════════════════════ */
.op-nav-root .op-overlay {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(0,0,0,0.52);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--op-ease-out);
}
.op-nav-root .op-overlay.is-active { opacity: 1; pointer-events: auto; }

/* ══ MEGA PANEL ═══════════════════════════════════════════════ */
.op-nav-root .op-mega {
  position: fixed; top: var(--op-nav-h); left: 0; right: 0; z-index: 10099;
  background: rgba(9,11,28,0.96);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.08);
  border-bottom: 1px solid var(--op-border-lit);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 32px 80px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none;
  transition: opacity 0.38s var(--op-ease-out), transform 0.38s var(--op-ease-out), visibility 0s linear 0.38s;
}
.op-nav-root .op-mega::before {
  content: ''; position: absolute; top: -24px; left: 0; right: 0; height: 24px;
  pointer-events: auto; z-index: 1;
}
.op-nav-root .op-mega.is-open {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  transition: opacity 0.38s var(--op-ease-out), transform 0.38s var(--op-ease-out), visibility 0s linear 0s;
}
.op-nav-root .op-mega__wrap {
  width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 0; min-height: 340px;
}
.op-nav-root .op-mega__divider { background: var(--op-border); margin: 40px 0; }
.op-nav-root .op-mega__col { padding: 44px 48px; display: flex; flex-direction: column; }
.op-nav-root .op-mega__col:first-child { padding-left: 0; }
.op-nav-root .op-mega__col:last-child  { padding-right: 0; }
.op-nav-root .op-mega__section-label {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--op-muted); margin-bottom: 28px; position: relative; padding-left: 14px;
}
.op-nav-root .op-mega__section-label::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--op-red);
}

/* ── Service items ── */
.op-nav-root .svc-item {
  display: flex; align-items: flex-start; gap: 16px; padding: 14px 12px;
  border-radius: 10px; text-decoration: none; border: 1px solid transparent;
  transition: background 0.22s, border-color 0.22s; opacity: 0; transform: translateY(10px);
}
.op-nav-root .op-mega.is-open .svc-item { animation: opItemIn 0.42s var(--op-ease-out) both; }
.op-nav-root .op-mega.is-open .svc-item:nth-child(2) { animation-delay: 0.08s; }
.op-nav-root .op-mega.is-open .svc-item:nth-child(3) { animation-delay: 0.13s; }
.op-nav-root .op-mega.is-open .svc-item:nth-child(4) { animation-delay: 0.18s; }
.op-nav-root .op-mega.is-open .svc-item:nth-child(5) { animation-delay: 0.23s; }
@keyframes opItemIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.op-nav-root .svc-item:hover { background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.10); }
.op-nav-root .svc-item:hover .svc-icon { color: var(--op-red); border-color: rgba(176,12,18,0.45); }
.op-nav-root .svc-item:hover .svc-title { color: #fff; }
.op-nav-root .svc-icon {
  width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--op-border-lit); border-radius: 9px; color: rgba(255,255,255,0.55);
  transition: color 0.22s, border-color 0.22s; margin-top: 2px;
}
.op-nav-root .svc-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.op-nav-root .svc-body { flex: 1; min-width: 0; }
.op-nav-root .svc-title { font-size: 0.84rem; font-weight: 700; color: rgba(255,255,255,0.88); line-height: 1.3; margin-bottom: 5px; transition: color 0.22s; }
.op-nav-root .svc-desc { font-size: 0.70rem; color: rgba(255,255,255,0.46); line-height: 1.65; }
.op-nav-root .svc-badge {
  display: inline-block; margin-top: 6px; font-size: 0.52rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px;
  background: rgba(176,12,18,0.22); color: #ff8a8e; border: 1px solid rgba(176,12,18,0.38);
}

/* ── Tool items ── */
.op-nav-root .tool-grid { display: flex; flex-direction: column; gap: 6px; }
.op-nav-root .tool-item {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px;
  border-radius: 9px; text-decoration: none; border: 1px solid transparent;
  transition: background 0.22s, border-color 0.22s; opacity: 0; transform: translateX(-8px);
}
.op-nav-root .op-mega.is-open .tool-item { animation: opToolIn 0.40s var(--op-ease-out) both; }
.op-nav-root .op-mega.is-open .tool-item:nth-child(1) { animation-delay: 0.10s; }
.op-nav-root .op-mega.is-open .tool-item:nth-child(2) { animation-delay: 0.15s; }
.op-nav-root .op-mega.is-open .tool-item:nth-child(3) { animation-delay: 0.20s; }
.op-nav-root .op-mega.is-open .tool-item:nth-child(4) { animation-delay: 0.25s; }
.op-nav-root .op-mega.is-open .tool-item:nth-child(5) { animation-delay: 0.30s; }
.op-nav-root .op-mega.is-open .tool-item:nth-child(6) { animation-delay: 0.35s; }
@keyframes opToolIn { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
.op-nav-root .tool-item:hover { background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.10); }
.op-nav-root .tool-item:hover .tool-icon { color: var(--op-red); }
.op-nav-root .tool-item:hover .tool-name { color: #fff; }
.op-nav-root .tool-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.42); transition: color 0.22s; }
.op-nav-root .tool-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.op-nav-root .tool-name { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.72); transition: color 0.22s; }
.op-nav-root .tool-sub { margin-left: auto; font-size: 0.62rem; font-weight: 500; color: rgba(255,255,255,0.28); flex-shrink: 0; }

/* ── Featured col ── */
.op-nav-root .feat-wrap { display: flex; flex-direction: column; gap: 16px; opacity: 0; }
.op-nav-root .op-mega.is-open .feat-wrap { animation: opFeatIn 0.50s var(--op-ease-out) 0.16s both; }
@keyframes opFeatIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.op-nav-root .feat-card {
  flex: 1;
  background: linear-gradient(145deg, rgba(176,12,18,0.18) 0%, rgba(14,16,40,0.60) 55%, rgba(8,10,24,0.80) 100%);
  border: 1px solid rgba(176,12,18,0.28); border-radius: 14px; padding: 32px 28px;
  position: relative; overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  transition: border-color 0.3s, box-shadow 0.3s; cursor: pointer; outline: none;
}
.op-nav-root .feat-card::before {
  content: ''; position: absolute; top: -60%; right: -15%; width: 240px; height: 240px;
  background: radial-gradient(circle,rgba(176,12,18,0.28) 0%,transparent 65%); pointer-events: none;
}
.op-nav-root .feat-card:hover { border-color: rgba(176,12,18,0.55); box-shadow: 0 12px 44px rgba(176,12,18,0.20); }
.op-nav-root .feat-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 0.57rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #ff8a8d; margin-bottom: 14px; }
.op-nav-root .feat-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--op-red); flex-shrink: 0; animation: opPulse 2.2s ease-in-out infinite; }
@keyframes opPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.35; transform:scale(0.55); } }
.op-nav-root .feat-title { font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 10px; }
.op-nav-root .feat-desc { font-size: 0.70rem; color: rgba(255,255,255,0.52); line-height: 1.65; flex: 1; margin-bottom: 22px; }
.op-nav-root .feat-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.70rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  background: linear-gradient(130deg,#d11018 0%,#960a0f 100%);
  padding: 0.5rem 1.15rem; border-radius: 7px; align-self: flex-start;
  box-shadow: 0 2px 18px rgba(176,12,18,0.40); transition: gap 0.22s, box-shadow 0.22s, background 0.22s;
}
.op-nav-root .feat-card:hover .feat-btn { gap: 13px; background: linear-gradient(130deg,#e8121a 0%,#b00c12 100%); box-shadow: 0 4px 28px rgba(176,12,18,0.55); }
.op-nav-root .feat-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.op-nav-root .feat-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op-nav-root .quick-card {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  background: rgba(255,255,255,0.045); border: 1px solid var(--op-border); border-radius: 10px;
  text-decoration: none; transition: background 0.22s, border-color 0.22s, transform 0.18s; outline: none;
}
.op-nav-root .quick-card:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.20); transform: translateY(-2px); }
.op-nav-root .quick-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.op-nav-root .quick-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.op-nav-root .qi-red   { background: rgba(176,12,18,0.20);  color: #ff8a8d; }
.op-nav-root .qi-blue  { background: rgba(60,110,220,0.22); color: #90b4ff; }
.op-nav-root .qi-green { background: rgba(30,180,110,0.20); color: #6ee7b7; }
.op-nav-root .qi-gold  { background: rgba(200,150,0,0.20);  color: #fcd34d; }
.op-nav-root .quick-label { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.80); }

/* ══ MOBILE ═══════════════════════════════════════════════════ */
.op-nav-root .op-mob-nav { position: fixed; inset: 0; z-index: 10200; pointer-events: none; }
.op-nav-root .op-mob-nav__bg { position: absolute; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.35s var(--op-ease-out); }
.op-nav-root .op-mob-nav__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(340px,88vw);
  background: #0e1028; border-left: 1px solid var(--op-border-lit);
  box-shadow: -24px 0 80px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.38s var(--op-ease-out);
  overflow-y: auto; overscroll-behavior: contain;
}
.op-nav-root .op-mob-nav.is-open { pointer-events: auto; }
.op-nav-root .op-mob-nav.is-open .op-mob-nav__bg { opacity: 1; }
.op-nav-root .op-mob-nav.is-open .op-mob-nav__panel { transform: translateX(0); }
.op-nav-root .op-mob-header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.25rem 1rem; border-bottom: 1px solid var(--op-border); flex-shrink: 0; }
.op-nav-root .op-mob-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; background: rgba(255,255,255,0.06); border-radius: 7px; cursor: pointer; color: #fff; transition: background 0.2s; outline: none; }
.op-nav-root .op-mob-close:hover { background: rgba(255,255,255,0.12); }
.op-nav-root .op-mob-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.op-nav-root .op-mob-menu { flex: 1; padding: 0.5rem 0; }
.op-nav-root .op-mob-link { display: block; padding: 0.72rem 1.25rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; color: rgba(255,255,255,0.72); text-decoration: none; transition: color 0.18s, background 0.18s; }
.op-nav-root .op-mob-link:hover { color: #fff; background: rgba(255,255,255,0.04); }
.op-nav-root .op-mob-acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.72rem 1.25rem; font-family: 'Montserrat',sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; color: rgba(255,255,255,0.72); background: none; border: none; cursor: pointer; text-align: left; outline: none; transition: color 0.18s, background 0.18s; }
.op-nav-root .op-mob-acc__btn:hover,
.op-nav-root .op-mob-acc__btn[aria-expanded="true"] { color: #fff; }
.op-nav-root .op-mob-acc__btn[aria-expanded="true"] { background: rgba(255,255,255,0.03); }
.op-nav-root .op-mob-acc__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; transition: transform 0.28s var(--op-ease-out); }
.op-nav-root .op-mob-acc__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.op-nav-root .op-mob-acc__body { max-height: 0; overflow: hidden; transition: max-height 0.38s var(--op-ease-out); }
.op-nav-root .op-mob-acc__body.is-open { max-height: 640px; }
.op-nav-root .op-mob-svc { display: flex; align-items: flex-start; gap: 12px; padding: 0.58rem 1.25rem 0.58rem 1.75rem; text-decoration: none; transition: background 0.18s; }
.op-nav-root .op-mob-svc:hover { background: rgba(255,255,255,0.04); }
.op-nav-root .op-mob-svc__icon { width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.40); }
.op-nav-root .op-mob-svc__icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.op-nav-root .op-mob-svc__name { font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.78); }
.op-nav-root .op-mob-divider { height: 1px; background: var(--op-border); margin: 0.3rem 1.25rem; }
.op-nav-root .op-mob-cta-wrap { padding: 1rem 1.25rem; border-top: 1px solid var(--op-border); flex-shrink: 0; }
.op-nav-root .op-mob-cta-wrap a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0.82rem; background: var(--op-red); color: #fff; border-radius: 9px; text-decoration: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; box-shadow: 0 2px 18px var(--op-red-glow); transition: background 0.2s; outline: none; }
.op-nav-root .op-mob-cta-wrap a:hover { background: var(--op-red-h); }

/* ── Responsive ── */
@media (max-width: 960px) {
  .op-nav-root .op-nav__list, .op-nav-root .op-nav__cta { display: none; }
  .op-nav-root .op-hamburger { display: flex; }
  .op-nav-root .op-mega { display: none !important; }
}
@media (min-width: 961px) {
  .op-nav-root .op-mob-nav { display: none; }
}