/* ==========================================================================
   DESARROLLOWEB.US — CABECERA GLOBAL UNIFICADA (HEADER & NAV SYSTEM)
   Garantiza coherencia visual idéntica en todas las páginas internas.
   ========================================================================== */

:root {
  --header-h: 72px;
  --header-bg: rgba(255, 255, 255, 0.95);
  --header-border: rgba(226, 232, 240, 0.85);
  --header-primary: #1766FF;
  --header-primary-hover: #0E52D9;
  --header-dark: #0B1633;
  --header-text: #526079;
  --header-text-hover: #1766FF;
}

/* 01. Contenedor de la Cabecera Fija */
.site-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: var(--header-bg) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--header-border) !important;
  box-shadow: 0 1px 3px rgba(11, 22, 51, 0.03) !important;
}

.site-header .nav-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: var(--header-h) !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* 02. Logo Institucional */
.site-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.site-logo .logo-symbol {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
}

.site-logo-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.site-logo-brand {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.03em !important;
  color: var(--header-dark) !important;
  line-height: 1.15 !important;
}

.site-logo-brand .brand-dot-us {
  color: var(--header-primary) !important;
}

.site-logo-tagline {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.65rem !important;
  color: #64748B !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* 03. Enlaces de Navegación Desktop */
.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-links > li {
  position: relative !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
}

.nav-link {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.90rem !important;
  font-weight: 500 !important;
  color: var(--header-text) !important;
  text-decoration: none !important;
  position: relative !important;
  padding: 8px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: color 0.18s ease !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}

.nav-link:hover {
  color: var(--header-primary) !important;
}

.nav-link.active {
  color: var(--header-primary) !important;
  font-weight: 650 !important;
}

.nav-link.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2.5px !important;
  background-color: var(--header-primary) !important;
  border-radius: 9999px !important;
}

.nav-chevron {
  transition: transform 0.2s ease !important;
  color: #94A3B8 !important;
}

.nav-item-dropdown:hover .nav-chevron,
.nav-item-dropdown:focus-within .nav-chevron {
  transform: rotate(180deg) !important;
  color: var(--header-primary) !important;
}

/* 04. Menú Desplegable (Dropdown) */
.nav-item-dropdown {
  position: relative !important;
}

.nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  min-width: 330px !important;
  box-shadow: 0 20px 40px -10px rgba(11, 22, 51, 0.12), 0 8px 16px -4px rgba(11, 22, 51, 0.06) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1000 !important;
}

