/* Menu superior siempre visible al hacer scroll.
   Se usa position:fixed porque .nav vive dentro de .hero (overflow:hidden),
   donde position:sticky solo pegaria hasta el final del hero. */

.nav {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 900;
}

/* El menu sale del flujo: se devuelve al hero el hueco que ocupaba
   (8px de margen + 82px de alto) para que el contenido no suba. */
.hero {
  padding-top: 90px;
}

/* Los anclajes del menu no deben quedar tapados por el propio menu. */
#inicio,
#beneficios,
#como-funciona,
#plantillas,
#precios,
#contacto,
.section {
  scroll-margin-top: 110px;
}

@media (max-width: 980px) {
  .nav {
    top: 6px;
  }

  .hero {
    padding-top: 76px;
  }

  #inicio,
  #beneficios,
  #como-funciona,
  #plantillas,
  #precios,
  #contacto,
  .section {
    scroll-margin-top: 92px;
  }
}