/* ═══════════════════════════════════════════════════════════════
   Torno Cisneros — Navbar unificado (todas las páginas)
   Una sola fuente de verdad: se carga al final del <head> y sustituye
   a los estilos de navegación dispersos (index-shell, components,
   service-3d, blog, retos). Tipografía legible, mismo alto y mismo
   comportamiento en todo el sitio.
═══════════════════════════════════════════════════════════════ */

:root { --tc-nav-h: 84px; }

html body #main-nav {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 1000 !important;
  height: var(--tc-nav-h);
  padding: 0 !important;
  display: flex;
  align-items: center;
  background: rgba(8, 12, 20, 0.94) !important;
  border-bottom: 1px solid rgba(30, 111, 255, 0.24) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  transition: none !important;
}
html body #main-nav .nav-inner {
  width: min(1360px, 100% - 2.5rem) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(1rem, 2vw, 2rem);
}
html body #main-nav .logo { display: flex; align-items: center; flex: none; line-height: 0; }
html body #main-nav .logo-img { height: 68px !important; width: auto !important; display: block; filter: none !important; }

/* ── enlaces de escritorio ─────────────────────────────────── */
html body #main-nav .nav-links {
  display: flex !important;
  align-items: center;
  gap: clamp(1rem, 1.7vw, 1.9rem) !important;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
html body #main-nav .nav-links > li { position: relative; margin: 0; }
html body #main-nav .nav-links > li::before,
html body #main-nav .nav-links > li::after { content: none !important; }
html body #main-nav .nav-links > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.1rem;
  font-family: var(--font-heading, 'Barlow Condensed', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 1.06rem !important;
  line-height: 1 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  color: #c9d7e8 !important;
  text-decoration: none !important;
  transition: color 0.2s;
}
html body #main-nav .nav-links > li > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #1e6fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}
html body #main-nav .nav-links > li > a:hover,
html body #main-nav .nav-links > li > a:focus-visible,
html body #main-nav .nav-links > li > a.active,
html body #main-nav .nav-links > li > a[aria-current='page'] { color: #fff !important; }
html body #main-nav .nav-links > li > a:hover::after,
html body #main-nav .nav-links > li > a:focus-visible::after,
html body #main-nav .nav-links > li > a.active::after,
html body #main-nav .nav-links > li > a[aria-current='page']::after { transform: scaleX(1); }
html body #main-nav a:focus-visible { outline: 2px solid #3b8aff; outline-offset: 4px; border-radius: 2px; }

/* "Servicios": el propio enlace despliega el menú; el chevrón lo indica */
html body #main-nav .nav-services > a.nav-services-link::before {
  content: '';
  order: 2;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.18rem 0 0 0.15rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s;
  flex: none;
}
html body #main-nav .nav-services.tc-services-open > a.nav-services-link::before { transform: rotate(-135deg); margin-top: 0.18rem; }
html body #main-nav .nav-services.tc-services-open > a.nav-services-link { color: #fff !important; }
html body #main-nav .nav-services.tc-services-open > a.nav-services-link::after { transform: scaleX(1); }
html body #main-nav .tc-services-toggle { display: none !important; }
html body #main-nav .tc-services-disclosure { display: block; }

/* ── desplegable de servicios (solo por clic / teclado) ────── */
html body #main-nav .services-dropdown {
  position: absolute !important;
  top: calc(100% + 0.7rem) !important;
  left: -0.9rem !important;
  width: 320px !important;
  margin: 0 !important;
  padding: 0.5rem !important;
  list-style: none;
  background: #0b1220 !important;
  border: 1px solid rgba(30, 111, 255, 0.34) !important;
  border-radius: 6px !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s !important;
}
html body #main-nav .nav-services:hover .services-dropdown,
html body #main-nav .nav-services:focus-within .services-dropdown { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
html body #main-nav .nav-services.tc-services-open .services-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
html body #main-nav .services-dropdown::before {
  content: '';
  position: absolute;
  left: 1.6rem; top: -6px;
  width: 10px; height: 10px;
  background: #0b1220;
  border-left: 1px solid rgba(30, 111, 255, 0.34);
  border-top: 1px solid rgba(30, 111, 255, 0.34);
  transform: rotate(45deg);
  inset: auto;
  left: 1.6rem; top: -6px;
  height: 10px;
}
html body #main-nav .services-dropdown li { margin: 0; }
html body #main-nav .nav-links .services-dropdown a {
  display: block !important;
  padding: 0.8rem 0.95rem !important;
  border-radius: 4px;
  font-family: var(--font-heading, 'Barlow Condensed', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  line-height: 1.15 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #c9d7e8 !important;
  white-space: normal !important;
  text-decoration: none !important;
}
html body #main-nav .nav-links .services-dropdown a::after { content: none !important; }
html body #main-nav .nav-links .services-dropdown a:hover,
html body #main-nav .nav-links .services-dropdown a:focus-visible { color: #fff !important; background: rgba(30, 111, 255, 0.16) !important; }
html body #main-nav .services-dropdown .services-all a {
  color: #00cfff !important;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid rgba(60, 90, 140, 0.45);
  border-radius: 4px 4px 0 0;
}

