/* ============================================
   Menu principal (portado desde base/index.html - iHost)
   Adaptado a la paleta de Grupo Hosting (site.css: --menta, --petroleo, --tinta, --nube, --linea)
   ============================================ */
nav {position: sticky;top: 0;z-index: 100;background: rgba(255, 255, 255, .92);-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); padding: 0 24px;}
.nav-inner {max-width: 1240px;margin: 0 auto;display: flex;align-items: center; justify-content: space-between;gap: 16px;height: 72px;}
.nav-inner .logo {display: flex;align-items: center;gap: 10px;}
.nav-links {display: flex; list-style: none; align-items: center; gap: 2px; margin: 0; padding: 0;}
.nav-links li { list-style: none;}
.nav-links a {display: inline-block;padding: 8px 14px;font-family: "IBM Plex Mono", ui-monospace, monospace;font-size: .72rem;
letter-spacing: .06em;text-transform: uppercase; font-weight: 500;color: var(--tinta-soft);border-radius: 8px;transition: color .3s, background .3s;}
.nav-links a:hover { color: var(--menta-deep);background: var(--nube);}
.nav-links a.nav-cta {background: var(--menta) !important;color: var(--petroleo-2) !important; font-weight: 700 !important;padding: 10px 18px !important; border-radius: 8px;}
.nav-links a.nav-cta:hover {background: var(--petroleo) !important;color: var(--menta) !important;}
.mobile-toggle {display: none;background: none; border: none;font-size: 24px; color: var(--petroleo); cursor: pointer;line-height: 1; padding: 4px;}
/* ——— Responsive: colapsa a menu desplegable ——— */
@media (max-width: 767px) {
  .nav-inner {height: 64px;position: relative;}
  .nav-links { display: none; }
  .nav-links.show {display: flex; flex-direction: column; align-items: stretch; gap: 2px;position: absolute;top: 100%; left: 0; right: 0;
background: #fff; padding: 12px; box-shadow: 0 12px 30px rgba(23, 48, 47, .14); border-top: 1px solid var(--linea);
 max-height: calc(100vh - 64px);overflow-y: auto; z-index: 99; }
.nav-links.show li { width: 100%;}
.nav-links.show a {display: block;padding: 12px 14px;font-size: .9rem;}
  .nav-links.show a.nav-cta { margin-top: 6px;text-align: center; }
  .mobile-toggle {  display: block; }
}