.site-header .nav-dropdown-menu.projects-menu{width:min(500px,calc(100vw - 40px))!important;min-width:0!important;padding:14px!important;border-radius:12px!important}
.projects-menu-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 2px 10px;font-size:13px;font-weight:650;color:#0B1633}
.projects-menu-header a{color:#1766FF!important;text-decoration:none!important;font-size:12px!important;font-weight:600!important;padding:4px!important}
.projects-menu-search{display:flex;align-items:center;gap:8px;border:1px solid #E2E8F0;border-radius:7px;padding:0 10px;background:#F8FAFC;color:#526079;margin-bottom:9px}
.projects-menu-search input{width:100%;min-width:0;min-height:36px;padding:8px 0;border:0;background:transparent;outline:none;font:13px/1.4 Inter,Arial,sans-serif;color:#0B1633}
.projects-menu-search:focus-within{border-color:#1766FF;box-shadow:0 0 0 2px #1766ff20}
.projects-menu-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 12px;max-height:min(260px,calc(100dvh - 210px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px}
.projects-menu-list a{display:flex!important;align-items:center!important;min-height:36px;padding:8px 10px!important;border:0!important;border-radius:6px!important;background:transparent!important;font:500 13px/1.4 Inter,Arial,sans-serif!important;color:#34445c!important;text-decoration:none!important;overflow-wrap:anywhere}
.projects-menu-list a:hover{color:#1766FF!important;background:#EEF4FF!important}
.projects-menu-list a[hidden]{display:none!important}
.projects-menu-list a:focus-visible,.projects-menu-header a:focus-visible{outline:2px solid #1766FF;outline-offset:1px}
.projects-menu-empty{margin:12px 4px 4px;color:#526079;font-size:12px;line-height:1.5}
.site-header .projects-menu-dismissed .nav-dropdown-menu.projects-menu{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
.mobile-projects{margin:2px 0 8px}.mobile-projects summary{cursor:pointer;color:#526079;font-size:13px;line-height:1.5;padding:10px 12px}
.mobile-projects .mobile-nav-sublist{max-height:240px;overflow-y:auto;overscroll-behavior:contain;margin:0 0 0 12px!important;padding:4px!important}
.mobile-nav-drawer .mobile-projects .mobile-nav-sublink{font-size:13px!important;line-height:1.4!important;min-height:40px;padding:10px 12px!important}
@media(max-width:600px){.projects-menu-list{grid-template-columns:1fr}}

.nav-dropdown-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  right: 0 !important;
  height: 12px !important;
  background: transparent !important;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown-menu.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.nav-dropdown-link {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: background 0.18s ease, transform 0.18s ease !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.nav-dropdown-link:hover {
  background: #F8FAFC !important;
}

.nav-dropdown-link--featured {
  background: rgba(23, 102, 255, 0.03) !important;
  border: 1px solid rgba(23, 102, 255, 0.1) !important;
  margin-top: 4px !important;
}

.nav-dropdown-link--featured:hover {
  background: rgba(23, 102, 255, 0.07) !important;
}

.nav-dropdown-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #F1F5F9 !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  transition: all 0.2s ease !important;
}

.nav-dropdown-link:hover .nav-dropdown-icon {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

.nav-dropdown-icon.featured {
  background: #EEF4FF !important;
  color: var(--header-primary) !important;
}

.nav-dropdown-link--featured:hover .nav-dropdown-icon.featured {
  background: var(--header-primary) !important;
  color: #FFFFFF !important;
}

.nav-dropdown-title {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.88rem !important;
  font-weight: 650 !important;
  color: var(--header-dark) !important;
  line-height: 1.3 !important;
}

.nav-badge-new {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: #10B981 !important;
  color: #FFFFFF !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0.03em !important;
}

.nav-dropdown-sub {
  font-size: 0.74rem !important;
  color: #64748B !important;
  margin-top: 2px !important;
  line-height: 1.35 !important;
}

/* 05. Acciones de la Derecha (Botón CTA) */
.header-right-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.btn-pill-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background-color: var(--header-primary) !important;
  color: #FFFFFF !important;
  padding: 10px 20px !important;
  border-radius: 9999px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid var(--header-primary) !important;
  box-shadow: 0 4px 14px rgba(23, 102, 255, 0.22) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.btn-pill-primary:hover {
  background-color: var(--header-primary-hover) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(23, 102, 255, 0.32) !important;
}

.mobile-menu-btn {
  display: none !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px !important;
  color: var(--header-dark) !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 06. Mobile Nav Drawer */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 20px 30px rgba(11, 22, 51, 0.1);
  padding: 20px 24px 28px;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}

.mobile-nav-drawer.is-open {
  display: flex !important;
}

.mobile-nav-drawer > a,
.mobile-nav-group > a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--header-dark) !important;
  text-decoration: none !important;
  padding: 8px 0 !important;
}

.mobile-nav-drawer > a.active,
.mobile-nav-group > a.active {
  color: var(--header-primary) !important;
}

.mobile-nav-group {
  display: flex !important;
  flex-direction: column !important;
}

.mobile-nav-sublist {
  padding-left: 14px !important;
  margin-top: 4px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  border-left: 2px solid rgba(23, 102, 255, 0.25) !important;
}

.mobile-nav-sublink {
  font-size: 0.88rem !important;
  color: var(--header-primary) !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(23, 102, 255, 0.04) !important;
  border-radius: 6px !important;
}

/* 07. Responsive */
@media (max-width: 960px) {
  .nav-links {
    display: none !important;
  }
  .mobile-menu-btn {
    display: inline-flex !important;
  }
  .header-right-actions .btn-pill-primary {
    display: none !important;
  }
}