/* ── botón cotizar ─────────────────────────────────────────── */
html body #main-nav .nav-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  min-height: 46px;
  padding: 0.7rem 1.25rem !important;
  font-family: var(--font-heading, 'Barlow Condensed', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 1.08rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: #1e6fff !important;
  border: 1px solid #3b8aff !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px -10px rgba(30, 111, 255, 0.8);
  transition: background 0.2s;
}
html body #main-nav .nav-cta:hover { background: #3b8aff !important; }
html body #main-nav .nav-cta svg { width: 18px; height: 18px; flex: none; }

/* ── hamburguesa y menú móvil ──────────────────────────────── */
html body #main-nav .hamburger {
  display: none !important;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px; height: 46px;
  padding: 0 10px !important;
  background: transparent !important;
  border: 1px solid rgba(60, 90, 140, 0.6) !important;
  border-radius: 4px;
  cursor: pointer;
}
html body #main-nav .hamburger span { display: block !important; height: 2px !important; width: 100% !important; margin: 0 !important; background: #e8f0f8 !important; transition: transform 0.3s, opacity 0.2s; }
html body #main-nav .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
html body #main-nav .hamburger.open span:nth-child(2) { opacity: 0; }
html body #main-nav .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

html body #mobile-menu {
  position: fixed !important;
  inset: 0 !important;
  z-index: 990 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start !important;
  gap: 1rem;
  padding: calc(var(--tc-nav-h) + 1.2rem) 1.5rem 2rem !important;
  overflow-y: auto;
  background: rgba(8, 12, 20, 0.985) !important;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s, opacity 0.3s;
}
html body #mobile-menu.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
html body #mobile-menu .mobile-links { display: flex; flex-direction: column; gap: 0 !important; }
html body #mobile-menu .mobile-links a {
  display: block;
  padding: 0.85rem 0 !important;
  font-family: var(--font-heading, 'Barlow Condensed', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 1.7rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #e8f0f8 !important;
  border-bottom: 1px solid rgba(60, 90, 140, 0.35) !important;
  text-decoration: none;
}
html body #mobile-menu .mobile-links a:hover { color: #3b8aff !important; padding-left: 0.4rem !important; }
html body #mobile-menu .mobile-links a.active,
html body #mobile-menu .mobile-links a[aria-current='page'] { color: #3b8aff !important; }
html body #mobile-menu .mobile-service-group { margin: 0 0 0.2rem !important; padding: 0 !important; border-bottom: 0 !important; }
html body #mobile-menu .mobile-links .mobile-service-link {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  color: #b8c8dc !important;
  padding: 0.6rem 0 0.6rem 1.1rem !important;
  border-bottom: 0 !important;
  border-left: 2px solid rgba(30, 111, 255, 0.5);
}
html body #mobile-menu .mobile-contacts { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; }
html body #mobile-menu .mobile-contacts a { font-size: 1.05rem; color: #c9d7e8; font-family: var(--font-mono, monospace); text-decoration: none; }

@media (max-width: 1120px) {
  html body #main-nav .nav-links { display: none !important; }
  html body #main-nav .hamburger { display: flex !important; }
  html body #main-nav .nav-cta { margin-left: auto; }
}
@media (max-width: 520px) {
  :root { --tc-nav-h: 72px; }
  html body #main-nav .logo-img { height: 52px !important; }
  html body #main-nav .nav-cta { padding: 0.6rem 0.9rem !important; font-size: 1rem !important; }
}

/* Páginas de retos: el navbar es fijo, el contenido arranca debajo */
body.tpc-site { padding-top: var(--tc-nav-h); }